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.
Unfortunately, activation email could not send to your email. Please try again.

Customising cell navigation

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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



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

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. 


Ben Foord
Replied On March 26, 2017 06:33 PM

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

Jayaprakash Kamaraj [Syncfusion]
Replied On March 27, 2017 11:35 AM

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. 
 


CONFIRMATION

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.

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.

;