Hello,
I'm building my TreeView using the redux store.
//in constructorthis.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
0
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
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
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
Rank 1
answered on 30 Jul 2018, 01:51 PM
Here
0
Accepted
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:
I have attached the modified project for reference.
Regards,
Stefan
Progress Telerik
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
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
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:
Then before applying the new data:
Regards,
Stefan
Progress Telerik
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
Rank 1
answered on 02 Aug 2018, 08:10 AM
Perfect !
Just add some recursivity for all possible children.
Thanks.
Regard.
Vincent.