How to create treeview and diagram with editing options

You can add, delete, or edit nodes in the diagram control by using the context menu in the Treeview control.

The nodeEdited event in the TreeView is triggered so that the data is updated with the respective node information and allocated to dataSourceSettings. The following code example demonstrates how to update the node information in dataSourceSettings in the diagram by using the nodeEdited event.

function nodeEdited(args) {

var treeValidate = document.getElementById("tree").ej2_instances[0];

// Getting data source details from Treeview

var hierarchicalData = treevalidate.fields.dataSource;

var targetNodeId = treevalidate.selectedNodes[0];

for (var i = 0; i < hierarchicalData.length; i++) {

if (hierarchicalData[i].Name === args.nodeData.id) {

hierarchicalData[i].Name = args.newText;

}

if (hierarchicalData[i].Category === args.nodeData.id) {

hierarchicalData[i].Category = args.newText;

}

// Update the node details into the diagram's data source

var diagram = document.getElementById("diagram").ej2_instances[0];

var dataSource = new ej.data.DataManager(hierarchicalData);

diagram.dataSourceSettings.dataManager = dataSource;

diagram.dataBind();

}

For adding items from the TreeView, you should add the selected items to the data source and assign the data to dataSourceSettings by using the menuClick event in TreeView. The following code example demonstrates how to add data to the data source using the menuClick event.

function menuClick(args) {

var index = 1;

var treevalidate = document.getElementById("tree").ej2_instances[0];

var hierarchicalData = treevalidate.fields.dataSource;

var targetNodeId = treevalidate.selectedNodes[0];

// To add an item in tree view

if (args.item.text == "Add New Item") {

var nodeId = "tree_" + index;

var item = { Name: nodeId, Category: targetNodeId };

treevalidate.addNodes([item], targetNodeId, null);

index++;

hierarchicalData.push(item);

treevalidate.beginEdit(nodeId);

}

For removing items from the tree view, you should remove the selected items from the datasource by using the menuClick events in treeview. The following code example is used to remove the data in the data source using the menuClick event.

// To delete an item in tree view

else if (args.item.text == "Remove Item") {

treevalidate.removeNodes([targetNodeId]);

for (var i = 0; i < hierarchicalData.length; i++) {

if (hierarchicalData[i].Name === targetNodeId) {

hierarchicalData.splice(i, 1);

}

var diagram = document.getElementById("diagram").ej2_instances[0];

var dataSource = new ej.data.DataManager(hierarchicalData);

diagram.dataSourceSettings.dataManager = dataSource;

diagram.dataBind();

}

For renaming items in the tree view, you should click on the rename item in the context menu. The following code example is used to edit the data in the data source using the menuClick event.

// To renaming an item in tree view

else if (args.item.text == "Rename Item") {

treevalidate.beginEdit(targetNodeId);

}

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/EssentialJS2MvcApplication2915620318

Did you find this information helpful?

Yes

Comments (0)

How to create treeview and diagram with editing options

Access denied