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.
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:
Are there any events for "DropEnd" or "Dropped" that happen after the action is completed?
Thanks for your help!
Coty
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);
}
}
Thanks for your help!
Coty