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 - http://help.infragistics.com/jQuery/2014.2/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:
http://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 ,
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.
Hello,
I'm just following up to see if you need any further assistance with this issue. If so please let me know.