1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. USING ARROW KEYS ON THE KEYBOARD TO NAVIGATE THE GRID

USING ARROW KEYS ON THE KEYBOARD TO NAVIGATE THE GRID

Hi,

I'm using a JavaScript Grid in ASP.NET Core ej2 (see below). How do I implement grid navigation (Up - Down - Left - Right) using Keyboard Arrow Keys




Thanks
Simon


17 Replies 1 reply marked as answer
VS Vignesh Sivagnanam Syncfusion Team April 29, 2021 12:10 PM UTC

Hi Simon 

Greetings from Syncfusion support 

Based on your query you want to perform navigations in the grid using Keyboard arrow keys. By default you can use the navigations in the grid using arrow keys. Please refer the below Documentation for your reference, 


To focus the header at first tab we have an API called enableHeaderFocus which will focus the Grid’s header in the first press towards the Grid. If the enableHeaderFocus API is disabled, Grid content will be focused. Refer to the following table for the Grid’s Accessibility.   

Action  
Shortcut Key  
Comment  
Header focus  
Alt + J  
To focus grid header element  
Content focus  
Alt + W  
To focus grid content element  
Filter Open/Close  
Alt + Down arrow/ Esc  
Using this key we can open/close filter menu(excel, menu and checkbox filter) when focus in header element.  
Group/UnGroup  
Ctrl + Space  
Using this key we can group or ungroup when focus in header element.  
Column menu open/close  
Alt + Down arrow/Esc  
Using this key we can open/close column menu when focus in header element.  
Reorder columns  
Ctrl + left arrow or right arrow  
Using this key we can move column to left or right side when focus in header element.  
Column chooser  
Space  
Using this key we can open the column chooser dialog  
Sorting  
Enter  
Using this key we can sort (ascending/ descending) the column.  
Paging  
PgUp/PgDn  
Using this key we can navigate the prev/next page.  

Regards 
Vignesh Sivagnanam 


SB Simon Bunya April 29, 2021 12:21 PM UTC

Hello Vignesh,

Thanks for your reply.

unfortunately, what you have shared with me doesn't work. Like one can use DownArrow, UpArrow, LeftArrow, and RightArrow key on the keyboard, other than using a mouse to navigate through excel, for example, that is the requirement I want to implement on a grid.

Thanks
Simon

VS Vignesh Sivagnanam Syncfusion Team April 30, 2021 11:01 AM UTC

Hi Simon 

Thanks for the update 

Based on your query we need more information to validate further on your requirement. Please share the below details to provide solution as soon as possible. 

1. Are you want to navigate in the grid at edit state or normal state? 

2. share the exact requirement using screenshot or video demonstration. 

Please refer the below video demonstration and explain the exact requirement. 


Regards 
Vignesh Sivagnanam 


SB Simon Bunya April 30, 2021 01:55 PM UTC

Hello Vignesh,

I want to navigate in the grid at edit state when using inline editing. 

Thanks




VS Vignesh Sivagnanam Syncfusion Team May 4, 2021 01:05 PM UTC

Hi Simon 

Thanks for the update 

Based on your query you want to navigate the between the cells using arrow keys when the grid in edit state. So, we have prepared a sample by modifying the arrow key navigation in the grid using the EJ2 Grid load event. 

Please refer the below code example and sample for your reference, 

function load() { 
  grid.element.addEventListener("keydown", function(e) { 
    var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
    if (e.keyCode === 39) { 
      var currentEle = ej.grids.parentsUntil(e.target, "e-rowcell"); 
      var currentIdx = currentEle.cellIndex;                                   //next cell index 
      var gForm = ej.grids.parentsUntil(currentEle, "e-row"); 
      if (currentIdx < grid.columns.length - 1) { 
        var element = gForm.querySelectorAll(".e-rowcell")[currentIdx + 1]; 
        var ele = element.querySelector(".e-input");                     //next element 
        ele.select();                                                                               //focusing the next cell 
        ele.focus(); 
      } 
    } 
    if (e.keyCode === 37) { 
      var currentEle = ej.grids.parentsUntil(e.target, "e-rowcell"); 
      var currentIdx = currentEle.cellIndex;                                      //previous cell index 
      var gForm = ej.grids.parentsUntil(currentEle, "e-row"); 
      var element = gForm.querySelectorAll(".e-rowcell")[currentIdx - 1]; 
      var ele = element.querySelector(".e-input");                       //previous element 
      ele.select();                                                                                 //focusing previous cell 
      ele.focus(); 
    } 
  }); 
} 


Regards 
Vignesh Sivagnanam 


Marked as answer
SB Simon Bunya May 4, 2021 01:52 PM UTC

Hi Vignesh,

Many thanks for your reply.

I'm glad to say that it works perfectly for the left arrow key and the right arrow key many thanks. 

Unfortunately, when I use the same logic to implement for the down arrow key, up arrow key, and Enter Arrow key, it doesn't work.


Simon

VS Vignesh Sivagnanam Syncfusion Team May 5, 2021 12:59 PM UTC

Hi Simon 

Thanks for the update 

Based on your query you want to navigate the focus between the cells using the enter key. We have modified the sample to move the focus navigation while entering the enter key. Please refer the below code example and sample for your reference, 

if (e.keyCode === 13) { 
      grid.keyConfigs.enter = "";                                           //remove the default behavior of the enter key 
      var currentEle = ej.grids.parentsUntil(e.target, "e-rowcell"); 
      var currentIdx = currentEle.cellIndex; 
      var gForm = ej.grids.parentsUntil(currentEle, "e-row"); 
      if (currentIdx < grid.columns.length - 1) { 
        var element = gForm.querySelectorAll(".e-rowcell")[currentIdx + 1]; 
        var ele = element.querySelector(".e-input"); 
        ele.select(); 
        ele.focus(); 
      } 
    } 

Note : it is not possible to navigate the focus using the left and right arrow keys in the grid, because it leads to some issue in the grid’s default behavior.  


Regards 
Vignesh Sivagnanam 


SB Simon Bunya May 5, 2021 03:50 PM UTC

Hi Sivagnanam,

Great, 
Many thanks.

I have another question.  I want to push all records on the grid (ej2 javascript grid on a dialog) to the controller even if that particular row/record is not edited.  Apparently it pushes only changed/edited records to the controller. 

below is the code of the grid, have been using cellSaved to push the records to the controller, but this method pushes only edited/changed records yet I want to push all the records on that grid.





 //Cell save
        function cellSaved(args) {
            this.editModule.batchSave();
        }



Thanks
Simon


SB Simon Bunya May 6, 2021 09:13 AM UTC

Hello,
using this link:
https://www.syncfusion.com/forums/157479/entire-data-grid-rows-to-controller-using-ajax


Ajax
     var gridObj = document.getElementById('Grid').ej2_instances[0];

        var g = gridObj.dataSource;
        //console.log(g);
            var ajax = new ej.base.Ajax({
                url: 'InsertDetailsChildUrl',
                type: 'POST',

                data: JSON.stringify(g)

            });
            ajax.send();
        //}) 


controller:
public IActionResult InsertLoadListDetailsChildUrl([FromBody] List<InsertDetailsChildUrl> value, string _LegCode)
{
....
}

But it pushes null values to the controller 
It is not working/pushing the entire grid records

Please advise 
Simon


VS Vignesh Sivagnanam Syncfusion Team May 6, 2021 02:53 PM UTC

Hi Simon 

Thanks for the update 

Based on your query, you want to send all the record in the grid to the server side after saving the edited data. You can achieve your requirement by using addParams feature to send the all grid records to the server side. 

Please refer the below code example for your reference, 

function actionBegin(args) { 
    if (args.requestType === "save") { 
      this.query = new ej.data.Query().addParams('index', this.currentViewData); 
    } 
  } 

….……………………………………………….. 

public class CRUDModel 
        { 
            public List<Orders> Added { get; set; } 
            public List<Orders> Changed { get; set; } 
            public List<Orders> Deleted { get; set; } 
            public Orders Value { get; set; } 
            public int key { get; set; } 
            public string action { get; set; } 
      public IDictionary<string, object> @params { get; set; } 
    } 
    public class data 
    { 
      public object index { get; set; } 
    } 


From your query, we found that you have used the inline editing feature in the grid. While using the normal editing feature, the cellSaved method is not feasible to use in the grid. you can send the data to the server using the actionBegin event.  


The cellsaved, beforeBatchsave, beforeBatchAdd, beforeBatchDelete are some the event you can use only for the batch editing and some event used only for the normal editing. 

If you want to use the cellSaved event we suggest you to use the batch editing feature in the EJ2 grid. 

Please get back to us for further assistance, 

Regards 
Vignesh Sivagnanam 


SB Simon Bunya May 25, 2021 02:07 PM UTC

Many thanks for the response, 

How can I apply styling on this ej2 Javascript grid buttons on the toolbar?

I want to apply different CSS classes to each button to chang its color (e-danger, e-success).


Thanks
Simon



VS Vignesh Sivagnanam Syncfusion Team May 26, 2021 01:10 PM UTC

Hi Simon,  
   
Thanks for the update  
   
Based on your query you want to change the color of the buttons in the toolbar.  
   
Your requirement can be achieved by adding the custom class to the class list of the button element on the ` dataBound` event of EJ2 Grid.  
   
Please refer the below code snippet.  
dataBound: () => {  
 this.element  
    .getElementsByClassName('e-add')[0]  
    .parentElement.classList.add('e-success');  
 this.element  
    .getElementsByClassName('e-delete')[0]  
    .parentElement.classList.add('e-danger');  
}  
  
<style>  
  .e-success {  
    background-color: #22b24b !important;  
  }  
   
  .e-danger {  
    background-color: #d64113 !important;  
  }  
</style>    
    
   
Please find the sample and revert for more queries.  
  
Regards,  
Vignesh Sivagnanam 


SB Simon Bunya May 26, 2021 01:30 PM UTC

Thanks for this, it works perfect for add and delete buttons but, it doesn't work for a custom button.

In this case, I create a custom button "Remove Passenger", with an id = "Click".

if I apply the same on this custom button, it doesn't change the color.



Regards
Simon




SB Simon Bunya May 26, 2021 01:31 PM UTC

Thanks for this, 

it works perfect for add and delete buttons but, it doesn't work for a custom button.

In this case, I create a custom button "Remove Passenger", with an id = "Click".

if I apply the same on this custom button, it doesn't change the color.



Regards
Simon




VS Vignesh Sivagnanam Syncfusion Team May 27, 2021 09:45 AM UTC

Hi Simon 
  
Thanks for the update 
  
Based on your query you want to apply the css to the custom toolbar button in the grid toolbar. You can get the button element using the id of the button that you have provided and you can use the below code example to achieve your requirement at your end. 
  
Please refer the below code example and screenshot for your reference, 
  
toolbar: [ 
    'Add', 
    'Edit', 
    'Delete', 
    'Update', 
    'Cancel', 
    { 
      text: 'Button', 
      prefixIcon: 'e-icons e-delete', 
      id: 'click' 
    } 
  ], 
…………………………………………………….. 
dataBound: function(args) { 
    document.getElementById('click').classList.add('e-success'); 
  } 
  
 
  
Regards 
Vignesh Sivagnanam 


SB Simon Bunya June 10, 2021 09:37 AM UTC

Hey

I want to trigger an action when a user refreshes the form.

Is there a way to know/capture the requestType == "refresh". => if (args.requestType == "refresh") {....}, 

e.g..
like the same way, I can know action type == 'cancel' => if (args.requestType == "cancel" ) {....}


Thanks
Simon

VS Vignesh Sivagnanam Syncfusion Team June 11, 2021 01:16 PM UTC

Hi Simon 
  
Thanks for the update 
  
Based on your query you want to triggers a event while refreshing the form. Please explain that you want to refresh the Form or EJ2 Grid.  
 
If you have refreshed the grid dynamically using the EJ2 Grid refresh method, by default, you can get in the args.requestType as refresh in the EJ2 Grid actionBegin or actionComplete event. You can achieve your requirement by using the below code example. 
  
Please refer the below Code example for your reference, 
  
function actionBegin(args) { 
  if (args.requestType === 'refresh') { 
    …………………………………………………. 
  } 
} 
 
 
While performing  operations like filtering, sorting, paging, editing in the grid, you can cancel the operation using the args.cancel in the actionBegin and you can prevent the grid action by setting args.cancel as true. 
 
Please get back to us for further assistance, 
  
Regards 
Vignesh Sivagnanam 


Loader.
Up arrow icon