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

How to change draggable content at runtime

3 Answers 76 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 17 Mar 2018, 04:07 PM

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

3 Answers, 1 is accepted

Sort by
0
Tayger
Top achievements
Rank 1
Iron
answered on 17 Mar 2018, 04:09 PM
I ment in the dragstart event of the treeview, not change or just drag event.
0
Accepted
Dimitar
Telerik team
answered on 20 Mar 2018, 01:53 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tayger
Top achievements
Rank 1
Iron
answered on 08 Apr 2018, 05:30 PM

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. 

Tags
TreeView
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Tayger
Top achievements
Rank 1
Iron
Dimitar
Telerik team
Share this question
or