Dirty indicator on cell after editing it

[Marc]

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.

[Alexander Valchev]

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

 

 

[Marc]

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

[Alexander Valchev]

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

 

 

[Marc]

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.

[Alexander Valchev]

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.

• http://trykendoui.telerik.com/@Alexander/ikaG/2

Regards,
Alexander Valchev
Telerik

 

 

[Marc]

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.

[Alexander Valchev]

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