Is there a way for force re render of the Treeview

1 Answer 62 Views
TreeView
Nick
Top achievements
Rank 1
Nick asked on 27 Oct 2022, 10:34 AM

Hi All

I am adding some sub nodes below treeitems a various levels and I find that they appear at the end of the tree rather than under the parent that they are added (treeitem.items).

Is there a way to for full tree re render?

I am currently recreating the tree data to add the new child item and updating the state that is bound to the data for the treeview. Is there something else that I would need to do?

Code used to update the tree state:


const [tree, setTree] = React.useState<TreeViewDataItem[]>([]);

let newTree: TreeViewDataItem[] = [];
        let newTreeParent: TreeViewDataItem = InsertTreeItem(tree[0], newTreeItem, parentTreeItem.index);
        newTree.push(newTreeParent);
        setTree(newTree);

export const InsertTreeItem = (treeItem: TreeViewDataItem, newItem: TreeViewDataItem, parentIndex: number): TreeViewDataItem => {
    let newItems: TreeViewDataItem[] = [];
    treeItem.items.forEach((node) => {
        if (node.index == parentIndex) {
            node.items.push(newItem);
        }

        let cloneNode: TreeViewDataItem = _.cloneDeep(node);

        newItems.push(cloneNode);
        InsertTreeItem(node, newItem, parentIndex);
    });
    treeItem.items = newItems;
    return treeItem;
}


<TreeView data={tree}
                            expandIcons={true}
                            item={fetchTreeItemView}
                            onExpandChange={onExpandChange}
                            onItemClick={onTreeItemClick} />

 

Thanks for your help.

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 29 Oct 2022, 06:32 PM

Hi Nick,

I would assume that the logic for adding the new item is what causes the issue, because updating the data in the state that is bound to the TreeView will update the structure accordingly. I have created a simple example using one of the TreeList helper methods for adding sub item that can be used for the TreeView as well:

As for the "index" that you are using, I would assume that this is a value from your data items? If that is the case, please ensure that all levels have correct and unique index value.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeView
Asked by
Nick
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or