Disable items of contextmenu on treeview based on selection

[Ralf]

Using Kendo version 2014.2.716.545 for MVC razor application.

MVC page containing treeview with datasource retrieved from controller in json format 

 @(Html.Kendo().TreeView()
            .Name("maintenanceTreeview")
            .LoadOnDemand(false)
            .DataTextField("Name")
            .DataImageUrlField("Icon")
            .Events(events => events.Select("nodeSelected"))
            ) 
....

 $.getJSON("@Url.RouteUrl("Default", new { Controller = "Maintenance", Action = "GetFullTree" })", function (data) {
            treeview.setDataSource(data);
}));

Added contextmenu for treeview:

@(Html.Kendo().ContextMenu()
        .Name("treecontextmenu")
            .Target("#maintenanceTreeview")
            .Items(items => items.Add().Text("Item toevoegen"))
                .Events(e => e.Select("treeviewmenuclick").Open("contextMenuOpen"))
)

I would like to disable menu for items that have a dataitem with a certain property-value (MaintenanceType == 3).

I tried the open-event:

    function contextMenuOpen(e) {
        var dataItem = treeview.dataSource.get(selectedTreeItemId);
        console.log(dataItem);
        if (dataItem.MaintenanceType == 3) {
            console.log("prevent");

     // Cancel opening event????


        }
    }

But I don't know how to cancel the event? Or do I need a different approach?

BTW the nodes that should not have the menu are all at level 3 (if that makes it easier).

[Daniel]

Hello,

The approach with the open event is correct. You can prevent the menu from opening by using the event argument preventDefault method:

function contextMenuOpen(e) {
    var dataItem = treeview.dataSource.get(selectedTreeItemId);
    if (dataItem.MaintenanceType == 3) {
       e.preventDefault();
    }
}

Regards,
Daniel
Telerik

 

 

[Richard]

How did you get the NodeId of the treeview when using your context menu?  I need to get the nodeId to insert a row into my grid when I select Add in my context menu.  I was not understanding the treemenuclick event your referring to in the e.Select.

[Ralf]

I achieved this by storing the nodeid when the selection in the treeview has changed.
This is my treeview (Razor):

@(Html.Kendo().TreeView()
            .Name("treeview")
            ...
            .Events(events => events.Select("nodeSelected"))
            )

and the nodeSelected javascript function:

var selectedTreeItemId;

function nodeSelected(e) {
        var nodeItem = e.node;
        var treeItem = treeview.dataItem(e.node);
        selectedTreeItemId = treeItem.id;
    }

[Ralf]

You might also get the currently selected node id with something like this javascript (did not test is):

var tv = $('#treeview').data('kendoTreeView'),
    selected = tv.select(),
    item = tv.dataItem(selected);
    itemid = item.id;

[Richard]

Cool, My other issue is I am having a hard time of trying to get my event "e" passed to my javascript function once I select the item in the context menu.  Thats the tough nut I am trying to crack.  I can do it if I select directly from the tree but when using my context menu thats where the communcation breaks down.  Here is my treeview function but need to figure out how to make this work with my context menu.
function onSelect(e) {


       // var item = this.dataItem(e);
        var item = $(this).dataItem(e);
        if (!item.hasChildren) {
            var selId = item.id;

            var texts = [];
            do {
                texts.splice(0, 0, item.Name);
                item = item.parentNode();
            } while (item);

            var useredipi = "@curUser.EDIPI";
            var taskid = selId;
            var usertask = texts.join("/");

            var timegrid = $("#grid").data("kendoGrid");
            var data = timegrid._data;
            var timesheetid = 0;
            if (data != null) {
                var rowCount = data.length;
                for (var i = 0; i < rowCount; i++) {
                    timesheetid = data[i].TimeSheetId;
                }
            }

            var dataItem = timegrid.dataSource.insert(0, {
                EDIPI: useredipi,
                TimeSheetId: timesheetid,
                TaskId: taskid,
                Task: usertask,
                ActivityId: "2",
                DailyhoursSun: "0",
                DailyhoursMon: "0",
                DailyhoursTue: "0",
                DailyhoursWed: "0",
                DailyhoursThu: "0",
                DailyhoursFri: "0",
                DailyhoursSat: "0",
                DailyhoursSun2: "0",
                DailyhoursMon2: "0",
                DailyhoursTue2: "0",
                DailyhoursWed2: "0",
                DailyhoursThu2: "0",
                DailyhoursFri2: "0",
                DailyhoursSat2: "0",
                Totals: "0"
            });

            timegrid.editRow(timegrid.tbody.find("[data-uid='" + dataItem.uid + "']"));
          
          
        }
    }

[Ralf]

Not sure what you mean.
What is going wrong on what event?

[Daniel]

Hi,

If you need to get the id in the contextmenu select event then you could set a filter for the treeview items and use the dataItem method for the event target:

$("#menu").kendoContextMenu({
    target: "#treeview",
    filter: ".k-item",
    select: function(e) {
        var treeview = $("#treeview").data("kendoTreeView");
        var id = treeview.dataItem(e.target).id;
    }

Regards,
Daniel
Telerik

 

 

[Lyle]

 e.preventDefault();  doesn't seem to work, my context menu still opens. I've debugged and it is stepping into the call.

 

   function ContextMenuOpen(e) {
        var url = e.target.children[0].children[0].getAttribute("rawurl");
        if (url == 'http://') {
            e.preventDefault();
        }
    }​

[Daniel]

Hello,

The method seems to correctly prevent the menu from opening at least on my side. Could you check this example and let me know if I am missing something?

Regards,
Daniel
Telerik

 

 

[Lyle]

Thank you, I was hooking into the Activate event and not the Open event. When I switched to Open event, it is working correctly.