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.
Hello Cole,
Thank you for posting in our forum.
As I want to be sure I understand your question correctly, some more details regarding your scenario would be appreciated:
Providing me those details would allow me to give you a more precise answer.
The full API documentation may be found here:
https://www.igniteui.com/help/api/2018.2/ui.iggrid
I should have stated that the grid starts out with 5 blank rows.
So when the user is editing or has their cursor in a row with data and then clicks into, or tabs into a cell in a different row, I am trying to capture that event. So yes, the updating feature is enabled.
I inherited the app that I am working on, but the infragisitcs.js says it is version 12.2 and Infragistics.Web.MVC is 3.13.2.2157, which I'm sure is old at this point.
At this point, according to our Product Lifecycle document, all Ignite UI versions prior to version 16.2 are not eligible for support. What I can suggest is upgrading to latest version available for Ignite UI – 18.2. This way you would take advantage of all the improvements that have been made to the product in the last 6 years, as well as the new features that have been added.
Detailed information regarding the product lifecycle and support state you may find here.
I understand that this is a legacy project, however, these old versions of both Ignite UI and jQuery libraries are having some limitations. Using the latest versions of these libraries may bring some opportunities for achieving your requirement and solving your issues.
Please let me know if you need some further information regarding this matter
Let's say I go to a newer version. How would it be possible to do this? I don't even see any answers for a newer version.
As far as going to a newer version, there are some limitations as certain packages are stuck on .net 4.0 and won't let me go any higher with the other versions. But there might be a rewrite of my legacy app soon.
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.
Thank you for your response. This looks like what I need, but I have one remaining question. Does this work if there are multiple grids and I want to target just one of them?
The code from my previous answer would need some minor modifications if you have several igGrids on the same page and you need to target only one of them. For example, if you have three grids with IDs of #grid1, #grid2, #grid3, and you want on listen only for #grid1:
$("#grid1").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) } })
If you need any additional assistance, feel free to contact me.