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

Grid navigation like excel

Thread ID:

Created:

Updated:

Platform:

Replies:

117955 Jan 13,2015 01:16 PM UTC Jan 22,2015 11:49 AM UTC LightSwitch HTML 5
loading
Tags: Grid
Nurkmez
Asked On January 13, 2015 01:16 PM UTC

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 [Syncfusion]
Replied On January 14, 2015 01:08 PM UTC

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
Replied On January 20, 2015 10:45 AM UTC

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 [Syncfusion]
Replied On January 21, 2015 12:56 PM UTC

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
Replied On January 21, 2015 03:15 PM UTC

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 [Syncfusion]
Replied On January 22, 2015 11:49 AM UTC


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




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.

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

;