We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

123696 Apr 12,2016 03:32 AM Apr 15,2016 05:26 AM ASP.NET MVC 3
loading
Tags: TreeView
Jaime
Asked On April 12, 2016 03:32 AM

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 [Syncfusion]
Replied On April 14, 2016 01:13 AM

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
Replied On April 14, 2016 02:05 AM

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 [Syncfusion]
Replied On April 15, 2016 05:26 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;