focus on the next column of current row of the grid instead of going to the next row of the grid when the Enter key is pressed

[Arman]

Hi,

In the grid, the default is the Enter key to go to the next row, how can we focus on the next column of the current row when pressing the Enter key instead of going to the next row?

[Vignesh Sivagnanam]

Hi Arman 

Greetings from Syncfusion support 

To achieve your requirement we suggest you to use load event of EJ2 Grid. In this we have bind the keydown event and in keydown event we have override the default behavior of enter key using the KeyCode. 

Please refer the below Sample and Code Example for your reference, 

Sample : https://stackblitz.com/edit/react-9rtqps-v6amd7?file=index.js 

Code Example : 

onLoad(args) { 

    var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

    grid.element.addEventListener("keydown", function(e) { 

      if (e.keyCode === 13) { 

        grid.keyConfigs.enter = ""; 

        var currentEle = parentsUntil(e.target, "e-rowcell"); 

        var currentIdx = currentEle.cellIndex; 

        var gForm = parentsUntil(currentEle, "e-row"); //getting form] 

        var gridf = gForm; 

        var gFor = parentsUntil(currentEle, "e-grid"); 

        if (currentIdx === grid.columns.length - 1) { 

          var gForm = gFor.querySelectorAll(".e-row")[ 

            parseInt(currentEle.parentElement.ariaRowIndex) + 1 

          ]; 

          var prevInput = gridf.querySelectorAll(".e-rowcell")[currentIdx]; 

          currentIdx = -1; 

        } else { 

          prevInput = gForm.querySelectorAll(".e-rowcell")[currentIdx]; 

        } 

        var length = grid.columns.length - 1; 

        var nextInput = gForm.querySelectorAll(".e-rowcell")[currentIdx + 1]; 

        nextInput.focus(); //focusing next input element 

        nextInput.classList.add("e-focused"); //adding focus css to that focused element 

        prevInput.classList.remove("e-focused"); 

      } 

    }); 

  } 

Document: https://ej2.syncfusion.com/react/documentation/api/grid/#load 

Regards 

Vignesh Sivagnanam 

[Arman]

Thanks for your help. But I am using some components inside the grid columns, such as TextBox, DropDown, etc., and when we focus on the grid column, I need to focus on these components as well. Currently the Tab, RightArrow and LeftArrow buttons do this well. How can the function of the Enter button be set like these buttons? For example, how do you set the function of the Enter key to the function of the Tab key?

[Vignesh Sivagnanam]

Hi Arman 

Thanks for the update 

Based on your query, you want to focus the custom element while navigating through the cell using the enter button. We have prepared a sample, by rendering the EJ2 Textbox and DropdownList component using the Column Template feature. The EJ2 column template feature is used to render the Custom component to the Column.  

Please refer the below sample for your reference 

Sample : https://stackblitz.com/edit/react-9rtqps-dx5wvw?file=index.js 

Documentation : https://ej2.syncfusion.com/react/documentation/grid/columns/#column-template 

Regards 

Vignesh Sivagnanam