Treeview & ContextMenu: How to set different menus for parents and childs.

[Jaime]

I have this treeview definition

@(Html.EJ().TreeView("treeInstalaciones")

        .TreeViewFields(d => d.Datasource((IEnumerable<ArbolNodeVM>)Model)

            .Id("Id")

            .Text("Name")

            .ParentId("ParentId")

            .Expanded("Expanded")

            .HasChild("HasChild")

        )

        .ClientSideEvents(e => e

            .NodeSelect("onInstalacionClick")

            .Create("onArbolInstalacionCreate")

        )

        .Template("#nodeTree")

        .EnablePersistence(true)

        )

        )

When a users do a right click on a node, this context menu is displayed:

@(Html.EJ().Menu("treeviewMenuInstalaciones").Items(items =>

{

    if(!HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("Orden"))

    {

        items.Add().Text("Añadir nueva orden").ImageUrl(Url.Content("~/Content/images/icons-png/plus-black.png"));

        items.Add().Text("Ver instalación completa").ImageUrl(Url.Content("~/Content/images/icons-png/info-black.png"));

        if(SessionHelper.Usuario.IsAdministrador)

        {

            items.Add().Text("Histórico").ImageUrl(Url.Content("~/Content/images/icons-png/bars-black.png"));

        }        

    }

})

                        .OpenOnClick(false)

                        .MenuType(MenuType.ContextMenu)

                            .ShowSubLevelArrows(true).Enabled(canCreateOrden)

                        .ContextMenuTarget("#treeInstalaciones")

                        .ClientSideEvents(s => s.Click("menuContextualInstClick").BeforeOpen("beforeopen")))

However, I only want to show the item "Añadir nueva orden", if the users clicks on a node with no childs.

How can I achieve the desired behaviour?

[Piramanayagam Ramakrishnan]

Hi Jaime,

Thank you for contacting Syncfusion Support.

We can hide or show the items in the Menu control using the public methods hideItems() and showItems(). In the Menu beforeOpen event, we need to check whether the selected target has childnode or not using the method hasChildNode(node) in TreeView. Then we can hide or show the menu items respectively. Refer to the following code example.

[Script]

function beforeOpen(args) {

    //create the treeview instance

    var treeviewObj = $("#tree").data("ejTreeView");

    //hide the all menu items

    this.hideItems($("#treeviewMenu > li"));

    //get the target TreeView node

    selectedNode = $(args.target).closest('.e-item');

    //set the target node as TreeView selected node

    treeviewObj.selectNode(selectedNode);

    //check whether the target has child node and display the items based on this

    if (treeviewObj.hasChildNode(args.target))

        this.showItems($("#treeviewMenu > li"));

    else

        this.showItems($("#treeviewMenu > li")[0]);

}

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

Please let us know whether the provided sample is helpful in achieving your requirement. If not, get back to us with more information for us to assist you.

Regards,

Piramanayagam R

[Jaime]

I have modified my code like this:

@(Html.EJ().Menu("treeviewMenuInstalaciones").Items(items =>

{

    if (!HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("Orden"))

    {

        items.Add().Text("Expandir/Colapsar Todo").ImageUrl(Url.Content("~/Content/images/icons-png/action-black.png")).Id("itemToogle");

        items.Add().Text("Añadir nueva orden").ImageUrl(Url.Content("~/Content/images/icons-png/plus-black.png")).Id("itemNuevaOrder");

        items.Add().Text("Ver instalación completa").ImageUrl(Url.Content("~/Content/images/icons-png/info-black.png")).Id("itemInstalacionCompleta");

        if (SessionHelper.Usuario.IsAdministrador)

        {

            items.Add().Text("Histórico").ImageUrl(Url.Content("~/Content/images/icons-png/bars-black.png")).Id("itemHistorico");

        }

    }

})

                        .OpenOnClick(false)

                        .MenuType(MenuType.ContextMenu)

                            .ShowSubLevelArrows(true).Enabled(canCreateOrden)

                        .ContextMenuTarget("#treeInstalaciones")

                        .ClientSideEvents(s => s.Click("menuContextualInstClick").BeforeOpen("beforeopen")))

function beforeopen(args) {

        var menuObj = $("#treeviewMenuInstalaciones").data("ejMenu");

        //--------

        //other things here

       this.showItems ("itemToogle"); //I have tried too: this.showItems($("#itemToogle"));

    }

However i get this error on chrome console: Uncaught TypeError: this.showItems is not a function

My project, initially, used the version 13 of your components. I have just updated it to the last version of your components using your migration tool. Maybe your migration tool doesn't update the js files?

Please take a look to the attached captures.

Attachment: Desktop_2a2e237d.rar

[Piramanayagam Ramakrishnan]

Hi Jaime,

We have checked with your query and created a new incident under your account to track the status of the issue reported in this forum. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Regards,
Piramanayagam R