Is there an After Drop Event?

[Coty]

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>

</span></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!

Coty

[Coty]

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
        $(e.destinationNode).find(".edit-controls").remove();
        //Get next child count
        var nextChild = $(e.destinationNode).find("li").length + 1;
        //add button to last child
        $(e.sourceNode).append(CreateSubItemButton(nextChild));
    }

}

Works perfectly.