[Solved] Big Troubles Binding Tree View to Anything Hierarchical!!!!!

[Mark Wells]

I just burned up 10 hours of a 100 hour budget trying to get the tree view to bind to an XML file. None of your examples worked! So then I tried the remote binding, which did actually work, as long as I transformed the XML into a class for the JSON return. Well, I can deal with transforming the XML document into a class, but the hierarchical part does not work at all. The tree just repeats the original root items over and over again.

I am including code for the classes that I am trying to use, which includes the base class and a second class with would be the second tier (I won't actually need 2 classes in the end). I have also included the controller code and the view code.

Please, please help, my time is running low and I promised to get this done using your stuff!!!!!

Here is the tree result. As you can see the root items are just repeated over and over. The item that is a child of "you" never shows up

you

• you
  • you
    • you
      • you
        • you
          • you
          • me
        • me
      • me
    • me
  • me
• me

me

My Classes

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace MCFD.MobilePolicy.MVC.Models

{

    public class SiteStructure

    {

        public SiteStructure()

        {

 

        }

        private List<string> next;

        private string myName = "N/A";

        private List<InnerStructure> colHasChildren;

        private int ID;

 

        // Declare a Name property of type string:

        public string Name

        {

            get

            {

                return myName;

            }

            set

            {

                myName = value;

            }

        }

 

        public int id

        {

            get

            {

                return ID;

            }

            set

            {

                ID = value;

            }

        }

        //public bool HasChildren

        //{

        //    get

        //    {

        //        return hasChildren;

        //    }

        //    set

        //    {

        //        hasChildren = value;

        //    }

        //}

        public List<InnerStructure> hasChildren

        {

            get

            {

                return colHasChildren;

            }

            set

            {

                colHasChildren = value;

            }

        }

    }

 

 

    public class InnerStructure

    {

        public InnerStructure()

        {

 

        }

        private List<string> next;

        private string myName = "N/A";

        private List<InnerStructure> colHasChildren;

        private int ID;

 

        // Declare a Name property of type string:

        public string Name

        {

            get

            {

                return myName;

            }

            set

            {

                myName = value;

            }

        }

 

        public int id

        {

            get

            {

                return ID;

            }

            set

            {

                ID = value;

            }

        }

        //public bool HasChildren

        //{

        //    get

        //    {

        //        return hasChildren;

        //    }

        //    set

        //    {

        //        hasChildren = value;

        //    }

        //}

        public List<InnerStructure> hasChildren

        {

            get

            {

                return colHasChildren;

            }

            set

            {

                colHasChildren = value;

            }

        }

    }

}

My Controller

public JsonResult Employees(int? id)

       {

           //ulitimate goal is to transform this xml into a structure for the tree. I will deal with this later. Note that none of the bind to xml methods have worked for me.

           XElement xml = XElement.Load(Server.MapPath("~/App_Data/books.xml"));

          

           //Create 2 items for the tree

           Models.SiteStructure sitemapitem = new Models.SiteStructure();

           sitemapitem.Name = "you";

           sitemapitem.id = 1;

           Models.SiteStructure sitemapitem2 = new Models.SiteStructure();

           sitemapitem2.Name = "me";

           sitemapitem2.id = 2;

 

           //Create hierarchy by adding a new list to the first item in the root of items

           Models.InnerStructure sitemapitem3 = new Models.InnerStructure();

           sitemapitem3.Name = "why does this not work?";

           sitemapitem3.id = 3;

 

           List<Models.InnerStructure> sitemap2 = new List<Models.InnerStructure>();

           sitemap2.Add(sitemapitem3);

           sitemapitem.hasChildren = sitemap2;

 

           //Add the items to list of items to return

           List<Models.SiteStructure> sitemap = new List<Models.SiteStructure>();

           sitemap.Add(sitemapitem);

           sitemap.Add(sitemapitem2);

 

           return Json(sitemap, JsonRequestBehavior.AllowGet);

       }

My View

<div class="demo-section">

    @(Html.Kendo().TreeView()

        .Name("treeview")

        .DataTextField("Name")

        .DataSource(dataSource => dataSource

            .Read(read => read

                .Action("Employees", "SiteEditor")

            )

        )

    )

 

   

 

</div>



[Daniel]

Hi,

We have a code-library which demonstrates how to convert the XML to objects and bind it to the TreeView both on the server and with Ajax. Please check it on this page.
Regarding your question about why is the first item always shown - the data should be loaded on demand when using Ajax binding. The action method should return a collection of items for the level based on the sent ID. If all the data should be loaded at once I can suggest to use the approach from the code-library project and bind the data on the server.

Kind regards,
Daniel
the Telerik team

[Mark Wells]

Hi Daniel,

Thanks for getting back to me. I eventually did find the code-library that you refer to. It took me many hours to find it, but when I saw it, I knew that I had found what I was looking for. I tried both approaches and found that for my application, the server binding worked best.

Now, I have a new problem. I want the users to be able to add nodes to the treeview and then post the resulting treeview back to the server so that I can save the results to an xml file. I have added the handling to create new nodes to the tree (no problems there) but am at a total loss as to how to get that manipulated tree back to the server. Again, many hours searching and no answers. Ideally, a button click to send the tree to the server would work best. Any ideas?

Thanks,

Mark 

[Daniel]

Hello Mark,

I attached the code-library project modified to show one possible approach to save the current TreeView data.

Regards,
Daniel
the Telerik team

[Mark Wells]

Hi Daniel,

Thanks for the example. The timing wasn't the greatest for me as I had already implemented the exact same thing and it worked quite well. No worries, I'm sure there will be others that can use the example you provided and save some time on their projects.

Lol, and of course I have a new problem. I need to extend the node class so that I can have some custom attributes. Any ideas on creating new attributes for the node? I have a few ideas and will get back to you if I find one that works.

[Daniel]

Hello Mark,

Custom attributes for the node can be specified through the HtmlAttributes method e.g.

mappings.For<TreeViewAjaxExpandAllNodes.Models.Employee>(bound => bound.ItemDataBound((node, employee) =>
        {
            node.Text = employee.name;
            node.HtmlAttributes["data-custom"] = employee.name + employee.id;
            node.Id = employee.id.ToString();
        })

Custom fields cannot be added in server binding mode without modifying the code. In Ajax binding you can just return the custom fields along with the other data. Kind regards,
Daniel
the Telerik team