I am calling LoadContentFrom for the panel content, but this function strips out the HTML markup on that content, and just shows the text.  How do I work around that?

Hi all,

I am trying to update the text of a node without having to refresh the whole tree. 
Is this possible?

I have tried unsuccessfully with the following:
var treeview = $("#ProcessTree").data("kendoTreeView");
var node = treeview.dataItem(treeview.select());
node.Name = "Updated Text";
treeview.collapse(node);
node.loaded(false);
node.load();
treeview.expand(node);

Thanks,
Keith. 

Hi all,

In Chrome, I am getting a scrollbar to the right of the Treeview (see attached image). 
When I expand the lowest child - the scrollbar disappears. This issue does not happen in IE

Thanks,
Keith. 

Hi
I am looking for  the solution
for changing content of header on select event of child of previous header. I have attached file in that country and plant is there on select of country (Paris) 
plant(of paris) should load accordingly.

Hi Guys, 
I'm trying to insert a treeview in my application so i checked your online examples..

My scenario would fall into "Binding to a remote data" but it's a little more complex.

I have 3 different objects that I need to put in my tree (they came from EF and they are not linked automatically - ef and oracle doesn't work with FK on unic constraints):

Object A

ObjectA is the main-level object...it will occurs only on the root level of the tree.
Each Object A always have a list of object B

ObjectB

each ObjectB always have a list of object C

ObjectC

Here's a tricky part...
Each objectC may have a list of objectC...

now..In your example the read method of the tree call always the same action and whether or not has a parameter load a different node.

In my case I have different object...Is there a way to Implement your example in my scenario?
I guess that, if there's not, I'll have to load all root-nodes and with js load every node's children on click.
I already tried this one and my tree doesn't have to icon to expand a node. I also tried adding to objecta a bool property (like HasChild) and also to fullfill the child list in the first call.
Same appens if I try to replicate your example..I load the root-level but no node is expandable..so it never call the action with the id param.

What Am I doing wrong?
Thanks
Fabio

I have an AutoComplete that is context dependent on other fields of the View screen.  For example, if a work order number is null, the autocomplete should function normally, however, if the workorder is present, then the autocomplete should not accept any changes because the value is then dictated by the work order and would only change if the work order changed.  I don't want to make the field read-only because then it won't post it's data to the server.  That would make things complicated and I adore simple.

I don't find an onBeforeChange event for the widget... is it possible to hook one up, and if so how?  If not, please suggest a solution.

Thanks!

When entering Edit mode (either In Line or Batch) the columns of the grid are automatically resizing.  Is there any way to get them to stay at the static width they appear in when in read only mode?

Hi,

When I create a hyperlink in the nested grid, it is using the parent unique id over the child unique id.  This results in an incorrect URL.

Below is the code for the template kendo grid.

Above is some MVC code.  I've tested this code using local binding and it works, but when I call it remotely and bind it, it doesn't.  However, it does trace into the following function:


And I see the trace using Fiddler,  and I can debug it, but when the Json object is returned, nothing shows up in the grid.  There is data there, and Im getting no javascript errors.  Any idea what I'm missing?

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