How to set focus on cell after user Add new row? I tried this:
$(document).delegate("#MyGrid", "iggridupdatingeditrowstarted", function (evt, ui) { var editor = ui.owner.editorForKey("ProductName"); $(editor).igEditor("setFocus", true); $(editor).igEditor("select");}
But focus is still in the first cell of row.
Hello Luis,
Thank you for posting in the community.
A possible way to force focus on any particular input in the adding row would be to handle, as you assumed, 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 any editor that you would like.
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")[4]; $(secondCell).igEditor("setFocus", true); $(secondCell).igEditor("select"); }); } });
$(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")[4];
$(secondCell).igEditor("setFocus", true);
$(secondCell).igEditor("select");
});
}
I made a small sample and I am attaching it for your reference.
Please let me know if you need any further assistance with this matter.
Hi Vasya, this code doesn't allow to change focus manually, so users can't move to other cells and I see that igeditorfocus runs many times. :(
I am glad that you find my suggestion helpful.
Thank you Vasya. It works fine now. Basically you changed .igEditor("setFocus", true) to .igEditor("setFocus", -1) and .delegate to .on, I think the main change is in the parameter to delay set focus.
Thank you for getting back to me.
The reason for this issue is that the igEditorFocus event is handled for all editors. Basically, this means that every editor that is focused will go to the function that sets the focus to the fourth editor. What I can suggest in order to achieve your requirement is handling the event only for the first 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]; $(firstCell).on('igeditorfocus', function (evt) { var targetCell = row.find("span")[4]; $(targetCell).igEditor("setFocus", -1); $(targetCell).igEditor("select"); }); } });
$(firstCell).on('igeditorfocus', function (evt) {
var targetCell = row.find("span")[4];
$(targetCell).igEditor("setFocus", -1);
$(targetCell).igEditor("select");
I modified the sampel and I am attaching it for your reference.
By the way, that happens in your code, in my code after getting focus on cell "ProductName" (with your code) focus is automatically set to first cell again, but I can move to other cells.