How can I update data in Kendo UI TreeView? - reactjs

Question

I'm using the TreeView component from Kendo UI library and I would like to know how to update the data in the tree. Is it possible?
This is my code:
class TreeViewTest extends React.Component {
dataSource = [
{
id: 123,
text: "aaaa",
expanded: true,
spriteCssClass: "rootfolder",
items: [
{
id: 2,
text: "aaa1",
expanded: true,
spriteCssClass: "folder",
items: [
{
id: 3,
text: "aaa2",
spriteCssClass: "html"
},
{
id: 4,
text: "aaa3",
spriteCssClass: "html"
},
{
id: 5,
text: "aaa4",
spriteCssClass: "image"
}
]
}
]
}
];
async componentDidUpdate(prevProps) {
if (this.props.endpoint !== prevProps.endpoint) {
init(this.props, this);
}
}
render() {
return (
<div>
<TreeView dataSource={this.dataSource} />
</div>
);
}
}
const init = async (props, _this) => {
const { endpoint, selectContent, setModal } = props;
const actions = props;
const response = await fetch(`${endpoint}/my/api/here`);
const body = await response.json();
/* some work on body here....*/
const data = [
{
id: 345,
text: "bbbb",
expanded: true,
spriteCssClass: "rootfolder",
items: [
{
id: 2,
text: "bbb1",
expanded: true,
spriteCssClass: "folder",
items: [
{
id: 3,
text: "bbb2",
spriteCssClass: "html"
},
{
id: 4,
text: "bbb3",
spriteCssClass: "html"
},
{
id: 5,
text: "bbb4",
spriteCssClass: "image"
}
]
}
]
}
];
_this.dataSource.push(data);
};
How can I update the dataSource after a remote call with the new data?
Before to install the react package I add a working solution with the Kendo UI jquery version and it worked fine with all the updates.
With the jquery version I have to set the options and I have the function setDataSource(data) and it works perfectly, now what I have to do?
Edit
I improved the code with the componentDidUpdate and the network call.

Answer 1

You could take a reference to the wrapped kendo.ui.TreeView element. Then you could call the function you have mentioned - setDataSource(data). Here is an example:
class TreeViewContainer extends React.Component {
wrappedWidget;
constructor(props) {
super(props);
this.dataSource = [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
}
]
}];
}
render() {
return (
<div>
<TreeView widgetRef={(el) => { this.wrappedWidget = el }} dataSource={this.dataSource} />
</div>
);
}
componentDidMount() {
// Simulate a response from a web request.
setTimeout(() => {
this.wrappedWidget.setDataSource(new kendo.data.HierarchicalDataSource({
data: [{
id: 1111, text: "My Documents1111", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 222, text: "Kendo UI Project222", expanded: true, spriteCssClass: "folder", items: [
{ id: 333, text: "about333.html", spriteCssClass: "html" },
{ id: 444, text: "index444.html", spriteCssClass: "html" },
{ id: 555, text: "logo555.png", spriteCssClass: "image" }
]
}
]
}]
}));
}, 1000)
}
}
ReactDOM.render(
<TreeViewContainer />,
document.querySelector('my-app')
);