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.
Primereact tree
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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,
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,
Github Profile: https://github.com/mertsincan
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.
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.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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;
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>
);
}
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests