How to change draggable content at runtime

[Tayger]

Hello

I'm using kendoTreeview with drag options, all works fine. The draggable content is (by default) the dragged item of the treeview, which is fine as well. There is a class (font awesome char) that is defined on each item I would like to remove in the dragged content when the drag starts. The solution I found so far in this forum was on : 

I've tried this: here and it works well but its only working on initialisation of the treeview. So I adapted to it to my case because I need to change the content change at runtime (treeview.change):

$("#dialogtreediv").data("kendoTreeView").templates.dragClue = kendo.template("<div class='k-header k-drag-clue'><span class='k-icon k-drag-status'/>drag me!</div>");

 

This won't work, looks like it will be ignored (dragged item content still visible). But this is anyway all too much. I don't want to rebuild the whole item text that is dragged. I would like to remove only a single sign in the dragged item content (represented by a fa-class from awesome font, jQuery available). So I wonder how to do this or how to access the dragged content.

Regards

[Tayger]

I ment in the dragstart event of the treeview, not change or just drag event.

[Dimitar]

Hello Farai,

By default, the contents of the drag clue is build dynamically and is handled internally in the Kendo TreeView. I have prepared a Dojo example, where the template of the drag clue is being programmatically changed by overriding the _hintText function as follows:

<script id="treeview-custom-template" type="text/kendo-ui-template">
  #: item.text #
</script>

<script>
  kendo.ui.TreeView.fn._hintText = function(node) {
    var template = kendo.template($("#treeview-custom-template").html());

    var result = template({
      item: this.dataItem(node)
    });

    return result;
  };
</script>

Important to note here is that this will modify the template of the drag clue to show only the text of the element and will ignore any other custom added icons and etc. but the drag status clue icon will still be visible. This is because it is being dynamically appended/changed to the drag clue during the dragging event and it is recommended to be visible in order for the users to know where the node will be appended after dropping it. In case you would like to hide this icon too, then you can also add the following CSS rule:

<style>
  .k-drag-clue .k-icon {
    display: none;
  }
</style>

Regards,
Dimitar
Progress Telerik

[Tayger]

Hi Dimitar

Thank you very much, that was the solution! In fact I need the drag clue (the dragged line can't be inserted everywhere) but I see I still can keep it.