Shortcut keys for grid row navigation/editing/adding

Hi,

There is  a requirement form client that they dont want to use mouse for adding/editing rows. Is there any built in functionality in igGrid through which we can add new rows/edit existing ones through the keyboard. The editMode for my grid is ‘row’ .

TAB key does not select the ‘+Add New Row’ button on top of the grid. Is there any built in key bound to the grid for adding new rows & selecting existing ones through the keyboard.

How can I bind custom keys for grid adding/editing fucntionality.

Also how can I disable ‘Done / Cancel’ buttons without affecting the existing functionality of the grid. I mean will disabling “Done / Cancel” button affect exisiting functionality if autoCommit is set to false.

If possible, please provide MVC helper syntax , I am using MVC Helper for initialization of grid.

Thanks.

Hello Jimmy,

Please find answers to your questions below.

1) Going to the Add New Row

If the grid is on focus you can go to the Add New Row with Shift + Tab (For example try seeting focus on the grid by clicking on some column header and then press Shift + Tab).

If the grid is out of focus you can use Tab, which will start focusing on every page element one by one starting from the browser’s address bar. However this is not that suitable if the focus should go through a lot of elements until it reaches the Add New Row.

2) How can I bind custom keys for grid adding/editing functionality.

You can use the startEditTriggers property of the grid – https://www.igniteui.com/help/api/2025.1/ui.iggridupdating#options:startEditTriggers. You can set it so that pressing the Enter key over a cell will trigger edit mode. This is the razor syntax to do this:

features.Updating().ShowDoneCancelButtons(false).StartEditTriggers(GridStartEditTriggers.Enter);

3) Will disabling “Done / Cancel” button affect exisiting functionality

Disabling the Done/Cancel button when autoCommit: false will not affect exisiting functionality. However in this case you will have to implement how the changes are commited. For an example how this can be done via a custom button please refer to this sample:

https://www.igniteui.com/grid/basic-editing

I hope this is helpful. Please do not hesitate to contact me if you have any further questions

Hello,

I'm just following up to see if you need any further assistance with this issue. If so please let me know.

One more thing,

There is a bootstrap-modal window on my page which is opened on the blur event of a grid column in edit mode. As soon as the person blur from the column editor of the grid, the modal windows opens up. Now I want the user to navigate through the rows another grid which is in this modal window, but the focus is still on the background grid's opened editors and not the currently opened modal grid. I want to set focus on this mdoal's grid's first row now but I am not able to.

I tried :        

                    $('#accSelectionModal').modal('show');
                    $("#accSelectionGrid").igGridSelection("selectRow", 0);  // (This only highlights the first row)

This selects the first row of the modal window BUT pressing the up-down arrow doesnt navigate from row to row. I have to manually CLICK on any row and then pressing the UP/DOWN arrow keys works for navigation. How can I set focus on the modal's grid without click it, Is there any elemnt or Method though which this could be done, Calling Jquery's  $('#accSelectionGrid').focus(); doesnt help because I think it requires an input field to set focus on & not the entire grid. I tried selecting the first row of the modal window, It gets highlighted but up/down arrow key dont work, Infact the focus is on the background grid of the page & not the modal window. How to set focus on Modal's grid programmatically and then use up/down arrow key without using the mouse or setting focus explicitly on the modal grid.

Hello Jimmy,

Please find answers to your questions below:

Question 1: The “Shift Tab” functionality is somewhat doing the task but it depends on the tab index and all that

Shift + Tab is not part of the keyboard navigation implementation of the igGrid. so it is expected it will not work in all scenarios, such as yours. I just suggested since there is a chance that it does the work for you.

If you want to implement your custom shortkeys, you can use the jquery .keypress event and depending on which key is pressed (this can be checked via the browsers key codes) to programmatically enter edit mode of a cell, change selected cell, set focus on a element, etc. Your code shoud be similar to this:

$(document).on(“keypress”, function () {   $(“#accSelectionGrid”).igGridSelection(“selectRow”, 0);  });

Question 2. How can I specify multiple startEditTriggers in MVC

You separate the different options with | :

.EditMode(GridEditMode.Row).StartEditTriggers(GridStartEditTriggers.Enter | GridStartEditTriggers.F2);

Question 3.  How to set focus on Modal’s grid programmatically and then use up/down arrow key

You are right, .focus() will not work on elements that are not capable of receiving focus by default. However you can add tabIndex attribute to the DOM element contaning the grid and then it will be able to receive focus using the .focus() method.

$(“#accSelectionGrid”).attr(“tabIndex”, “0”);$(“#accSelectionGrid”).focus();

I hope this helps. Please note that Infragistics policy is to open a new thread for every different issue that customers have. This makes searching and tracking easier and enables us to provide better support. Please keep this in mind regarding any future issues that you face.

Hello, 

Thanks again.

Q2: Solved.

Q1: Can you tell me how do I trigger the "Add New Row" event. (Just open the editors for add new row, User will enter the column values)

$(document).on("keypress", function () {
   $("#accSelectionGrid")….????           //+Add new row method?
});

Q3: Solved Now.

I tried doing the same like this :

$("#accSelectionGrid").attr("tabIndex", "0");
$("#accSelectionGrid").focus();

^ Now when I press up/down arrow key , the whole grid scrolls through its scroll bar, I need to navigate from one row to another using up/down arrow keys. I mean I dont want to scroll the grid rows through its scroller, I want it to navigate from one row to another. Writing the above two lines scroll the whole grid container.

$("#accSelectionGrid_container").attr("tabIndex", "0");
$("#accSelectionGrid_container").focus();

^ #accSelectionGrid_container did it.

Regarding the new thread point, I will keep that in mind, though I am only asking grid-keyboard-shortcut queries which the title of the thread suggests.

I hope I am not taking too much of your time, And I am not going to ask any new questions in this thread, just needed some more help on the ones I already asked. Thanks for your help & time , I appreciate it.

Hello Jimmy,

I am glad this helped you resolve your issues. Regarding Question 1:

You can reference the DOM element that hold the row for adding new row and simulate click with jQuery:

$(".ui-iggrid-addrow").trigger("click");

Please let me know if you have any further questions, I will be glad to help.

Great, thanks.

Q1 : Solved.

Hello Jimmy,

I am glad this helped. Please let me know if you have any other questions on this.

Hello ,

Thanks for the help.

Q1: The "Shift Tab" functionality is somewhat doing the task but it depends on the tab index and all that. I have used bootstrap master template the tab indexes are auto implemented in it therefore the whole page starts from my navigation menus of master page & then reaches the form elements but still doesnt tab into "add New Row", It tab into the column headers but on pressing shift tab it goes one column back but does not select "add new row".Then I had to explicitly re define the tab indexes of my form but still once it reaches the grid the tab then start from the navigation menus which is not what I need.

What i am looking for is somewhat a definite key for the "Add new Row" button functionality. For example if the user presses the "Insert" button without setting focus on the grid, the grid should open the Add new row editors. Basically its a client requirement that mouse wont be used, everything has to be done through keyboard.

How can I bind "insert" key to trigger "add new row" functionality whenever the user presses it. Could you please provide a short sample or code snippet to do that.

Q2: startEditTriggers is working fine with one key, How can I specify multiple startEditTriggers in MVC Helper syntax, I have used it like this:

.EditMode(GridEditMode.Row).StartEditTriggers(GridStartEditTriggers.Enter);  (WORKS)

.EditMode(GridEditMode.Row).StartEditTriggers(GridStartEditTriggers.Enter,GridStartEditTriggers.DblClick);   (DOESNT WORK)

Q3: This query is resolved.

Thanks for helping. Appreciate it.