Proper typescript type of a treeview node

[Brent Sieberg]

SyncfusionTesting/treeviewtesting/src/App.tsx at main · Brent321/SyncfusionTesting (github.com)

I am having to use //@ts-ignore tags when adding nodes to a treeview because I cannot figure out the proper way to declare the type of the tree view nodes. The addNodes() method accepts nodes with the following type:

nodes: { [key: string]: Object }[]

I am using the TreeViewNode class to define the structure of the tree nodes. What would the proper way be to define the tree view node class so it can be used with the method? Thank you.

[Indhumathy Loganathan]

Hi Brent,

Greetings from Syncfusion support.

As requested, we have added proper type declaration to remove the //@ts-ignore tags. Check out the below code snippet.

  const addTreeNode = () => {

    let treeview = treeviewRef.current;

    if (treeview) {

      let data = getTreeViewData();

      const selectedId = treeview.selectedNodes[0];

      const newNode = JSON.parse(JSON.stringify(new TreeViewNode(name, getNextId(data), selectedId)));

      treeview.addNodes([newNode], selectedId)

      setName("");

    }

  }

 

  function getNextId(data: any) {

    if (data.length === 0)

      return 1;

    return data.sort((a: any, b: any) => a.Id - b.Id)[data.length - 1].Id + 1

  }

 

  function getTreeViewData() {

    return treeviewRef.current?.getTreeData();

  }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/treeviewtesting1034963722

Check out the sample and get back to us if you need any further assistance.

Regards,

Indhumathy L