Refreshing after bound array updated

5 posts, 1 answers
  1. Ricky
    Ricky avatar
    16 posts
    Member since:
    Aug 2016

    Posted 23 Jan Link to this post

    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();
  2. Ricky
    Ricky avatar
    16 posts
    Member since:
    Aug 2016

    Posted 23 Jan in reply to Ricky Link to this post

    I might add, this affects the root array. Adding children to nodes and then call datasource.read() works.
  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    282 posts

    Posted 25 Jan Link to this post

    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 visualization (charts) and form elements.
  4. Ricky
    Ricky avatar
    16 posts
    Member since:
    Aug 2016

    Posted 26 Jan in reply to Alex Hajigeorgieva Link to this post

    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?
  5. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    282 posts

    Posted 30 Jan Link to this post

    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 datasource."

    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.
Back to Top