How do I disable expanding child node list when double clicking on the TreeView node

[Tuan Nam Dinh Tran]

Hi there,

I was working on the TreeView Control, and I was trying to configure the behaviour of the nodes so that if I double click on them, they would do my custom action. I was able to attach the function to each node, but I also notice that if I double click on the node, the node would also open up its child node list. Just wondering if there is a way to configure or disable this function so that when I double click on my node, it would only perform my action without expanding the child node list?

Many thanks,

Below is the code snippet

<div class="control-section">

        <div class="control_wrapper" >

            <ejs-treeview id="treedata" loadOnDemand ="false">

                <e-treeview-fields child="ViewBag.child" dataSource="ViewBag.dataSource" id="nodeId" parentId="pid" text="nodeText" hasChildren="hasChild" expanded="expanded"></e-treeview-fields>

            </ejs-treeview>

        </div>

    </div>

<script>

window.onload = function ()

        {

            var treedata = document.getElementById("treedata");

            var instance = treedata.ej2_instances[0];

            let nodes = instance.element.querySelectorAll('.e-list-item');

            for (let i = 0; i < nodes.length; i++)

            {

                let element = nodes[i];

                let button = element.querySelector(".e-fullrow");

                button.addEventListener('dblclick', handleDoubleClick);

            }

        }

function handleDoubleClick()

        {

            console.log("double clicked");

        }

</script>

[Shalini Maragathavel]

Hi Tuan, 

Thanks for contacting Syncfusion support.

Based on your query, we understand that you do not want to expand the nodes of TreeView component while double clicking on the node. You can achieve your requirement by setting expandOn property as None( If expandOn property is set as None the expand and collapse operation will happen only while clicking the expand/collapse icon). Please find the below code example, 

<ejs-treeview id="treedata"  expandOn="None" showCheckBox="true"> 

    <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields> 

</ejs-treeview> 

<script> 

window.onload = function () { 

 

        var treedata = document.getElementById("treedata"); 

 

        var instance = treedata.ej2_instances[0]; 

 

        let nodes = instance.element.querySelectorAll('.e-list-item'); 

 

        for (let i = 0; i < nodes.length; i++) { 

 

            let element = nodes[i]; 

 

            let button = element.querySelector(".e-fullrow"); 

 

            button.addEventListener('dblclick', handleDoubleClick); 

    } 

    function handleDoubleClick() { 

        alert("double clicked"); 

} 

</script> 

Please find the below sample for your reference, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_TreeView-345215413-1261989726.zip

API Link:  https://ej2.syncfusion.com/javascript/documentation/api/treeview#expandon 

Please let us know if you need further assistance. 

Regards, 

Shalini M. 

[Tuan Nam Dinh Tran]

Thank you for your answer. This works like a charm

[Keerthana Rajendran]

Hi Tuan, 

Most welcome. We are glad to hear that the provided suggestion helped you. Please get back to us if you need further assistance.  

Regards, 

Keerthana.