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
Maik
1155
Activate ig grid cell when adding new row
posted

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 =>
              

Parents
No Data
Reply
  • 29417
    Offline posted

    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://es.infragistics.com/support

     

     

    gridRowAdding.zip
Children