Disable items of contextmenu on treeview based on selection

11 posts, 1 answers
  1. Ralf
    Ralf avatar
    9 posts
    Member since:
    Jan 2014

    Posted 19 Nov 2014 Link to this post

    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).
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Nov 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 19 Feb 2015 in reply to Ralf Link to this post

    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.
  5. Ralf
    Ralf avatar
    9 posts
    Member since:
    Jan 2014

    Posted 20 Feb 2015 Link to this post

    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;
        }
  6. Ralf
    Ralf avatar
    9 posts
    Member since:
    Jan 2014

    Posted 20 Feb 2015 in reply to Ralf Link to this post

    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;
  7. Richard
    Richard avatar
    26 posts
    Member since:
    Sep 2014

    Posted 20 Feb 2015 in reply to Ralf Link to this post

    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 + "']"));
              
              
            }
        }
  8. Ralf
    Ralf avatar
    9 posts
    Member since:
    Jan 2014

    Posted 23 Feb 2015 in reply to Richard Link to this post

    Not sure what you mean.
    What is going wrong on what event?
  9. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 23 Feb 2015 Link to this post

    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!
     
  10. Lyle
    Lyle avatar
    2 posts
    Member since:
    Jul 2013

    Posted 22 Sep 2015 in reply to Daniel Link to this post

     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();
            }
        }​

  11. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 24 Sep 2015 Link to this post

    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!
     
  12. Lyle
    Lyle avatar
    2 posts
    Member since:
    Jul 2013

    Posted 25 Sep 2015 in reply to Daniel Link to this post

    Thank you, I was hooking into the Activate event and not the Open event. When I switched to Open event, it is working correctly.
Back to Top
Kendo UI is VS 2017 Ready