Treeview in Window does not expand

9 posts, 0 answers
  1. Toby
    Toby avatar
    20 posts
    Member since:
    Nov 2010

    Posted 06 Feb 2013 Link to this post

    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
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 07 Feb 2013 Link to this post

    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>
    </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!
  3. Kendo UI is VS 2017 Ready
  4. Toby
    Toby avatar
    20 posts
    Member since:
    Nov 2010

    Posted 14 Feb 2013 Link to this post

    Hi Dimiter,

    I wrapping the window in a DIV as suggested, but that had no effect and I can't find a Deferred method for Treeview.

    Many thanks

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 15 Feb 2013 Link to this post

    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!
  6. Harish
    Harish avatar
    2 posts
    Member since:
    Mar 2014

    Posted 01 May 2014 Link to this post

    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
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 02 May 2014 Link to this post

    Hello Harish,

    Does the problem occur with the latest internal build, too? If the nodes are not collapsible, it means that the scripts are not working for some reason. If the upgrade does not help, please submit a sample that shows the problem.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Harish
    Harish avatar
    2 posts
    Member since:
    Mar 2014

    Posted 02 May 2014 in reply to Alex Gyoshev Link to this post

    Hello Alex,

    I realized that the issue with some scripts not rendered properly to the web page. I have modified the references and the tree view is now expandable

    Thanks
    Harish
  9. Raja
    Raja avatar
    1 posts
    Member since:
    Sep 2015

    Posted 10 Feb Link to this post

    Hi, I am also facing same issue. But it is litter differ like

    I am using KendoTreeView drag drop with  HierarchicalDataSource. First time, when I open the modal and click on the expand icon its working fine. But when I hide the Modal and again open the modal its not expanding the node when click on plus icon.

    Note: 3rd time its working fine, 4th when I opened the window its not working. Every odd time its working but Even number time its not expanding the node. 

     Can anyone suggest me how to fix this issue.

     

  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 11 Feb Link to this post

    Hello Raja,

    This thread is very old, so I assume you are referring to a different issue. Could you send us an isolated runnable example that demonstrates the problem, here or in another thread/support ticket, so we could inspect it locally and provide assistance? I am looking forward to hearing from you.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready