Get node object

[thibault fouillat]

Hello,

I'm using a treeview component in my asp.net application, this treeview is a menu, like :

Every node has a property named "IsTable" witch is not in the HTML but in the treeData property from the treeview :

I need to get this value when I click on node but I can't find how.

Below my actual code :
View (Razor):
@Html.EJS().TreeView("treeMenu").NodeSelecting("EJSOnNodeSelect").NodeClicked("OnNodeClick").Fields((TreeViewFieldsSettings)ViewBag.Fields).Render()

Javascript :

function OnNodeClick(args) {

    console.log("Node clicked");

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

    console.log("treeObject: ", tree);

    var node = args.node;

    console.log("args: ", args);

    console.log("node: ", node);

}

As you can see, I'm getting my tree object and my node. The var node contains only the HTML, not the original object that I need.

How can i get the value in "IsTable" ?

Regards,

[Sridhar N]

Hi Thibault, 

Thanks for using Syncfusion products. 

 

We are not having support to access the node object on node click currently. We have already considered this as improvement and it will be available in upcoming release. However, we have created workaround solution to get the node object when it is clicked by handling the NodeClicked event. Please find the code snippet below 

 

[CSHTML] 

@Html.EJS().TreeView("tree").NodeClicked("onNodeClicked").Fields(ViewBag.TreeViewFields).Render()  

 

[JS] 

function onNodeClicked(args) { 

//get the instance for TreeView 

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

//get the Node ID 

var nodeID = args.node.getAttribute("data-uid"); 

//Filter the datasource for isTable true data's' 

var data = new ej.data.DataManager(treeObj.fields.dataSource).executeLocal(new ej.data.Query().where('isTable', 'equal', true)); 

for (var a = 0; a < data.length; a++) { 

if (data[a].nodeId == nodeID) { 

//You can do the Necessary operation 

console.log(data[a]); 

} 

} 

} 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/139258/ze/DragandDrop308196154  

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Sridhar N  

[thibault fouillat]

Thanks a lot! It worked for me with some adjustments, I do not need every nodes of isTable but only the clicked one, as you can see below :

// récupération des infos de base de la node (objet de l'arbre + ID)

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

var nodeID = args.node.getAttribute("data-uid");

// filtrage du datasource pour récupérer la node cliquée

var data = new ej.data.DataManager(tree.treeData).executeLocal(new ej.data.Query().where('Id', 'equal', nodeID));

console.log('node selected: ', data[0]);

I have another issue link to nodes. I can't expand/collapse it with a simple clic, I have to do a double-clic. How can I get it with a single one ? I couldn't find any documentations on this subject.

Regards,
Thibault

[Shanmugaraja K]

Hi Thibault, 

 

Thank you for your update, 

 

We suggest you to use ExpandOn property in TreeView to achieve your requirement of “Expand node on single click”. Please refer the below code example, 

 

[CSHTML] 

 

 

@Html.EJS().TreeView("tree").ExpandOn(Syncfusion.EJ2.Navigations.ExpandOnSettings.Click).NodeClicked("onNodeClicked").Fields(ViewBag.TreeViewFields).Render() 

 

 

Please check the below documentation link, 

 

https://ej2.syncfusion.com/documentation/treeview/api-treeView.html?lang=es5#expandon  

 

Please try the above solution and check whether this resolves your reported issue. 

 

Regards, 

Shanmugaraja K 

[thibault fouillat]

Thanks!

Just a last question, can I disable expand by simple clic on some nodes ? For some of them, I just want to expand only with the icon (here, an arrow).

I have a parent-nodes inside another (ex: ELEMENT GXPM), there will another behavior :
- I clic on the name = I display my page, no expand.

- I clic on the arrow = I expand my node without displaying my page, just showing their children.

How can I set this behavior on this kind of node ? Is that possible ?

Regards,

[Shanmugaraja K]

Hi Thibault 

 

Thank you for your update. 

 

We can disable the expand option on single click for node text by using NodeExpanding client-side event. Please find the below code block. 

 

[CSHTML] 

 

 

@Html.EJS().TreeView("tree").ExpandOn(Syncfusion.EJ2.Navigations.ExpandOnSettings.Click).NodeExpanding("onNodeExpanding").Fields(ViewBag.TreeViewFields).Render() 

 

[Script] 

 

 

function onNodeExpanding(args) { 

   //Blocked the expand option for below mentioned id nodes 

    var blockedNodesID = ["01", "02", "04"]; 

    var target = args.event.originalEvent.target; 

    if (blockedNodesID.indexOf(args.nodeData.id) > -1 && target.classList.contains("e-fullrow")) { 

              args.cancel = true; 

    } 

} 

 

Please check whether these details are helpful, if not please get back to us with more information. 

 

Regards, 

Shanmugaraja K 

[thibault fouillat]

Thanks, it worked.

I used the same function for expand and collapse :

function OnNodeExpandCollapse(args) {

    console.log("On node expanding");

    var target = args.event.originalEvent.target;

    if (args.nodeData.expanded == false) {

        if (args.nodeData.parentID != null && target.classList.contains("e-fullrow")) {

            args.cancel = true;

        }

    }

    else {

        if (args.nodeData.parentID != null && target.classList.contains("e-fullrow")) {

            args.cancel = true;

        }

    }

}

And I added this to my OnNodeClick() function :

if (target.classList.contains("e-icon-collapsible") || target.classList.contains("e-icon-expandable")) {

        displayGrid = false;

    }

if (displayGrid && selectedNodeObject.Parent !== 0 && selectedNodeObject.Parent !== undefined && selectedNode.parentID !== null) {

     // display my grid

}

Thanks again,

Regards

[Shanmugaraja K]

Hi Thibault, 

 

Most welcome, please let us know if you need any assistance. 

 

Regards, 

Shanmugaraja K