This is a migrated thread and some comments may be shown as answers.

Dirty indicator on cell after editing it

7 Answers 289 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 18 Jun 2014, 02:37 PM
Hello,

I have a grid defined like so:

var dataSource = new kendo.data.DataSource({
       data: tableRows
});
var gridOptions = {
      columns: tableColumns,
      dataSource: dataSource,
      editable: true
}

$("#grid").kendoGrid(gridOptions);

Then I have my own button in my html which is used to add a new row to the grid:

dataSource.add({ field1: "value", field2: "value" });

When I click on a cell to edit its value, the little red triangle indicating the cell is dirty appears. All data is local so I want all editing to be immediately propagated to the data of the data source, and therefore I do not want this red triangle to appear.

What's the best way to achieve this?

Thanks,
Marc.

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 20 Jun 2014, 06:20 PM
Hi Marc,

First of all let me apologize for the late reply.

Generally speaking in order to automatically synchronize the changes you should turn on the autoSync feature of the dataSource. In your scenario however, the Grid data is loaded from local JavaScript array so this approach will not work. In this case the local JavaScript array (tableRows) is not bound to the Grid's dataSource - it is used once during the initialization and any subsequent changes will not propagate in it.

My suggestion is to hook up to the change event of the DataSource which is fired every time when the data changes and manually take the updated data. For example:

change: function() {
   tableRows = this.data().toJSON();
}

I hope the information will help.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Marc
Top achievements
Rank 1
answered on 20 Jun 2014, 06:49 PM
Thanks for your reply.

OK I understand. Is there any other recommended way to have two-way binding between a local Javascript array and the grid (e.g. by means of an ObservableArray?). Or do we only get one-way binding for local arrays, and optional synchronization for remote data?

Thanks again,
Marc
0
Alexander Valchev
Telerik team
answered on 24 Jun 2014, 12:43 PM
Hi Marc,

Generally speaking you can bind the Grid to Observable array through MVVM source binding, however this may cause conflicts with other Grid features such as editing in certain cases.
Here is a basic example: http://trykendoui.telerik.com/@Alexander/ikaG

May I know what are your reasons binding the grid directly to an array instead of dataSource?

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Marc
Top achievements
Rank 1
answered on 24 Jun 2014, 03:51 PM
Hello,

I am using a data source (see the code that is part of the first post in this thread). But you wrote, in your answer, that in my case the local tableRows JavaScript array was not bound to the grid's dataSource --so I was wondering how I could indeed bind it.

I do want to use the data source, bound to an array of local data, with editing in the grid. Nothing special (I believe).

So what would the simplest way to do this, without having the dirty indicator?

Thanks again,
Marc.
0
Alexander Valchev
Telerik team
answered on 26 Jun 2014, 08:53 AM
Hello Marc,

I prepared an example which uses custom transport functions that will allow you to read and write data to the local JavaScript array. In this way the data changes which the user does in the Grid will be immediately saved in the local JavaScript array. The red indicator is not shown as well.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Marc
Top achievements
Rank 1
answered on 27 Jun 2014, 02:35 PM
Thanks Alexander. It works fine.

But I don't understand why I need a custom transport specification in the data source. If I just set the data property of the data source to my local array (without any transport specified), then hook up a handler for the change event on the data source, I see in that handler that my local array is updated properly when I perform editing in the grid. So why did you recommend doing that?

Changing display to none on the dirty cell indicator does the trick of not showing it, though.

Cheers,
Marc.
0
Alexander Valchev
Telerik team
answered on 27 Jun 2014, 04:02 PM
Hello Marc,

If you do not use custom transport functions you might experience issues connected with disappearing of rows when the user presses "cancel" button of the edit dialog. This was the reason I suggested this approach.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Marc
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Marc
Top achievements
Rank 1
Share this question
or