How can I update data in Kendo UI TreeView?

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.

I am not sure that I understand what you mean but I think if your this.dataSource is updated, the dataSource in TreeView will be updated as well. — dnp1204, Mar 15 '18 at 12:39

score 1 · Accepted Answer · answered Mar 19 '18 at 07:40

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')
);

I was searching for a solution using the setDataSource but I was passing the data without the "HierarchicalDataSource" so the code wasn't correct. Many many thanks! — michoprogrammer, Mar 19 '18 at 08:55

How can I update data in Kendo UI TreeView?

1 Answers1