How to change draggable content at runtime

4 posts, 1 answers
  1. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 17 Mar 2018 Link to this post

    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

  2. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 17 Mar 2018 Link to this post

    I ment in the dragstart event of the treeview, not change or just drag event.
  3. Answer
    Dimitar
    Admin
    Dimitar avatar
    806 posts

    Posted 20 Mar 2018 Link to this post

    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.
  4. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 08 Apr 2018 in reply to Dimitar Link to this post

    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. 

Back to Top