Consider the following scenario: There is a sortable Kendo-UI grid with a corresponding dataSource. Initially, the dataSource contains some items. When updating the dataSource to an empty array, all items disappear from the grid - so far, so good. However, if a column header is clicked afterwards to sort that column, the removed data reappears again.
We created a small "walkthrough" in this DOJO to demonstrate the issue.
FYI: The issue can be avoided by using a custom implementation of dataSource.transport.read which always returns the latest data.
Hello Michael,
Thank you for getting back to us and pointing this out. You are correct—directly modifying dataSource.transport.data is not documented and is not the recommended or supported way to update a Kendo UI DataSource. This approach may also break in future releases or cause issues with TypeScript integration.
Recommended Way to Update DataSource Data
To resolve the issue, you can directly use the .setDataSource() method of the Grid. I have prepared a working sample for your convenience:
https://dojo.telerik.com/bIRIrEAK/5
If you are using a custom transport (for example, with AJAX), make sure your transport.read function always returns the latest data. The .read() method should then fetch new data from your source, not restore any old data.
Avoid using .refresh() or .read() with a local DataSource unless you have set up a custom read transport that returns the current data. Otherwise, these methods may revert the DataSource to its initial state.
You can find more details in the official documentation:
- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/grid/methods/refresh
- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/grid/methods/setdatasource
- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/data/datasource/configuration/data
https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/data/datasource/configuration/transport.read
- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/data/datasource/configuration/transport.read#transportreaddata
- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/data/datasource/configuration/transport.read#transportreadcache
I hope this will prove helpful.
Regards,
Eyup
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hi!
While your solution works, dataSource.transport is an undocumented field which is also missing in the Typescript type definitions This is a hacky workaround at best, but does not seem like the appropriate way of updating a dataSource's data.
Please reconsider.
Hello Michael,
To ensure the locally bound data source does not restore the original data, you can set the transport.data to an empty array:
// clear the data
dataSource.data([])
dataSource.transport.data = [];Regards,
Peter Milchev
Progress Telerik