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. Image for the cookie policy date

Customising cell navigation

Hello,

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?

Thanks,

Ben



3 Replies

JK Jayaprakash Kamaraj Syncfusion Team 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"/>  
              <Columns>                 
                 <ej:Column Field="OrderID"/> 
                 <ej:Column Field="EmployeeID"/> 
                 <ej:Column Field="ShipCity"/>                 
                 <ej:Column Field="ShipCountry"/> 
                 <ej:Column Field="Freight" /> 
              </Columns> 
        </ej:Grid> 

Online Demo sample for, 



Regards, 

Jayaprakash K. 



BF Ben Foord 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:

$("#dgMonPoints").ejGrid({

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

            }

        });


Thanks,


Attachment: grid_30f3a53b.7z


JK Jayaprakash Kamaraj Syncfusion Team 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.   

Regards, 

Jayaprakash K. 
 


Loader.
Up arrow icon