Refreshing after bound array updated

[Ricky]

Hello,

I wanted to update my TreeView control which uses a HierarchicalDataSource after I updated the array it uses.

You can see the fiddle here: https://jsfiddle.net/ZoolWay/gev9zj4j/

How can I update/refresh my TreeView after adding items? Changing a text works this way...

// how the datasource is configured:
var myData = ... // already contains two items, one with subitems
var myDataSource = new kendo.data.HierarchicalDataSource({
      data: myData
    });

// add item to the array:
myData.push({ 'id': 3, 'text': 'Item 3'});

// read the updated array
myDataSource.read();

[Ricky]

I might add, this affects the root array. Adding children to nodes and then call datasource.read() works.

[Alex Hajigeorgieva]

Hello Ricky,

The Kendo UI TreeView will automatically update if you add the new item to the data source with the add() or insert() method instead of adding them to the original array. 

add: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-add
insert: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-insert

I have modified the provided example to illustrate:

http://dojo.telerik.com/EhelU

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Ricky]

This means I have to duplicate every action performed on my source array on the datasource. Also the added items are lost when doing a read() afterwards (as long as not both are kept in sync) and how would adding subitems work this way?

[Alex Hajigeorgieva]

Hello Ricky,

The Kendo UI TreeView implementation is read-only. We have had clients in the past who have made their own CRUD implementations using the inherited API from the Kendo UI Data Source.

1) "This means I have to duplicate every action performed on my source array on the ."

There should be no need to duplicate each operation. You can use the Kendo UI Hierarchical Data Source only. When you need to get the bound array as it is at present, you may call the data source data()  method:

http://dojo.telerik.com/IqiRa

2) "the added items are lost when doing a read() afterwards".

This behaviour often suggests that the create operation has not been synced with the remote endpoint. After inserting a new dataItem in the data source, call the sync() method to notify the back-end.

$(".custom-add").click(function(){
  dataSource.insert(0,{"ProductID":null,"ProductName":"Rooibos","UnitPrice":1.3,"UnitsInStock":3,"Discontinued":false});
  dataSource.sync();
});

http://dojo.telerik.com/UgABA
   
3) Adding subitems

To add subitems, traverse the tree and find the target node. Then you may utilise the append(), insertBefore() or insertAfter() methods of the Kendo UI TreeView (dependent on the concrete scenario).

============

Other resources:

We have a sample for an update operation of a Kendo UI TreeView, using an external form that may help you get started:

http://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/AngularJS/edit-nodes-via-form

Regards,
Alex Hajigeorgieva
Telerik by Progress