USING ARROW KEYS ON THE KEYBOARD TO NAVIGATE THE GRID

[Simon Bunya]

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

[Vignesh Sivagnanam]

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, 

https://ej2.syncfusion.com/javascript/documentation/grid/accessibility/#keyboard-navigation 

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 

[Simon Bunya]

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

[Vignesh Sivagnanam]

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. 

Video Demo : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Navigation152576508.zip 

Regards 

Vignesh Sivagnanam 

[Simon Bunya]

Hello Vignesh,

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

Thanks

[Vignesh Sivagnanam]

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(); 

    } 

  }); 

} 

Sample: https://stackblitz.com/edit/1qu69c?file=index.js 

Regards 

Vignesh Sivagnanam 

[Simon Bunya]

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

[Vignesh Sivagnanam]

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.  

Sample : https://stackblitz.com/edit/1qu69c-gkiey2?file=index.js 

Regards 

Vignesh Sivagnanam 

[Simon Bunya]

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

[Simon Bunya]

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

[Vignesh Sivagnanam]

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; } 

    } 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/322435-1857864281459345297.zip 

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.  

Demo : https://ej2.syncfusion.com/demos/#/material/grid/normal-editing.html 

https://ej2.syncfusion.com/demos/#/material/grid/batch-editing.html 

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 

[Simon Bunya]

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

[Vignesh Sivagnanam]

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>    

    

Sample: https://stackblitz.com/edit/twzemf?file=index.html  

   

Please find the sample and revert for more queries.  

  

Regards,  

Vignesh Sivagnanam 

[Simon Bunya]

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

[Simon Bunya]

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

[Vignesh Sivagnanam]

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 

[Simon Bunya]

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

[Vignesh Sivagnanam]

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') { 

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

  } 

} 

 

Documentation : https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete 

https://ej2.syncfusion.com/documentation/api/grid/#actionbegin 

 

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