Hi All,

I am trying to create a treeview with two levels.  For example, first level would be company names, and each company has one or more products (aka, second level). 

Please advice what is the best way to allow ONLY the second level nodes to be draggable (aka, follow the above example, I don't want the company nodes to be draggable).

Thanks!

JB

Hello Jb,

This can be done by validating the node that is about to be dragged and preventing the dragstart event. However, due to a bug in the treeview code, that didn't work. We resolved it in the attached JavaScript file, as well in all upcoming builds. Thanks for pointing us to it!

The following code will prevent first-level nodes from being dragged:
$(".k-treeview").data("kendoTreeView").bind("dragstart", function(e) {
    if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) {
        e.preventDefault();
    }
});

However, you may also perform some validation while the user is dragging, and set the status class if the operation is not permitted through e.setStatusClass("k-denied").

Greetings,
Alex Gyoshev
the Telerik team

Hi Alex,

Thanks for the detail solution. 

While I was awaiting for a respond, I "tried" a different solution that "may work".  What I did was instead of enable the drag and drop of the treeview itself, I surrounded the content of the <li> tag (aka, the node content) with a <span> and use jQuery to make it as draggable.   I only applied this to the desired nodes I want.   However, the way I did is that I have to "provide" the drag hints, etc (in order to make the cursor to looks like dragging?")

Your solution, of course, is the best and should be the way to do it.

For my curiosity, with my solution, the styling of the node would not styled (auto applied by the framework) if I surround the node content, let say, with a div instead of span.  Is there a way to working around this styling?  Would be great if we can have a custom template apply-able for each node and/or make the nodes possible to have more advance content instead of just text-based?

Thanks again, going switch to your solution now.

Regards,

JB

You will be able to change the node content once we enable access to the TreeView templates through the configuration. We have this task on our to-do list, but we're not certain when it will be available. If you want to raise its priority, you can submit a request on uservoice and gather votes from other developers who need it.

Greetings,
Alex Gyoshev
the Telerik team

Thanks for the tip on the status classes.  

What are the valid values for the status classes, they are not listed in the docs.  I see from here that "k-denied" is one. But what are the others?

Hello Chris,

The other pre-defined status classes are: k-insert-top, k-insert-bottom, k-insert-middle and k-add. Please note that none of them will affect the drop behavior -- only k-denied does (it practically does a setValid(false) in the drop event handler).

Thanks for letting us know that it is not documented, we'll be adding it to the documentation with the next release.

All the best,
Alex Gyoshev
the Telerik team