Hi,
I am using the delegate iggridupdateingedit. After the user manually adds the first row and presses "Done". This event fires where I programmatically add a new row. After I add the new row, iwant that empty new row to have the first column focused. I cannot programatically figure out how to focus the first call on the newly created row.
Here is the delegate that gets called and creates the row. It works fine. Just how do I set focus to it's first cell after creating? I would think the first step would be setting focus to the row, but that did not work either.
$(document).delegate("#Mygrid", "iggridupdatingeditrowended", function (evt, ui) { $("#Mygrid").igGridUpdating("addRow", { PartNumber: "", BinLoc: "", Count: "" });
//This selectRow throws exception so I disabled
// $("#Mygrid").igGridSelection("selectRow", ui.rowID+1); });
Any help would be appreciated.
Thanks
ARG
Hello Alan,
There is a method for that in the igGridUpdating, called startAddRowEdit - it starts the editing for the new row and automatically focuses the first cell. Just by itself you will not see Done button, because editRowEnded is fired before the Done button is hidden. What I suggest you to do is use setTimeout method. It should look like this:
setTimeout(function () { $("#Mygrid").igGridUpdating("startAddRowEdit"); }, 0);
Please test it yourself and let me know what is the result on your side.
Regards,Ivaylo HubenovEntry-level developer
Yes that does create the row and has the desired effect in my application. Although I just noticed that when adding any row programmatically or with the Add Row" button. The "Cancel" button next to "Done" is grayed out and does not work.
Here is my my HTML page. Also note that I am using version 2014.2 and I had to reference the javascript locally. Because we have firewall rules that do not allow connecting out of our domain. Although I could request that I be allowed to do so if we have to.
<!DOCTYPE html><html><head> <title>Scanner 2 Test</title> <link href="CSS_Controls/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="CSS_Controls/structure/infragistics.css" rel="stylesheet" /> <script src="Modernizer/modernizr.custom.81975.js"></script> <script src="JQuery203/jquery-2.0.3.min.js"></script> <script src="JQueryUI/jquery-ui.min.js"></script> <script src="JS_Controls/js/infragistics.core.js"></script> <script src="JS_Controls/js/infragistics.lob.js"></script> <style> #grid_container { width: 100%; max-width: 560px; } </style></head><body> <table id="Mygrid"></table> <script> var gridDS2 $(function () { $("#Mygrid").igGrid({ autoCommit: true, datasource: gridDS2, primaryKey: "PartNumber", width: '100%', columns: [ { headerText: "Part Number", key: "PartNumber", dataType: "string" }, { headerText: "Bin Location", key: "BinLoc", dataType: "string" }, { headerText: "Piece Count", key: "Count", dataType: "string" } ], autofitLastColumn: false, autoGenerateColumns: false, features: [ { name: "Updating", editMode: "row", enableAddRow: true, enableDeleteRow: true, // editRowEnded: function (evt, ui) { }, } ] }); }); $(document).delegate("#Mygrid", "iggridupdatingeditrowended", function (evt, ui) { // // $("#Mygrid").igGridUpdating("addRow", { PartNumber: "", BinLoc: "", Count: "" }); $("#Mygrid").igGridUpdating("startAddRowEdit"); }); </script></body></html>
// var gridDS2 $(function () { $("#Mygrid").igGrid({ autoCommit: true, datasource: gridDS2, primaryKey: "PartNumber", width: '100%', columns: [ { headerText: "Part Number", key: "PartNumber", dataType: "string" }, { headerText: "Bin Location", key: "BinLoc", dataType: "string" }, { headerText: "Piece Count", key: "Count", dataType: "string" } ], autofitLastColumn: false, autoGenerateColumns: false, features: [ { name: "Updating", editMode: "row", enableAddRow: true, enableDeleteRow: true, // editRowEnded: function (evt, ui) { }, } ] }); }); $(document).delegate("#Mygrid", "iggridupdatingeditrowended", function (evt, ui) { // // $("#Mygrid").igGridUpdating("addRow", { PartNumber: "", BinLoc: "", Count: "" }); $("#Mygrid").igGridUpdating("startAddRowEdit"); }); // ]]>
Hello,
The editRowEnded event is fired even after cancel button is clicked while editing. That is why it seems the button doesn't work - it calls the startAddRowEdit function again.
An appropriate event in this case would be rowAdded. It is fired only when a new row is successfully added. The function should look like this:
$(document).delegate("#Mygrid", "iggridupdatingrowadded", function (evt, ui) { setTimeout(function () { $("#Mygrid").igGridUpdating("startAddRowEdit"); }, 0);});
Feel free to contact me if you have further questions.
That worked perfectly.