Multiple Selection in JavaScript TreeView

1 Mar 20225 minutes to read

TreeView supports to select the multiple nodes by specifying allowMultiSelection as true. It allows you to select more than one nodes in TreeView.

HTML

<!--create the TreeView wrapper-->
	
	<div id="treeMultiSelect"></div>

JS

var localData = [

		{ id: 1, text: "Item 1" },
	
		{ id: 2, text: "Item 2" },
	
		{ id: 3, text: "Item 3" },
	
		{ id: 4, text: "Item 4" },
	
		{ id: 5, parent: 1, text: "Item 1.1" },
	
		{ id: 6, parent: 1, text: "Item 1.2" },
	
		{ id: 7, parent: 1, text: "Item 1.3" },
	
		{ id: 8, parent: 3, text: "Item 3.1" },
	
		{ id: 9, parent: 3, text: "Item 3.2" },
	
		{ id: 10, parent: 5, text: "Item 1.1.1" }
	
	];
	
	$(function () {
	
		// initialize and bind the TreeView with local data
	
		$("#treeMultiSelect").ejTreeView({
	
			allowMultiSelection: true, //enable multiple selection in TreeView
	
			fields: { dataSource: localData, id: "id", parentId: "parent", text: "text" }
	
		});
	
	});

For more details about multiple selection in TreeView, refer the sample here.

Select Nodes

To select more than one nodes of TreeView, you can use selectedNodes property. It will select the TreeView nodes from the given indexes.

HTML

<!--create the TreeView wrapper-->

    <div id="treeMultiSelect"></div>

JS

var localData = [

		{ id: 1, text: "Item 1" },
	
		{ id: 2, text: "Item 2" },
	
		{ id: 3, text: "Item 3" },
	
		{ id: 4, text: "Item 4" },
	
		{ id: 5, parent: 1, text: "Item 1.1" },
	
		{ id: 6, parent: 1, text: "Item 1.2" },
	
		{ id: 7, parent: 1, text: "Item 1.3" },
	
		{ id: 8, parent: 3, text: "Item 3.1" },
	
		{ id: 9, parent: 3, text: "Item 3.2" },
	
		{ id: 10, parent: 5, text: "Item 1.1.1" }
	
	];
	
	$(function () {
	
		// initialize and bind the TreeView with local data
	
		$("#treeMultiSelect").ejTreeView({
	
			allowMultiSelection: true, //enable multiple selection in TreeView
	
			fields: { dataSource: localData, id: "id", parentId: "parent", text: "text" }
	
		});
		
		// create instance for TreeView
		var treeObj = $("#treeMultiSelect").data("ejTreeView");
	
		treeObj.option("selectedNodes", [0, 5, 6]); //select the TreeView nodes from the given indexes
	
	});

Get Selected Nodes

To get the selected Nodes of TreeView, you can use getSelectedNodes method. It returns the collections of TreeView selected nodes.
You can use getSelectedNodesIndex method to get the index positions of currently selected nodes.

HTML

<!--create the TreeView wrapper-->

    <div id="treeMultiSelect"></div>

JS

var localData = [

		{ id: 1, text: "Item 1" },
	
		{ id: 2, text: "Item 2" },
	
		{ id: 3, text: "Item 3" },
	
		{ id: 4, text: "Item 4" },
	
		{ id: 5, parent: 1, text: "Item 1.1" },
	
		{ id: 6, parent: 1, text: "Item 1.2" },
	
		{ id: 7, parent: 1, text: "Item 1.3" },
	
		{ id: 8, parent: 3, text: "Item 3.1" },
	
		{ id: 9, parent: 3, text: "Item 3.2" },
	
		{ id: 10, parent: 5, text: "Item 1.1.1" }
	
	];
	
	$(function () {
	
		// initialize and bind the TreeView with local data
	
		$("#treeMultiSelect").ejTreeView({
	
			allowMultiSelection: true, //enable multiple selection in TreeView
	
			fields: { dataSource: localData, id: "id", parentId: "parent", text: "text" }
	
		});
		
		// create instance for TreeView
		var treeObj = $("#treeMultiSelect").data("ejTreeView");
	
		treeObj.getSelectedNodes(); //returns the collections of TreeView selected nodes
	
	});