Double click event

[Jonas Züger]

Hi,

is it possible to add a mouse double click event handler to the tree view?

  @Html.EJS().TreeView("treeView").NodeTemplate("#treeTemplate").CssClass("custom").AllowMultiSelection().Fields(Model.TreeViewContent).Render()

Cheers,

Jonas

[Piramanayagam Ramakrishnan]

Hi Jonas Züger, 

 

You can bind the double click event to TreeView element in the created event. This event triggers when the TreeView control is created successfully. Please refer to the below code example. 

 

[cshtml] 

 

@Html.EJS().TreeView("treeView").NodeTemplate("#treeTemplate").CssClass("custom").Created("oncreated").Fields(ViewBag.TreeViewContent).Render() 

 

<script> 

    function oncreated() { 

        //you can get the TreeView element in 'this' instance 

        this.element.addEventListener("dblclick", function () { 

            alert("You have double clicked on the TreeView"); 

        }); 

    } 

</script> 

 

 

For your reference, we have prepared a sample based on this and it can be downloaded from the link: Sample 

 

Please let us know whether the provided sample is helpful in achieving your requirement. If not, revert with more information to proceed further. 

 

Regards, 

Piramanayagam R 

[Jonas Züger]

Hi Piramanayagam,

thank you works like a charm.

However, the node collapses when I double click it. Can I prevent that somehow?

Cheers,

Jonas

[Piramanayagam Ramakrishnan]

Hi Jonas Züger, 

 

Sorry for the inconvenience. 

 

Currently, we don’t have option to prevent the expanding/collapsing node while double click on it. We will provide addition arguments to the nodeCollapsing event for prevent the collapsing node while double click on it. This will be available by next patch release (April 17, 2018). Please be patience until then. 

 

Regards, 

Piramanayagam R 

[Ashokkumar Balasubramanian]

Hi Jonas Züger, 

 

We have provided the additional parameter(event) for NodeCollapsing and NodeExpanding events. You can use this event parameter to prevent the Expanding / Collapsing the nodes for node doubt click action. Please find the corresponding code block below. 

 

[CSHTML] 

 

@Html.EJS().TreeView("treeView").NodeTemplate("#treeTemplate").CssClass("custom").Created("oncreated").NodeExpanding("onexpanding").NodeCollapsing("onexpanding").Fields(ViewBag.TreeViewContent).Render(); 

 

[Script] 

 

function onexpanding(args) { 

        if(args.event.tapCount==2 ){ 

            args.cancel=true; 

        } 

    } 

 

For your reference, we have prepared the simple sample for this option. Please find the sample in below location. 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/136942/ze/Tree-1095098314.zip 

 

We have published this options in below updated syncfusion packages, please use this updated package to achieve your requirement. 

 

ej2-packages - 16.1.36 

ej2-navigation components– packages – 16.1.35. 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B.   

[Jonas Züger]

Hi Ashokkumar,

thank you - it worked.

Cheers,

Jonas

[Piramanayagam Ramakrishnan]

Hi Jonas Züger, 

 

We glad to hear that, reported requirement is achieved in TreeView component. Please let us know further assistance on this. 

 

Regards, 

Piramanayagam R