Is there an After Drop Event?

2 posts, 0 answers
  1. Coty
    Coty avatar
    41 posts
    Member since:
    Jun 2014

    Posted 26 Feb 2015 Link to this post

    Hi there, I have a treeview that I add some HTML to after the treeview is rendered.  (For example I add a button after the last child item).  I thought about including the button within my template but I have no way of knowing that the current node being rendered is the last child.  The datasource doesn't have that information either.  So I add the buttons dynamically after the tree is rendered.

    I have dragAndDrop = true.   So what is happening is that when I drag and drop a node that had a button it is removing my button that I previously added.  I assume that is because it is running the node through the template again?

    Here is my nodes HTML - I added a note below in bold that shows the tag that is added dynamically.
    <li role="treeitem" class="k-item" data-uid="05d9dd05-11b4-48d1-8824-e8cd5b998eba" aria-selected="false " id="treeview7469_tv_active"><div class="k-top"><span class="k-in k-state-focused">
        <span class="agendaitem-child"><span style="font-size: .9em;">a</span>. <a id="119366">test</a></span>
        <div class="iteminfo" data-order="1" data-id="119366" style="display: none"></div>
    \\The edit-controls tag is dynamically added after tree is rendered
    div class="edit-controls" style="margin-left: .5em; margin-bottom: .2em;"><a href="#" class="action action-left has-icon btnNewSubItem" data-order="1"><span class="inner"><span class="ui-icon ui-icon-plusthick"></span><span class="button-text">Sub-item</span></span></a><a href="#" class="action action-right has-icon btnNewSubItemQuick" data-order="1"><span class="inner"><span class="ui-icon-rabbit"></span><span class="button-text">Q</span></span></a><div class="invisText" style="display: none; padding-left: 0%;"><input type="text" value="" class="field-thin" style="width: 60%;"><a href="#" class="action action-left has-icon btnAddQuickItem"><span class="innerquick"><span class="ui-icon ui-icon-quickadd"></span></span></a><a href="#" class="action action-right has-icon btnCancelQuickItem" data-order="1"><span class="innerquick"><span class="ui-icon ui-icon-x"></span></span></a><span class="validate" style="width: 100%; display: block;"></span></div></div></li>

    I need to re-add that code after I drop the node because it gets removed.  It appears it can't be done in the "drop" event because it is remove AFTER the drop event is finished.

    I tested this by looking at the HTML in the drop event:
    function onDrop(e) {
                if (e.dropPosition === 'over') {
                    console.log("Drag", e.sourceNode, "over", e.destinationNode);
                    console.log("SourceNode", e.sourceNode);
    Are there any events for "DropEnd" or "Dropped" that happen after the action is completed?

    Thanks for your help!


  2. Coty
    Coty avatar
    41 posts
    Member since:
    Jun 2014

    Posted 27 Feb 2015 in reply to Coty Link to this post

    Figured this out on my own!  Apparantly the dragend event happens AFTER the drop event, which works for me.

    dragend: function (e) {
        if (e.dropPosition === 'over') {
            //remove existing button if exists
            //Get next child count
            var nextChild = $(e.destinationNode).find("li").length + 1;
            //add button to last child

    Works perfectly.
Back to Top