Bug when canceling an edit using local data

[Jeff]

Overall, the kendo grid is fantastic for working with remote data but has issues when attempting to do anything more than display items from a local array. 

I have been able to work around most of the issues but there seems to be a bug in the grid code which appears when you add an item to the grid then attempt to add another item. If you cancel the addition of the second item, all items added to the grid disappear.

See this jsFiddle and follow these steps to see an example of the problem :

1. Click the 'Add Item' button in toolbar above the grid.
2. Enter values in each column (i.e. 'name005', '005', 'G5'.
3. Click the 'Update' button in the far right column.
4. Click the 'Add Item' button again.
5. Click the 'Cancel' button in the far right column.
6. Note that the first new row (name005) is gone! It will delete all new items, not just the last one.

I've tried numerous combinations of saveRow(), saveChanges(), sync(), etc but nothing seems to work. The items are definitely added to dataSource but it is somehow overwritten when the Cancel button is clicked. It's almost like the original array is read back in. 

While typing this, I just found a way around this issue but it's definitely not very "clean". A quick test in my production code seems to show that creating a new DataSource using the data from the existing data source seems to work in initial tests. Something like this:

1.function _onGrdItemsSaveChanges(oEvt) {
2.    var tDS = new kendo.data.DataSource(oEvt.sender.data);
3.    $('#grdItems').data('kendoGrid').setDataSource(tDS);
4.}

Could someone please look into this issue?

Thanks

[Jeff]

Here is a jsFiddle with the kludgy but usable workaround.

[Kiril Nikolov]

Hi Jeff,

The problem comes from the fact that when local data is used, you do not updated the initial array when a value inside the grid is changed. In order to updated the grid correctly, you need to implement local transport functions (working with the local data), so the grid will work as expected. 

Please check this jsBin showing a possible implementation:

http://jsbin.com/OHUBAcA/1/edit

Regards,
Kiril Nikolov
Telerik

[Enrique]

That made the trick for me! Great. thanks.

[Kiril Nikolov]

Hello Enrique,

I am happy to hear that the example helped.

In case you have any questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik

 

 

[ASHISH]

Hi,

I have just go through your demo "http://jsbin.com/OHUBAcA/1/edit" but does not work if i add dropdown list in column.

Thanks for quick response.

Ashish

[Preslav]

Hi Ashish,

Could you please elaborate on the code that is not working?

In the meantime, below you could find articles and demos on drop-downs in the Grid:

• https://demos.telerik.com/kendo-ui/grid/editing-custom
• https://demos.telerik.com/kendo-ui/grid/foreignkeycolumn
• https://docs.telerik.com/kendo-ui/knowledge-base/grid-mvvm-dropdown-template
• https://docs.telerik.com/kendo-ui/knowledge-base/grid-dropdown-list-first-click
• https://docs.telerik.com/kendo-ui/knowledge-base/grid-dropdownlist-column-template
• https://docs.telerik.com/kendo-ui/knowledge-base/grid-dropdown-editor-readonly

I look forward to hearing from you.


Regards,
Preslav
Progress Telerik

[Dusan]

The problem still persist, even if CRUD operations of local data source is implemented.

DOJO example

Steps to reproduce:

- press plus to add new row

- insert some values and confirm entry

- edit newly inserted row

- cancel changes - editor stays open, an exception is present in console..

I even tried implementing DS transport as suggested  in https://docs.telerik.com/kendo-ui/knowledge-base/local-data-editing, but with no success.

BR

 

[Georgi Denchev]

Hello, Dusan,

Looking at the provided Dojo, it seems like you're attempting to mix MVVM initialization with regular widget initialization. This could lead to potential issues.

I would recommend that you choose one of the approaches and use it.

Let me know in case the issue continues to persist after that.

Best Regards,

Georgi