This is a migrated thread and some comments may be shown as answers.

Disable items of contextmenu on treeview based on selection

10 Answers 462 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ralf
Top achievements
Rank 1
Ralf asked on 19 Nov 2014, 02:12 PM
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).

10 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 21 Nov 2014, 12:20 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 19 Feb 2015, 05:21 PM
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.
0
Ralf
Top achievements
Rank 1
answered on 20 Feb 2015, 07:22 AM
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;
    }
0
Ralf
Top achievements
Rank 1
answered on 20 Feb 2015, 07:25 AM
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;
0
Richard
Top achievements
Rank 1
answered on 20 Feb 2015, 03:08 PM
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 + "']"));
          
          
        }
    }
0
Ralf
Top achievements
Rank 1
answered on 23 Feb 2015, 09:06 AM
Not sure what you mean.
What is going wrong on what event?
0
Daniel
Telerik team
answered on 23 Feb 2015, 09:27 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Lyle
Top achievements
Rank 1
answered on 22 Sep 2015, 02:29 PM

 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();
        }
    }‚Äč

0
Daniel
Telerik team
answered on 24 Sep 2015, 10:04 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Lyle
Top achievements
Rank 1
answered on 25 Sep 2015, 08:55 PM
Thank you, I was hooking into the Activate event and not the Open event. When I switched to Open event, it is working correctly.
Tags
Menu
Asked by
Ralf
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Richard
Top achievements
Rank 1
Ralf
Top achievements
Rank 1
Lyle
Top achievements
Rank 1
Share this question
or