This is a migrated thread and some comments may be shown as answers.

Refreshing after bound array updated

4 Answers 317 Views
Hierarchical Data Source
This is a migrated thread and some comments may be shown as answers.
Ricky
Top achievements
Rank 2
Ricky asked on 23 Jan 2017, 09:59 AM

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();

4 Answers, 1 is accepted

Sort by
0
Ricky
Top achievements
Rank 2
answered on 23 Jan 2017, 12:56 PM
I might add, this affects the root array. Adding children to nodes and then call datasource.read() works.
0
Alex Hajigeorgieva
Telerik team
answered on 25 Jan 2017, 09:47 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Ricky
Top achievements
Rank 2
answered on 26 Jan 2017, 07:42 AM
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?
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 30 Jan 2017, 09:22 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Hierarchical Data Source
Asked by
Ricky
Top achievements
Rank 2
Answers by
Ricky
Top achievements
Rank 2
Alex Hajigeorgieva
Telerik team
Share this question
or