This is a migrated thread and some comments may be shown as answers.

Editing in Treeview node

3 Answers 126 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
saroj
Top achievements
Rank 1
saroj asked on 25 Jun 2013, 12:45 AM
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();
        }
 

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 26 Jun 2013, 02:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
saroj
Top achievements
Rank 1
answered on 05 Mar 2014, 05:24 AM
Hi Admin,

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

Thanks
0
Alex Gyoshev
Telerik team
answered on 05 Mar 2014, 09:29 AM
Hello Saroj,

This functionality is currently not supported out of the box.

Regards,
Alex Gyoshev
Telerik

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

Tags
TreeView
Asked by
saroj
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
saroj
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or