Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Cole Spolaric
15
iggrid detect cell selected in different row
posted

I am trying to detect when a user puts the cursor in a cell of a different row.  I want to be able to default a value when they do this.  This really shouldn't be hard, but I cannot find any documentation on the API directives. Basically, when I do $("Grid").bind("directive", function..., I want to know everything that I can possible do. It would be nice if there was a complete list of these.  

Parents Reply
  • 485
    Offline posted in reply to Cole Spolaric

    Hello Cole,

     

    Upgrading the product to the newest version would allow you to use the newest versions of jQuery as well. The bind() method you said you use has been superseded by the on() method since jQuery 3.0. One of the syntax variations allows you to attach an event handler to an element and listen to events raised by a certain type of child elements. That allows you to attach an event handler to the html <body> element and listen for clicks on the cells in the grid. The code might look like this:

    $("body").on("click", "td", (event) => {
    currentClickedRow = $(event.currentTarget).closest("tr")[0]
    if ($(currentClickedRow).hasClass("ui-iggrid-addrow ui-widget-header")) {
        return;
    }
    if (lastActiveRow !== currentClickedRow) { 
        lastActiveRow = currentClickedRow;
        console.log(lastActiveRow)
    }
})

     

    The snippet above would just console.log every newly clicked row – which means clicking another cell in the current row would not console.log anything. Please note that the Updating feature adds a black row at the top of the igGrid (the “Add new row), so I have to check if it has been clicked and cancel the console.log in that case. I keep the last active row stored in a variable so I could check if it is same as the event target on every cell click.

     

    Another requirement you said you have is to be able to handle the scenario when a user ends the editing of the current row by pressing “Enter” and the next row enters edit mode. Attaching an event handler to the editRowStarting event would allow you to do that –  the igGrid provides you the rowID by “ui.rowID” and it might be used to get the actual <tr> element by calling the “rowByID” method. Then just compare the two objects and see if the last clicked row is the same as the one about to be edited. The event handler would look like this (again I am just console.log-ing the <tr> element for the sake of simplicity):

    $("#grid").igGrid({
    ….some grid options….
    features: [
        {
            name: "Updating",
            editRowStarting: (evt, ui) => {
                if (!ui.rowAdding){
                    let currentRow = $("#grid").igGrid("rowById", ui.rowID)[0];
                    if ( currentRow !== lastActiveRow) {
                        lastActiveRow = currentRow;
                        console.log(lastActiveRow)
                    }
                }
            }
        }
    ]
})

     

    Please note that I am again checking if the user has clicked the “Add new row” before executing the handling logic.

     

    Here is the whole code sample in case you want to run it on your side, using Ignite UI 18.2:

     

    <!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/infragistics.loader.js"></script>
</head>
<body>
    <div style="margin: auto; width:1000px; text-align: center">
        <table id="grid"></table>
    </div>
    <script>
        $.ig.loader({
			scriptPath: "http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/",
			cssPath: "http://cdn-na.infragistics.com/igniteui/2018.2/latest/css/",
            resources: "igGrid.*, igCombo",
            ready: () => {
                let lastActiveRow = null;
                $("body").on("click", "td", (event) => {
                    currentClickedRow = $(event.currentTarget).closest("tr")[0]
                    if ($(currentClickedRow).hasClass("ui-iggrid-addrow ui-widget-header")) {
                        return;
                    }
                    if (lastActiveRow !== currentClickedRow) { 
                        lastActiveRow = currentClickedRow;
                        console.log(lastActiveRow)
                    }
                })
                let data = [
                    { "ProductID": "1", "SellerName": "", "ProductCategory": "", "UnitsSold" : "", "Date": ""},
                    { "ProductID": "2", "SellerName": "", "ProductCategory": "", "UnitsSold" : "", "Date": ""},
                    { "ProductID": "3", "SellerName": "", "ProductCategory": "", "UnitsSold" : "", "Date": ""},
                    { "ProductID": "4", "SellerName": "", "ProductCategory": "", "UnitsSold" : "", "Date": ""},
                    { "ProductID": "5", "SellerName": "", "ProductCategory": "", "UnitsSold" : "", "Date": ""}
                ];
                $("#grid").igGrid({
                    dataSource: data,
                    responseDataKey: "results",
                    primaryKey: "ProductID",
                    width: "1000px",
                    autoCommit: true,
                    columns: [   
                        { headerText: "Product ID", key: "ProductID", dataType: "number", width: "25%", hidden: true},
                        { headerText: "Seller Name", key: "SellerName", dataType: "string", width: "25%"},
                        { headerText: "Product Category", key: "ProductCategory", dataType: "string", width: "25%"},
                        { headerText: "Units Sold", key: "UnitsSold", dataType: "number", width: "25%" },
                        { headerText: "Date", key: "Date", dataType: "date", width: "25%"}
                    ],
                    features: [
                        {
                            name: "Updating",
                            editRowStarting: (evt, ui) => {
                                if (!ui.rowAdding){
                                    let currentRow = $("#grid").igGrid("rowById", ui.rowID)[0];
                                    if ( currentRow !== lastActiveRow) {
                                        lastActiveRow = currentRow;
                                        console.log(lastActiveRow)
                                    }
                                }
                            }
                        },            
                        {
                            name: "Selection"
                        }
                    ]
                })
            }
        })
    </script>
</body>
</html>

     

    Feel free to contact me if I could be of any further assistance.

Children