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

Treeview in Window does not expand

8 Answers 510 Views

Window

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

Toby asked on 06 Feb 2013, 08:59 AM

Hi,

I have a Kendo TreeView in a Kendo window. The window is intialised and hidden on document ready

var categoryWindow;

$(document).ready(function () {

categoryWindow = $("#category-tree").kendoWindow({

actions: ["Close", "Maximize"],

draggable: false,

height: "350px",

modal: true,

resizable: false,

title: "Browse Document Categories",

width: "500px",

visible: false

}).data("kendoWindow");

});

A click event then opens the window. The tree loads up and first level of nodes are loaded, but when I try to expand, it shows the spinning disk for a while, but then does not show any children.

Using fiddler I can see the child elements are being sent back by the ajax request and when I move the control outside of the window it works without any problems.

I am creating the tree using the ASP.NET MVC wrappers.

<div id="category-tree">

@(Html.Kendo().TreeView()

.Name("category-treeview")

.DataTextField("Name")

.Events(e => e.Select("onTreeViewSelect"))

.DataSource(ds => ds.Read(r => r.Action("TreeView", "Categories"))))

</div>

UPDATE: Just tested using pure JavaScript and the same problem occurs, so it's not specifically to do with the ASP.NET MVC wrappers

8 Answers, 1 is accepted

answered on 07 Feb 2013, 05:36 PM

Hi Toby,

Thank you for bringing this issue to our attention. As it turns out if the div element that holds the window is a direct child of the body element, the scripts for the TreeView are not removed from the Window content area and it is initialized twice. A workaround that I can suggest you for the moment is to wrap the div element of the window in another div, for example:

<div>

<div id="category-tree">

@(Html.Kendo().TreeView()

.Name("category-treeview")

.DataTextField("Name")

.Events(e => e.Select("onTreeViewSelect"))

.DataSource(ds => ds.Read(r => r.Action("TreeViewRead", "Home"))))

</div>

OR

You could use the Deffered method in order to render the scripts out of the window container, for example:

<div id="category-tree">

@(Html.Kendo().TreeView()

.Name("category-treeview")

.DataTextField("Name")

.Deferred()

.Events(e => e.Select("onTreeViewSelect"))

.DataSource(ds => ds.Read(r => r.Action("TreeViewRead", "Home"))))

</div>

@Html.Kendo().DeferredScripts()

We will fix the issue in the next release of Kendo UI. As a small sign of gratitude I am adding Telerik points to your account.

Regards,
Dimiter Madjarov
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 15 Feb 2013, 08:59 AM

TreeViewInWindow2.rar

Hi Toby,

I prepared a sample project for you, to demonstrate the approaches, that I mentioned in my previous post.
If you are still experiencing any issues, I would suggest you to update to the latest internal Kendo UI build where the bug is already fixed.

Wish you a great day!

All the best,
Dimiter Madjarov
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 01 May 2014, 02:34 PM

I have a similar issue when i use bindings from a data source, Is the issue resolved yet ?

I can see all the nodes properly when i use .ExpandAll(true) which suggests that the data is bound properly from the data source, But i can neither expand or collapse nodes. Here' s the code that i used

@model IList<MvcSamplePOC_random.DataAccess.BusinessEntity>
@using Kendo.Mvc.UI.Fluent;
@{
IEnumerable<MvcSamplePOC_random.DataAccess.BusinessAssociation> assc = (IEnumerable<MvcSamplePOC_random.DataAccess.BusinessAssociation>)ViewBag.Associations;
}
@{
ViewBag.Title = "TreeView2";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>TreeView2</h2>
<div>
<div>
@(Html.Kendo().TreeView()
.Name("treeview").Deferred()
.HtmlAttributes(new { style = "width:100%;" }).ExpandAll(true)
.BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
{
mappings.For<MvcSamplePOC_random.DataAccess.BusinessEntity>(binding => binding //define first level of tree view
.ItemDataBound((item, lambdaBusinessentity) => //define mapping between panelbar item properties and the model properties
{
item.Text = lambdaBusinessentity.Name;
}).Children(lambdaBusinessentity => assc.Where(p => p.BusinessEntityId == lambdaBusinessentity.BusinessEntityId)));
mappings.For<MvcSamplePOC_random.DataAccess.BusinessAssociation>(binding => binding
.ItemDataBound((item, lambdaAssociations)=>
{
item.Text = lambdaAssociations.AssociationId.ToString();
}));
}
)
)
</div>
@Html.Kendo().DeferredScripts()

</div>

Thanks in advance