Show toggleElement on items for load on demand

[fxgallego]

Hi,
Using Tree in React I see that with dataSource I can pass “selected” and “expanded” attributes for each item but I don’t see how can I pass “hasItems” or something like in order to render a group instead of an item so after I can load more items on demand. It no clear to me in the load on demand example if there is such a property.
Thanks!

[yavordashew]

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/

[Author]

Posts