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

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

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 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.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. 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