KendoUi Treeview DragAndDrop And Editing Node issue

3 posts, 0 answers
  1. choi
    choi avatar
    2 posts
    Member since:
    Jan 2015

    Posted 12 Feb 2015 Link to this post


    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>

    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 = $(".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")[0].outerHTML = replacehtml;
    function(event) {
    if (event.keyCode == 13) {
    var newVal = $("#newnode").val();
    $(node).find("input#newnode")[0].outerHTML = origin_html;
    var dataItem = treeview.dataSource.get(id);
    $(treeview.findByUid(dataItem.uid)).each(function() {



    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!! ㅠ.ㅠ

  2. Alex Gyoshev
    Alex Gyoshev avatar
    2497 posts

    Posted 16 Feb 2015 Link to this post

    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.

    Alex Gyoshev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Wray
    Wray avatar
    7 posts
    Member since:
    Aug 2013

    Posted 03 Mar 2015 in reply to Alex Gyoshev Link to this post

    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.
Back to Top