JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Menu & Tree › Show toggleElement on items for load on demand › Reply To: Show toggleElement on items for load on demand
July 1, 2021 at 1:52 pm
#101966
yavordashew
Member
Hi Sebastian Calvo,
I have prepared a quick code example which showcases the functionality you stated.
//In your App.jsx file:
handleAddGroupToClick(event) {
const newItemsGroup = document.createElement('smart-tree-items-group');
newItemsGroup.innerHTML = 'Capital letters<smart-tree-item>Α</smart-tree-item><smart-tree-item>Γ</smart-tree-item>';
newItemsGroup.expanded = true;
this.tree.current.addAfter(newItemsGroup, "0");
event.target.disabled = true;
}
render() {
return (
<div>
<Tree id="tree1" ref={this.tree} scrollMode="scrollbar" className="animation" selectionMode="oneOrMany"
showLines dataSource={this.treeDataSource} displayMember="label" valueMember="value"></Tree>
<button onClick={this.handleAddGroupToClick.bind(this)}> Add group</button>
</div>
);
}
}
Also we have demo regarding this:
https://www.htmlelements.com/demos/tree/add-remove-items/
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/