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.
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 ,
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.
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