Trying to add child nodes to TreeView

4 posts, 1 answers
  1. Andy
    Andy avatar
    2 posts
    Member since:
    Jan 2017

    Posted 09 Feb Link to this post

    Apologies for what I hope is a stupid question, given I'm new to MVC & web development.

    I have a TreeView with manually added child nodes off the root. I then want to add child nodes to each of those nodes via a foreach loop

    The code (that is wrong) is

        @(Html.Kendo().TreeView()
            .Name("treeview")
            .Items(treeview =>
            {
                treeview.Add().Text("Root")
                    .Expanded(true)
                    .Items(root =>
                    {
                        root.Add().Text("Child")
                            .Expanded(true);

                        foreach(var item in Model.Entity.GrandChildData)
                        {
                            {add to Child } item.data;
                        }

     

    Thanks

  2. Answer
    Joana
    Admin
    Joana avatar
    98 posts

    Posted 13 Feb Link to this post

    Hello Andy,

    You could append child nodes via the Items collection.

                                                                               

    .Items(root => { 
    root.Add().Text("Child")
       .Expanded(true)
       .Items(childNodes => {
    foreach (var treeNodeEntity in Model)
    {
    childNodes.Add()
        .Text(treeNodeEntity.Name)
        .HasChildren(true)
        .Id(treeNodeEntity.ID);
    }
    });

    You could review if BindTo action might be suitable for your scenario. I suggest that you go through our documentation and demos for TreeView:

     

    Regards,

    Joana

    Telerik by Progress

    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Raj
    Raj avatar
    21 posts
    Member since:
    Nov 2016

    Posted 15 Feb Link to this post

    Hello All

    I am trying to build a tree view using ASP.Net MVC from a list returning from controller. The List is a plain Normal List with no sub Model objects, But it has the duplicate column fields where i want to build a tree view removing duplicates.

    For example Below is the List with duplicates in WASHINGTON NAVY YARD - 001 , SUPER CONCRETE CORP. - 001 and also the duplicates in Flow - Per Day for both.

     

     

    2015-01-21 50050 Parameter Found MGD 0.02 1 WASHINGTON NAVY YARD - 001 Flow - Per Day
    2015-02-28 50050 Parameter Found MGD 99.00 1 WASHINGTON NAVY YARD - 001 Flow - Per Day
    2015-03-21 50050 Parameter Found MGD 0.00 1 WASHINGTON NAVY YARD - 001 Flow - Per Day

    2015-01-21 80082 Parameter Found mg/L 3.74 1 WASHINGTON NAVY YARD - 001 BOD5 - Biochemical Oxygen Demand, 5 Day
    2015-02-28 80082 Parameter Found mg/L 99.00 1 WASHINGTON NAVY YARD - 001 BOD5 - Biochemical Oxygen Demand, 5 Day
    2015-03-21 80082 Parameter Found mg/L 2.16 1 WASHINGTON NAVY YARD - 001 BOD5 - Biochemical Oxygen Demand, 5 Day

    2015-02-28 50050 Parameter Found MGD 99.00 1 SUPER CONCRETE CORP. - 001 Flow - Per Day
    2015-03-31 50050 Parameter Found MGD 99.00 1 SUPER CONCRETE CORP. - 001 Flow - Per Day
    2015-04-30 50050 Parameter Found MGD 99.00 1 SUPER CONCRETE CORP. - 001 Flow - Per Day

    I want to have a nodes on WASHINGTON NAVY YARD - 001 , SUPER CONCRETE CORP. - 001, then sub nodes on Flow which looks like below

    WASHINGTON NAVY YARD - 001
              Flow - Per Day

               2015-01-21 50050 Parameter Found MGD 0.02 1 WASHINGTON NAVY YARD - 001 Flow - Per Day
               2015-02-28 50050 Parameter Found MGD 99.00 1 WASHINGTON NAVY YARD - 001 Flow - Per Day

              BOD5 - Biochemical Oxygen Demand, 5 Day

    SUPER CONCRETE CORP. - 001
             Flow - Per Day

    can you help me out in building tree view for this scenario?

    Thanks

    Raj

  4. Joana
    Admin
    Joana avatar
    98 posts

    Posted 16 Feb Link to this post

    Hello Raj,

    The Treeview widget does not support such grouping of list items based on custom requirements. The developer needs to implement the grouping and then pass the data to the TreeView.  You might find useful the demos of the widget showing databinding:

    http://demos.telerik.com/aspnet-mvc/treeview/local-data-binding

    Regards,
    Joana
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top