Primereact tree

[vickyvxr]

Good morning,
I'm doing some implementation using the Primereact component, these implementation involves:
- Updating an existing node label.
I've done and the Tree data prop has all the changes but the tree doesn't update until I open and close the parent node.

- Creating a new node and selecting it.
I'm able to create the new node and it's included in the current tree but I can't find the way to select programatically the new node. Is there any attribute like expanded¿

Thanks in advance.

[mert.sincan]

Hi vickyvxr,

Which PrimeReact version are you using? Could you please attach a sample code for us to replicate? Or Could you please provide https://plnkr.co/edit/C6qjkdLtbmy92Hogdnjb?p=preview for us?

Best Regards,

[vickyvxr]

Good morning,
I've done some tests using plunker template:
1. when updating a tree node label it updates the tree node, so it was a bug in my code.
2. I still cannot find the way to select a node when it's created modifying the tree data.
And if the parent node is closed, it's not opened when I add the child node.

You can find a working example here: https://plnkr.co/edit/ZVee7vqMbJCWgGv6Z5SY?p=preview

I'm using "primereact": "^1.5.2"

Thank you very much in advance.

[vickyvxr]

Hello,
Can anyone help me with the tree node selection?
Thanks

[mert.sincan]

Firstly, I fixed some issues on Tree for next version related to your issue. I tested your sample with it. The sample works fine for me. Please try your sample after releasing new version.

Also, you need to use 'selection' property of Tree for your second issue. My example code;

Code: Select all

constructor(props) {
        super(props);
        this.state = {
            treeData: [
                {
                    "label": "1 > Documents",
                    "data": { id: 1 },
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children": [{
                        "label": "111 > Work",
                        "data": { id: 111 },
                        "expandedIcon": "fa-folder-open",
                        "collapsedIcon": "fa-folder",
                        "children": [
                            { "label": "11 > Expenses.doc", "icon": "fa-file-word-o", "data": { id: 11 } },
                            { "label": "12 > Resume.doc", "icon": "fa-file-word-o", "data": { id: 12 } }
                        ]
                    },
                    {
                        "label": "112 > Home",
                        "data": { id: 112 },
                        "expandedIcon": "fa-folder-open",
                        "collapsedIcon": "fa-folder",
                        "children": [{ "label": "21> Invoices.txt", "icon": "fa-file-word-o", "data": { id: 21 } }]
                    }]
                },
                {
                    "label": "2> Pictures",
                    "data": { id: 2 },
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children": [
                        { "label": "31 >barcelona.jpg", "icon": "fa-file-image-o", "data": { id: 31 } },
                        { "label": "32 > logo.jpg", "icon": "fa-file-image-o", "data": { id: 32 } },
                        { "label": "33> primeui.png", "icon": "fa-file-image-o", "data": { id: 33 } }]
                }

            ],
            selectedNode: null
        }
    }

    modifyNodeLabel = () => {
        const id = Math.floor(Math.random() * 1000);
        let newTree = this.state.treeData;
        newTree[1].label = "2> Pictures changed " + id;
        this.setState({
            treeData: newTree,
            selectedNode: newTree[1]
        })
    }

    addNewNodeAndSelect = (parentId) => {
        const id = Math.floor(Math.random() * 100);
        const newNodeData = {
            "label": id + "> New Node ",
            "data": {
                id,
                parentId
            },
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "children": [],
            "selected": true,
            "isSelected": true,
            "expanded": true
        }
        const newTree = this.modifyTree(this.state.treeData, newNodeData);
        this.setState({
            treeData: newTree
        })
    }

    modifyTree = (currentTree, nodeAdd) => {
        return currentTree.map((node) => {
            if (node.children) {

                if (node.data.id === nodeAdd.data.parentId) {
                    node.expanded = true;
                    node.children.push(nodeAdd);
                } else {
                    node.children = this.modifyTree(node.children, nodeAdd);
                }
                return node;
            } else {
                if (node.data.id === nodeAdd.data.parentId) {
                    node.expanded = true;
                    node.children = [];
                    node.children.push(nodeAdd);
                }
                return node;
            }
        });
    }

    onSelectNode = (selectedEvent) => {
        this.setState({
            selectedNode: selectedEvent.selection
        })
    }

    render() {
        return (
            <div className="App">
                <div>

                </div>
                <div>
                    <Button label="Add node to NODE 1" onClick={() => this.addNewNodeAndSelect(1)} />
                    <Button label="Add node to NODE 2" onClick={() => this.addNewNodeAndSelect(2)} />
                    <Button label="Modify NODE 2 label" onClick={() => this.modifyNodeLabel()} />
                    <p>Selected Node: {this.state.selectedNode && this.state.selectedNode.label}</p>
                    <Tree value={this.state.treeData} selectionMode="single" selectionChange={this.onSelectNode} selection={this.state.selectedNode} />
                </div>
            </div>
        );
    }

[vickyvxr]

Good morning,
Thank you very much. When is it going to be released the next version with the tree fixes??
Thank you!