DataSource not in sync after remove or insertAfter

[Arthur]

I have this simple tabStrip

var tabStrip = $("#tabstrip").kendoTabStrip({
  dataSource: [
    { text: 'Tab1', url: '' },
    { text: 'Tab2', url: '' },
    { text: 'Tab3', url: '' },
    { text: 'Tab4', url: '' }
  ],
  dataTextField: 'text',
  dataUrlField: 'url'
}).data("kendoTabStrip");

 

Let's do two transformations on it

// Move Tab4 before Tab1
tabStrip.insertBefore(tabStrip.tabGroup.children().last(), tabStrip.tabGroup.children().first());
// Remove Tab3
tabStrip.remove("li:last");

 

If I look at the dataSource of my tabStrip, I don't see the above transformations.

// Expected: [{"text":"Tab4","url":""},{"text":"Tab1","url":""},{"text":"Tab2","url":""}]
// Result: [{"text":"Tab1","url":""},{"text":"Tab2","url":""},{"text":"Tab3","url":""},{"text":"Tab4","url":""}]
kendo.stringify(tabStrip.dataSource.data());

 

How can I keep the dataSource in sync with what is actually rendered?

Here is a dojo snippet reproducing my issue.

Regards

[Nencho]

Hello, Arthur,

When the DataSource object is used to supply the component with data, we recommend manipulating it for the rest of the dynamic operations - e.g. deletion, insertion, and so on. The methods which operate directly with the dome are rather suggested for usage, when the component is initiated on top of some elements, like in this demo: https://demos.telerik.com/kendo-ui/menu/index

That said, we do recommend using the insert, or remove methods from the Client API of the DataSource object:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource

Below you can find the modified dojo example:

https://dojo.telerik.com/@nenchef/oSoSECIT/4 

Hope this would help.

Regards,
Nencho
Progress Telerik