JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Navigation Menu & Tree Show toggleElement on items for load on demand

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Yavor Dashev 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101963
    Avatar
    Sebastian Calvo
    Participant

    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!

    #101966
    Avatar
    Yavor Dashev
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.