javascripteventskendo-uidrag-and-dropkendo-treelist

How can I change the icons/drag clue when dragging a node in Kendo UI TreeList?


When dragging a node in Kendo TreeList, it shows a plus-icon when e.target is valid (allowed to drop into) but shows a denied-icon when e.target is invalid (for example when you drag a node over itself or a child). I defined some own conditions where it's denied to drop. Now, I want to change the icon to denied according to my rules, too.

For TreeView, there is the e.setStatusClass(k-denied) method for this. It does not work on a TreeList: https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/events/drag . Is there something similar for TreeList? In the docs, there isn't: https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/events/drag .

--

Using an onDrag(e) method and accessing e.target gives a td. But I need the dataItem into the tr.


Solution

  • I had the same problem and managed to solve it using the drag event...

    I added a drag-function to the treelist:

    drag: function(e) {
        if ($(e.target).parents('#targetTreeList>div>table').length>0) {
            e.setStatus("k-i-plus");
        }
        else {
            e.setStatus("k-i-cancel");
        }
    }
    

    And it will change the icon when hovering over nodes in treelist with Id='targetTreeList', of course you can add your own logic (I checked that it was a root node as well)...

    I hope I could help a little (my first answer here at stackoverflow...)

    Edit: To get the dataitem you could use:

    $(e.target).parents('.k-treelist').data('kendoTreeList').dataItem(e.target)
    

    (lookes overcomplicated but that was the only way I got it to work)...