TreeView mouse middle click on Node

[Bartosz Kwiatkowski]

Hello, 

My application uses the treeview component as a side menu to navigate between pages.

I'm trying to make the ability to press on the node with the middle mouse button to open a new tab in the browser and fill the link bar with the appropriate data. I currently have a nodeClicked event made and a function that allows me to navigate to another page by pressing a regular mouse button.

[Prasanth Madhaiyan]

Hi Bartosz,

Greetings from Syncfusion support.

Based on the shared details, we understand that your requirement is to navigate to the provided link when you perform the middle click on the ASP.NET Core TreeView component's node at your end. To achieve this mentioned requirement, we have prepared a sample using the NavigateUrl field property. While clicking (mouse middle click) on the corresponding node item text, it navigates to the corresponding link which we have provided for the node.

Refer to the below code snippets.

[Index.cshtml]

@{

    …

    List<TreeData> LocalData = new List<TreeData>();

    LocalData.Add(new TreeData

            {

                Id = "1",

                Name = "Favorites",

                HasChild = true,

                Expanded = true,

                NavigateUrl = https://www.syncfusion.com/

            });

    LocalData.Add(new TreeData

            {

                Id = "2",

                Pid = "1",

                Selected = true,

                Name = "Inbox",

                NavigateUrl = https://ej2.syncfusion.com/aspnetcore/documentation/treeview/getting-started

            });

    LocalData.Add(new TreeData

            {

                Id = "3",

                Pid = "1",

                Name = "Sent Items",

                NavigateUrl = https://ej2.syncfusion.com/aspnetcore/TreeView/DefaultFunctionalities#/material3

            });

            …

}

 

…

}

<div class="control-section">

    <div id="sidebar-wrapper">

        …

        <div class="maincontent">

            …

        </div>

        <!--end of main content declaration -->

    </div>

    <!-- sidebar element declaration -->

    <ejs-sidebar id="menuSidebar" Width="260px" target=".maincontent" Position="Left" HtmlAttributes="ViewBag.HtmlAttribute">

        <e-content-template>

            <ejs-treeview id="treeObj" nodeSelecting="BeforeSelect" nodeSelected="OnSelect">

                <e-treeview-fields NavigateUrl="NavigateUrl" Id="Id" Text="Name" Selected="Selected" ParentID="Pid" HasChildren="HasChild" Expanded="Expanded" DataSource="ViewBag.LocalData"></e-treeview-fields>

            </ejs-treeview>

        </e-content-template>

    </ejs-sidebar>

    <!-- end of sidebar element -->

</div>

 

[HomeController.cs]

public class HomeController : Controller

{

    …

    public class TreeData

    {

        public string Id { get; set; }

        public string Pid { get; set; }

        public string Name { get; set; }

        public bool HasChild { get; set; }

        public bool Expanded { get; set; }

        public bool Selected { get; set; }

        public string NavigateUrl { get; set; }

    }

 

    …

 

}

For your reference, we have attached the sample.

Sample: Attached as a zip file.

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: Core_SidebarWithTreeView_e176557.zip