Editing in Treeview node

[saroj]

Hi Kendo support,

I was trying to transer the telerik logic of editing in treeview node, but got some problem, is there any sample example in kendo for editing the node, Also i want to do for adding the node in treeview as well.  Any sample or idea will be helpful.

Below is my telerik code for editing,  

//Partial page

@model IEnumerable<PFLMakeTreeviewModel> 
@model IEnumerable<PFLMakeTreeviewModel> 
  
  <script type="text/javascript">
    function onLoad(e) {
   
        // subscribe to the contextmenu event to show a contet menu
        $('.t-in', this).live('contextmenu', function(e) {
            // prevent the browser context menu from opening
            e.preventDefault();

            // the node for which the 'contextmenu' event has fired
            var $node = $(this).closest('.t-item');

            // default "slide" effect settings
            var fx = $.telerik.fx.slide.defaults();

            // context menu definition - markup and event handling
            var $contextMenu =
                $('<div class="t-animation-container" id="contextMenu">' +
                    '<ul class="t-widget t-group t-menu t-menu-vertical" style="display:none">' +
                        '<li class="t-item"><a href="#" class="t-link">Edit</a></li>' +
                      //'<li class="t-item"><a href="#" class="t-link">Delete</a></li>' +
                    '</ul>' +
                '</div>')
                .css( //positioning of the menu
                {
                    position: 'absolute',
                    left: e.pageX, // x coordinate of the mouse
                    top: e.pageY   // y coordinate of the mouse
                })
                .appendTo(document.body)
                .find('.t-item') // select the menu items
                .mouseenter(function() {
                    // hover effect
                    $(this).addClass('t-state-hover');
                })
                .mouseleave(function() {
                    // remove the hover effect
                    $(this).removeClass('t-state-hover');
                })
                .click(function(e) {
                    e.preventDefault();
                    // dispatch the click
                    onItemClick($(this), $node);
                })
                .end();

            // show the menu with animation
            $.telerik.fx.play(fx, $contextMenu.find('.t-group'), { direction: 'bottom' });

            // handle globally the click event in order to hide the context menu
            $(document).click(function(e) {
                
                // if clicked inside the editing textbox - discard
                if ($(e.target).is('#TreeView14 :text'))
                    return;

                // remove any textboxes from the treeview and update the node if needed
                $('#TreeView14 :text').each(function() {
                    var $textBox = $(this);
                    var newText = $textBox.val(); 
                    var oldText = $textBox.data('text');
                    
                    // the node to which the textbox belongs to
                    var $node = $textBox.closest('.t-item');
                    
                    // remove the textbox from the node
                    $textBox.replaceWith($('<span class="t-in" />').html(newText));
                    
                    // if the text changed update the node
                    if (newText != oldText) {
                        onEdit($node);
                    }
                });

                // hide the context menu and remove it from DOM
                $.telerik.fx.rewind(fx, $contextMenu.find('.t-group'), { direction: 'bottom' }, function() {
                    $contextMenu.remove();
                });
            });
        });
    }
    
    function onItemClick($item, $node) {
        var treeView = $('#TreeView14').data('tTreeView');
        var nodeText = treeView.getItemText($node);
        var menuItemText = $item.text();

        if (menuItemText == "Edit") {
            // replace the node contents with a textbox
            setTimeout(function() {
                $node.find('.t-in:first')
                     .replaceWith($('<input type="text" />')
                        .val(nodeText)
                        .data('text', nodeText)
                        .keydown(function(e) {
                            if (e.keyCode == 13) {
                                // handle enter key - edit the node
                                
                                var newText = $(this).val();
                                // remove the textbox from the node
                                $(this).replaceWith($('<span class="t-in"/>').html(newText));
                                
                                if (newText != nodeText) {
                                    // if the text changed update the node
                                    onEdit($node);
                                }
                            
                            } else if (e.keyCode == 27) {
                                // handle escape key - cancel editing
                                
                                // remove the textbox from the node
                                $(this).replaceWith($('<span class="t-in"/>').html(nodeText));
                            }
                        }))
            }, 0);
        } 
//else if (menuItemText == "Delete") {
//            //delete the node
//            onDelete($node);
//        }
    }

    function onEdit($node) {
        var treeView = $('#TreeView14').data('tTreeView');
        
        // post to HomeController.EditNode using jQuery
        $.post('@(Url.Action("EditNode", "ReferenceFiles"))',
            { 
            
                level: $node.parents('.t-item').length, // node level required to determine whether this is a Category or a Product
                id: treeView.getItemValue($node),
                text: treeView.getItemText($node)
            }
        );
        }


//    function onDelete($node) {
//        var treeView = $('#TreeView14').data('tTreeView');
//        
//        if (confirm('Are you sure you want to delete this node?')) {
//            
//            // post to HomeController.DeleteNode using jQuery
//            $.post('@(Url.Action("DeleteNode", "ReferenceFiles"))',
//            {
//                level: $node.parents('.t-item').length,
//                id: treeView.getItemValue($node),
//            });
//            
//            $node.remove();
//        }
//    }

//        function AppendItem() {
//    debugger
//        var treeView = $("#TreeView14").data("tTreeView");
//        var itemData = { Text: $("#itemText").val() };
//        var selected = getSelected();
//        treeView.append(itemData, selected.length != 0 ? selected : null); 
//    }

</script>
  
   @* <button onclick="AppendItem()" class="t-button">Add new item</button>
    @Html.TextBox("itemText", "Add item", new { style = "width: 100px" })         *@
                         


<style type="text/css">
     ul.t-widget.t-group.t-menu.t-menu-vertical
    {
    background-color:White;
    width:80px;
    font-size: 10pt;
    color:black;
    }
    div.t-top, div.t-mid, div.t-bot
    {
      width:20%;  
    }
</style>

  
@(Html.Telerik().TreeView()
        .Name("TreeView14")
             .ClientEvents(events => events.OnLoad("onLoad"))
        //.DragAndDrop(settings => settings                
        //    .DropTargets(".drop-container")) 
        .BindTo(Model, mappings =>
        {
            mappings.For<PFLMakeTreeviewModel>(binding => binding
                    .ItemDataBound((item, make) =>
                    {
                        
                        item.Text = make.MAKE_DESCRIPTION;
                        item.Value = make.MAKE_ID.ToString();
                                            
                    })
                    .Children(make => make.Models)
             );
             mappings.For<PFLModelTreeviewModel>(binding => binding
                    .ItemDataBound((item, model) =>
                    {
                        item.Text = model.MODEL_DESCRIPTION;
                        item.Value = model.MODEL_ID.ToString();
                    })
                    .Children(model => model.Series)
             );
             mappings.For<PFLSeriesTreeviewModel>(binding => binding
                    .ItemDataBound((item, serie) =>
                    {
                        item.Text = serie.SERIE_DESCRIPTION;
                        item.Value = serie.SERIE_ID.ToString();
                    })

            );
            
            
        })
                
        )
       

//Controller

[HttpPost]
        public ActionResult EditNode(int level, int id, string text)
        {
            var ausfleet = new AUSFLEETEntities();
            ReferencesFiles _ReferencesFiles = new ReferencesFiles();

            if (level == 0)
            {
                var make = ausfleet.PFL_MAKE.FirstOrDefault(c => c.MAKE_ID == id);
                if (make != null)
                {
                    make.MAKE_DESCRIPTION = text;
                }
            }
            else if (level == 1)
            {
                var model = ausfleet.PFL_MODEL.FirstOrDefault(p => p.MODEL_ID == id);
                if (model != null)
                {
                    model.MODEL_DESCRIPTION = text;
                }
            }

            else
            {
                var serie = ausfleet.PFL_SERIE.FirstOrDefault(p => p.SERIE_ID == id);
                if (serie != null)
                {
                    serie.SERIE_DESCRIPTION = text;
                }
            }
            ausfleet.SaveChanges();
            return new EmptyResult();
        }
 

[Petur Subev]

Hello Saroj,

I am afraid that such editing is not supported by the TreeView. 

You can vote for the idea on the feedback portal to start supporting it. Also checking the following thread could be of help.

Kind Regards,
Petur Subev
Telerik

[saroj]

Hi Admin,

Is there any new update on my above post of editing kendo treeview node.

Thanks

[Alex Gyoshev]

Hello Saroj,

This functionality is currently not supported out of the box.

Regards,
Alex Gyoshev
Telerik