KendoUi Treeview DragAndDrop And Editing Node issue

[choi]

Hi~ 

I have trouble in editing treeview node when I set up dragAndDrop option true.

I changed dragAndDrop options false, it worked.

Here is my code....

I'm using angularjs.
===========================================================
html file
--------------------------------------------------------------------------------------------------------------
<div kendo-tree-view="tree" k-options="option1" id="treeView"></div>

<!--  treeview template -->
<script id="treeview-template" type="text/kendo-ui-template">
           <a ng-click="edit($event)" ><span>#: item.text #</span></a>
    </script>

============================================================
controller file
------------------------------------------------------------------------------------------------------------------
$scope.option1 = {
dataSource : treeData,
dragAndDrop : true,
template: kendo.template($("#treeview-template").html()),
loadOnDemand : true
};


$scope.edit = function(e) {
var treeview = $scope.tree;
var node = $(e.target).closest(".k-item");

if (confirm("edit?")) {
var id = treeview.dataItem(node).id;
var origin_html = $(node).find("a")[0].outerHTML;
var replacehtml = "<input type='text' id='newnode' value='"
+ treeview.dataItem(node).text + "'>";
//$(node).find("a").html(replacehtml);
$(node).find("a")[0].outerHTML = replacehtml;
$("#newnode").focus();
$(node).on("keypress","input",
function(event) {
if (event.keyCode == 13) {
var newVal = $("#newnode").val();
$(node).find("input#newnode")[0].outerHTML = origin_html;
$(node).find("a").text(newVal);
var dataItem = treeview.dataSource.get(id);
$(treeview.findByUid(dataItem.uid)).each(function() {
treeview.text(this,newVal);
});
}
});

};

=================================================================================

This is my code. 

When I click a node name, html code change contained input tag.

<a ng-click="edit($event")><span> node name </span></a>
-> <input type="text" id="newnode" value="node name">

But I can't write down anythin in it. A cusor blur away immidiately.

Why it happened? and how to fix it?

And there is any way to change treeview's option 'dragAndDrop: true'  to 'dragAndDrop:false' after called $scope.edit() function?

please help!! ㅠ.ㅠ

[Alex Gyoshev]

Hello Choi,

The drag&drop functionality captures mouse events to enable the dragging of elements. In order to support drag&drop and node editing side by side, use an external form to edit the nodes.

Regards,
Alex Gyoshev
Telerik

 

 

[Wray]

Wow this should be in your API documentation on how to update a node's text with angular. Finding the node and then its parent and then setting the parent to loaded(false) and then doing a load() on the parent as documented, flat out doesn't change the text in the node.