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

TreeView doesn't update

7 Answers 99 Views
Wrappers for React
This is a migrated thread and some comments may be shown as answers.
Vincent
Top achievements
Rank 1
Vincent asked on 26 Jul 2018, 03:27 PM

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,

 

 

7 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 27 Jul 2018, 07:06 AM
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
0
Vincent
Top achievements
Rank 1
answered on 30 Jul 2018, 01:50 PM

Hi Stephan,

I created a small exemple, for my issue.

0
Vincent
Top achievements
Rank 1
answered on 30 Jul 2018, 01:51 PM
0
Accepted
Stefan
Telerik team
answered on 31 Jul 2018, 07:49 AM
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
0
Vincent
Top achievements
Rank 1
answered on 31 Jul 2018, 08:21 AM

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.

0
Stefan
Telerik team
answered on 01 Aug 2018, 10:12 AM
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
0
Vincent
Top achievements
Rank 1
answered on 02 Aug 2018, 08:10 AM

Perfect !
Just add some recursivity for all possible children.

Thanks.

Regard.
Vincent.

Tags
Wrappers for React
Asked by
Vincent
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Vincent
Top achievements
Rank 1
Share this question
or