Editing in Treeview node

4 posts, 0 answers
  1. saroj
    saroj avatar
    39 posts
    Member since:
    Oct 2011

    Posted 24 Jun 2013 Link to this post

    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();
            }
     

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 26 Jun 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. saroj
    saroj avatar
    39 posts
    Member since:
    Oct 2011

    Posted 04 Mar 2014 in reply to Petur Subev Link to this post

    Hi Admin,

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

    Thanks
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 05 Mar 2014 Link to this post

    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!

Back to Top
UI for ASP.NET MVC is VS 2017 Ready