Hi together,
I am working on a solution to put focus on a specific cell in my new edit row. Currently in my ig grid when I add a new row always the first cell of the new row is active (has focus). I suggest this is a default setting.
I want that my second cell has focus as default whenever I create a new row. Also I am not sure which event to use for this. I tried it with:
$("#igGrid").on("iggridupdatingeditrowstarted", function (evt, ui) {...
...but this did not work. I got an initialization error here: Cannot call methods on igGridSelection prior to initialization.
Any ideas?
Thanks in advance,
Alex
current grid settings:
features.Sorting().Type(OpType.Local).ApplyColumnCss(false).ColumnSettings(scs => { scs.ColumnSetting().ColumnKey("ToBeOrdered").AllowSorting(false); scs.ColumnSetting().ColumnKey("Amount").CurrentSortDirection("asc").FirstSortDirection("asc").AllowSorting(false); scs.ColumnSetting().ColumnKey("Price").AllowSorting(false); scs.ColumnSetting().ColumnKey("DeliveryDays").AllowSorting(false); scs.ColumnSetting().ColumnKey("DeliveryPercent").AllowSorting(false); scs.ColumnSetting().ColumnKey("Total").AllowSorting(false); scs.ColumnSetting().ColumnKey("Qm").AllowSorting(false); scs.ColumnSetting().ColumnKey("X").AllowSorting(false); });
features.Updating().EnableDeleteRow(true).EnableAddRow(true).EditMode(GridEditMode.Row).ColumnSettings(cs =>
Hello Alex,
Thank you for posting in our forum.
A possible way to force the focus on the second input in the adding row would be to handle the EditRowStarted event and get the first editor using Jquery.
Then you can hook the focus event on the first editor and in the event handler force the focus on the second editor.
For example:
$(document).delegate("#grid", "iggridupdatingeditrowstarted", function (evt, ui) {
if(ui.rowAdding)
{
var row=$("tr[data-new-row='true']");
var firstCell=row.find("span")[0];
$(document).delegate(firstCell, "igeditorfocus", function (evt) {
var secondCell=row.find("span")[1];
$(secondCell).igEditor("setFocus", true);
$(secondCell).igEditor("select");
});
}
I’ve attached a sample for your reference. Let me know if you have any questions.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Hi Maya,
thanks for reply.
The code is not working correctly. My first cell is always the same even if I change the var firstCell = row.find("span")[1] to row.find("span")[2] or row.find("span")[3]. firstCell is always the first the index does not have any effect.
And this code block:
is not executed, i assume there is something wrong with the variable "firstCell".
Regards,
Hello linksaussen,
I’ve attached a sample for your reference as well as a video of how it behaves when I test it on my side. Please refer to the sample and test it on your side.
In the attached sample click on “Add new row”. The result I observer on my side was that the row enters edit mode and the focus is on the second cell.
Let me know if you’re getting a different behavior in the described scenario or if you’re aiming to achieve something different.
Hello Maya,
we got it working now. First problem was that I did not recognize a hidden column in my grid, so it always put focus on a wrong index.
Then I just select my cell and call the setFocus and Select on the igEditor. Thats it. Your second code part with the delegate is not necessary:
$("#igGridOfferCosts").on("iggridupdatingeditrowstarted", function (evt, ui) { if (ui.rowAdding) { var row = $("tr[data-new-row='true']"); var secondCell = row.find("span")[3]; $(secondCell).igEditor("setFocus", true); $(secondCell).igEditor("select"); } });
Thanks for your help,