We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customising cell navigation

Thread ID:





129536 Mar 23,2017 11:54 PM UTC Mar 27,2017 03:35 PM UTC ASP.NET Web Forms 3
Tags: Grid
Ben Foord
Asked On March 23, 2017 11:54 PM UTC


Is it possible to customise cell navigation functionality in ASP.NET Web Forms Grid control, similar to this:

We would prefer to use only the arrow keys for navigation around the grid and were wondering if there was a supported way to achieve this?



Jayaprakash Kamaraj [Syncfusion]
Replied On March 24, 2017 08:41 AM UTC

Hi Ben, 

Thank you for contacting Syncfusion support. 

Cell selection is enabled by set SelectionMode property of SelectionSettings as cell. By default, Grid cell selection will be navigate to one cell to another cell by using up and down arrow. Please refer to the below help documents, code example and online demo sample. 

Help document for, 

    <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true" AllowSelection="true" Selectiontype="Multiple"> 
             <SelectionSettings SelectionMode="cell"/>  
                 <ej:Column Field="OrderID"/> 
                 <ej:Column Field="EmployeeID"/> 
                 <ej:Column Field="ShipCity"/>                 
                 <ej:Column Field="ShipCountry"/> 
                 <ej:Column Field="Freight" /> 

Online Demo sample for, 


Jayaprakash K. 

Ben Foord
Replied On March 26, 2017 10:33 PM UTC

Hi Jayaprakash,

Thanks for provided links. In my scenario Grid should be in Batch edit mode (by design), so I reckon that SelectionMode=row fits my scenario better. I changed settings of Left and Right arrows using Grid’s Create event (found here):

create: function (args) {

    args.model.keyConfigs.leftArrow = ""; // Remove the default Functionalities

    args.model.keyConfigs.rightArrow = ""; // Remove the default Functionalities

    args.model.keyConfigs.moveCellLeft = "shift+9,37"// Using left arrow to move cell left

    args.model.keyConfigs.moveCellRight = "9,39"// Using right arrow to move cell right


The only issue that I have in this case is each time I try to navigate through cells by Left and Right arrows, an active cell change it state to Edit mode and I can’t continue navigation (Tab/Shift+Tab works) until I press Esc key. Can I set behavior of active Cell to not enter edit mode until I press F2 key?

See attached screenshots.

Below is code for my grid initialization:


            dataSource: data,

            editSettings: {

                allowEditing: true, allowAdding: false, allowDeleting: false, editMode: ej.Grid.EditMode.Batch,

                showConfirmDialog: true


            allowSelection: true,

            selectionType : "single",

            selectionSettings: {

                selectionMode: ["row"]


            toolbarSettings: { showToolbar: true, toolbarItems: ["edit""update""cancel"] },

            columns: [

                { field: "PredatorEntryId", headerText: "Id", isPrimaryKey: true, visible: false },

                { field: "MonitoringPointId", headerText: "Tunnel No", allowEditing: true },


                    field: "RatResult", headerText: "Rat", editType: ej.Grid.EditingType.Boolean, displayAsCheckbox: true, defaultValue: false


                { field: "MouseResult", headerText: "Mouse" },


                    field: "HedgehogResult", headerText: "Hedgehog", editType: ej.Grid.EditingType.Boolean, displayAsCheckbox: true, defaultValue: false



                    field: "PossumResult", headerText: "Possum", editType: ej.Grid.EditingType.Boolean, displayAsCheckbox: true, defaultValue: false



                    field: "MustelidResult", headerText: "Mustelid", editType: ej.Grid.EditingType.Boolean, displayAsCheckbox: true, defaultValue: false



                    field: "OtherResult", headerText: "Other", editType: ej.Grid.EditingType.Boolean, displayAsCheckbox: true, defaultValue: false



            create: function (args) {

                args.model.keyConfigs.leftArrow = "";

                args.model.keyConfigs.rightArrow = "";

                args.model.keyConfigs.moveCellLeft = "shift+9,37";

                args.model.keyConfigs.moveCellRight = "9,39";




Attachment: grid_30f3a53b.7z

Jayaprakash Kamaraj [Syncfusion]
Replied On March 27, 2017 03:35 PM UTC

Hi Ben, 

We have created a sample with your code example but we were unable to reproduce the issue at our end. Please share the following information to serve you better    
1.       Issue replication procedure.  
2.       Share the video to show the issue. 
3.       Essential studio and browser version details. 
4.       Please open the console window in browser and check whether any script error throws. 
5.       Is there any script error or exception thrown in your project? If so, attach the screenshot of your stack trace.    
6.       An issue reproducing sample if possible or hosted link or replicate the issue in the attached sample.   


Jayaprakash K. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon