Grid navigation like excel

[Nurkmez]

Hi,

I want to navigate row like excel with UP, DOWN, LEFT, RIGHT Keys  for edit cell, Is there any feature like that in Syncfusion grid? 

Thanks

[Gowthami V]

Hi Nurkmez,

Thanks for using Syncfusion products.

We have understood from the provided information we suspect that you have used “Batch” editing feature of the grid.

But in our current implementation of the grid we have support for left and right arrow key for navigating the cursor inside the tools like textbox, dropdownlist and etc.

Please refer the below table for more clarification.

Key	Navigating Direction
1.      Up Arrrow	Moving to upper cell from the current edit cell.
2.      Down Arrow	Moving to down cell from the current edit cell.
3.      Tab key	Moving to right cell from the current edit cell.
4.      Shift + Tab key	Moving to left cell from the current edit cell.

For your convenience we have created a simple sample and the same can be downloaded from the following link.

Sample Link: lightswitchDemo_new.zip

In the above sample we have enabled the Batch editing feature for editing the cell of the grid.

Please refer the below code snippet.

OrdersGridTemplate.lsml.js

itemTemplate.ejGrid(

            {

  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch" },

. . . .

});

If we misunderstood your requirement please provide more information about the feature like screenshot/video and the provided information will help us to provide you the response as early as possible.

Please get back to us if you have any queries. We will happy to assist you.

Regards,

Gowthami V.

[Nurkmez]

Thank you for your quick reply. 

It works I want to set some column to read-only to prevent editing.  What should I do?

Best Regards

[Gowthami V]

Hi Nurkmez,

Thanks for your update.

Based on your requirement we have created a sample and the same can be downloaded from the following link.

Sample Link: lightswitchDemo.zip

In the above sample we have prevent the editing for the specified column by set “allowEditing” property of the column as “false” as follows.

contentItem.value.oncollectionchange = function () {

if (first.children[i].valueModel.name != "CustomerID")

                fieldname[i] = { field: first.children[i].valueModel.name };

            else

                fieldname[i] = { field: first.children[i].valueModel.name,allowEditing:false };

        }}

Please try the sample and let us know if you have any queries.

Regards,

Gowthami V.

[Nurkmez]

Thanks for replay It works as I just looking for.

Another question;

When I editing date typed cell it formats cell like m/d/yyyy , BUT After editing or pressing tab or lost focus event fired,  the format is displayed as UTC long date format as shown in attached file.

How can I format it to "dd/mm/YYYY"?

Attachment: Date_Format_fc1078bd.rar

[Gowthami V]

Hi Nurkmez,

Sorry about the inconvenience caused.

We have analyzed your query and we suspect that you might have missed to set the format and the editType of the date columns as "{0: dd/MM/yyyy}" and “DatePicker” respectively. We can change the format of the date column using “format” property of the column.

Please refer the below online document link for more details.

Online Document Link: http://help.syncfusion.com/UG/JS_CR/ejGrid.html

We have also created a sample for your reference and it can be downloaded from the following link.

Sample Link: lightswitchDemo_(2).zip

In the above sample we have directly bind the specified columns to the grid instead of binding columns dynamically to the grid. We can easily set the property for the columns while binding columns to the grid as follows.

itemTemplate.ejGrid(

{

dataSource: dataManger,

columns: [

{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 },

{ field: "CustomerID", headerText: "Customer ID", width: 90,allowEditing:false },

. . . .

{ field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:dd/MM/yyyy}", editType: ej.Grid.EditingType.DatePicker, textAlign: ej.TextAlign.Right },

]

});

In the above snippet we have set format property of the column as "{0: dd/MM/yyyy}" and editType property as “DatePicker”.

In the above sample we are facing the issue “Batch Edit-Date Format is changed to IST time while focus out the edited column” and we considered this as bug and a support incident “#134346” has been created under your account to track the status of this bug. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

 

Please let us know if you have any queries.

Regards,
Gowthami V