TreeView doesn't update

8 posts, 1 answers
  1. Vincent
    Vincent avatar
    15 posts
    Member since:
    Mar 2014

    Posted 26 Jul 2018 Link to this post

    Hello,

    I'm building my TreeView using the redux store.

    //in constructor
    this.state = {
        data: createDataSource(
            //some store props
        );
    }
    // in render
    <TreeView
        dataSource={this.state.data}
    />

     

    When I add content in the store that have to be used by the TreeView componenent. It doesn't update.

    At first, I throught it was because I init data in the constructor.

    Do I did this : 

    <TreeView
       dataSource={createDataSource(
        // store props
      )}
    />

     

    Still no update, when I update my store.

    Why the compomonent don't update ? 

    Thanks
    Regard,

     

     

  2. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 27 Jul 2018 Link to this post

    Hello, Vincent,

    In cases when the wrapper is used with Redux, we recommend initializing the DataSource inside the render method of the component.

    As the redux will force the component to re-render after an action, this has to update the component with the new data.

    If this does not affect the behavior, the TreeView has a setDataSource method which can be used in the componentDidUpdate method to set the new dataSource with the new data from the store:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/methods/setdatasource

    Sending us an example can prove helpful as it will allow us to test different approach and present only the working one.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Vincent
    Vincent avatar
    15 posts
    Member since:
    Mar 2014

    Posted 30 Jul 2018 Link to this post

    Hi Stephan,

    I created a small exemple, for my issue.

  4. Vincent
    Vincent avatar
    15 posts
    Member since:
    Mar 2014

    Posted 30 Jul 2018 in reply to Vincent Link to this post

    Here
  5. Answer
    Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 31 Jul 2018 Link to this post

    Hello, Vincent,

    Thank you for the example.

    The issue occurs because the newly received data is not set to the already created component.

    I use the data method of the dataSource to set the new props.data before rendering and the items are added as expected:

    public render() {
        let treeview = $('[data-role="treeview"]').data('kendoTreeView');
        if(treeview){
            treeview.dataSource.data(this.props.data)
        }

    I have attached the modified project for reference.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Vincent
    Vincent avatar
    15 posts
    Member since:
    Mar 2014

    Posted 31 Jul 2018 in reply to Stefan Link to this post

    Hello Stefan,

    Thanks for the answer. 

    That work perfectly.

    I have a little issue doing this. Each time the component render, the Treeview close and all the expanded properties turns to default.

    Is there a way to prevent this behavior ?

    Regards
    Vincent.

  7. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 01 Aug 2018 Link to this post

    Hello, Vincent,

    I'm glad to hear that the desired result is achieved.

    As for the expanded state, this is expected as the new data probably does not contain information for which node has to be expanded.

    This could be resolved by keeping the ids of the expanded item in the state and just before passing the new data, to set the expanded property to true to the items that have the same ID.

    Just before making a change that will re-render the TreeView, use this logic to get the ids of the expanded items:

    function saveExpanded() {
      var treeview = $("#treeview").data("kendoTreeView");
      var expandedItemsIds = [];
      treeview.element.find(".k-item").each(function () {
        var item = treeview.dataItem(this);
        if (item.expanded) {
            expandedItemsIds .push(item.id
        }
      });
      this.setState({expanded: expandedItemsIds })

    Then before applying the new data:

                  newData.map(item => {
                    if (that.state.expanded.indexOf(item.id) !== -1) {
                      item.expanded = true
                    }
                  })
    treeview.dataSource.data(newData)

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Vincent
    Vincent avatar
    15 posts
    Member since:
    Mar 2014

    Posted 02 Aug 2018 in reply to Stefan Link to this post

    Perfect !
    Just add some recursivity for all possible children.

    Thanks.

    Regard.
    Vincent.

Back to Top