1. Home
  2. Forum
  3. jQuery
  4. Keyboard Navigation on Hierarchical Grid

Keyboard Navigation on Hierarchical Grid

If you attempt to expand any row using the keyboard we would expect behaviour similar that of a treeview - press right arrow key it expands, press left arrow key it collapses.

Unfortunately, we cannot find any keypress to expand the rows or even any reliable way of expanding on a keypress function programmatically.

Can you offer any help?

Replicated with hardcoded values:

http://jsplayground.syncfusion.com/sap01k0c

5 Replies
MS Mani Sankar Durai Syncfusion Team October 13, 2017 11:01 AM UTC

Hi Emma, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we found that you would like to expand or collapse the row in gird using key board navigation. To use key board navigation we suggest you to use allowKeyboardNavigation property in grid.  
Refer the code example 
  $("#Grid").ejGrid({ 
                    ... 
                    allowKeyboardNavigation: true, 
                    ... 
}) 
 
By pressing the ctrl + up or down arrow the rows in current page of grid will expand or collapse by key pressing.  
Also we have prepared a sample based on current selected row only to be expand or collapse by key pressing and the same can be available from the below link. 
Refer the code example 
<script type="text/javascript"> 
            var argsval; 
            $(function () { 
                $("#Grid").ejGrid({ 
... 
                    allowKeyboardNavigation: true, 
                    create: function (args) { 
                        argsval = args; 
                        $(document).on("keydown", function (e) { //keydown event  
                            if (e.shiftKey && e.keyCode === 38) { // Shift + up arrow- key code. 
                                $("#Grid").find(".e-gridcontent .e-row .e-active").focus();  //focus grid 
                                var curEl; 
                                var gridObj = $("#Grid").ejGrid("instance"); 
                                if (gridObj.selectedRowsIndexes[0] != -1) { 
... 
                                        gridObj.expandCollapse(curEl); 
                                    } 
                                    else { 
                                        curEl = currentTr.find(".e-detailrowexpand"); 
                                        gridObj.expandCollapse(curEl); 
                                    } 
                                } 
                            } 
                            if (e.shiftKey && e.keyCode === 40) { //shift + down arrow key. 
                                $("#Grid").find(".e-gridcontent .e-row .e-active").focus();  //focus grid 
                                var curEl ; 
                                var gridObj = $("#Grid").ejGrid("instance"); 
                                if (gridObj.selectedRowsIndexes[0] != -1) { 
... 
                                        gridObj.expandCollapse(curEl); 
                                    } 
                                    else { 
                                        curEl = currentTr.find(".e-detailrowexpand"); 
                                        gridObj.expandCollapse(curEl); 
                                    } 
                                } 
                            } 
 
                        }); 
 
                    }, 
                    columns: [... 
                    childGrid: { 
                        dataSource: [{ ID: "test", Something: "other" }], 
                        ... 
                    } 
                }) 
            }); 
            $("#collapsebutton").ejButton({ click: "btnClick" }); 
            function btnClick() { 
                var curEl ; 
                ... 
                } 
            } 
        </script> 

Refer the documentation link 

From you code example we found that you have traversing the element as recordplusexpand. But it will be used only when using grouping. So we suggest you to use the above solution which helps to achieve you requirement.  

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


EB Emma Beviss October 16, 2017 11:58 AM UTC

Hello, 

Thank you for your response. That has corrected the initial however, we now have an issue when on keyboard navigation pressing enter clears the focus from the grid entirely. Is this expected behaviour? Is there a workaround for this so we do not lose focus?

We can replicate in your provided link: 

http://jsplayground.syncfusion.com/prtm5r2r


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 17, 2017 05:47 AM UTC

Hi Emma,  
 
Enter key (keycode - 13) has been configured for the saveRequest which will update the Grid records when the editing/adding has been enabled in the Grid. Since, you have not configured the edit/add feature, Grid will stop propagating the event and lost its focus. To overcome this problem, we suggest to redefine the enter key configuration as follows.  
 
    <script> 
        $("#Grid").ejGrid({ 
            keySettings: { 
 
                saveRequest: "" 
            }, 
        }); 
    </script> 
 
Note: By default, keycode 13 has been set to keySettings.saveRequest. If you are using a edit/add functionality in the Grid, it will function perfectly with required features.  
 
We have prepared a sample that can be referred from the following jsPlayground.  
 
 
Regards,  
Seeni Sakthi Kumar S. 
 


EB Emma Beviss October 17, 2017 07:34 AM UTC

Unfortunately, that solution will not work for us.

The grid we are using does have the add/edit functionality, however, I am talking about the enter key when the grid is not in edit mode, the focus is completely removed from the grid. When in add/edit mode the enter key works as intended.

Please see the issue in the following demo: http://jsplayground.syncfusion.com/agboqdpu


MS Mani Sankar Durai Syncfusion Team October 19, 2017 12:25 PM UTC

Hi Emma, 

We have analyzed your query and we are able to reproduce the reported issue. We have logged a defect report and the fix for this issue will be included in our Volume 4 SP1, 2017 release expected to be rolled out by the end of month November, 2017. 

Please be patience until then. 

Regards, 
Manisankar durai. 


Loader.
Up arrow icon