TreeList with dynamic binding

[vlad]

Hi!

I want to create TreeList with custom columns count. There is my code:

@(Html.Kendo().TreeList<dynamic>()
    .Name("treelist")
    .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            var c = columns.Add().Field(column.ColumnName);
        }
    })
    .Filterable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Read", "Home"))
        .Model(m =>
        {
            var id = Model.PrimaryKey[0].ColumnName;
            m.Id(id);

            //m.ParentId(); what i should do here???

            foreach (System.Data.DataColumn column in Model.Columns)
            {
                var field = m.Field(column.ColumnName, column.DataType);
                if (column.ColumnName == id)
                {
                    field.Editable(false);
                }

            }
        })
    )
)

HomeController returns:

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
        {
            DataTable products = DataCache.FullTable;

            if (request.Aggregates.Any())
            {
                request.Aggregates.Each(agg =>
                {
                    agg.Aggregates.Each(a =>
                    {
                        a.MemberType = products.Columns[agg.Member].DataType;
                    });
                });
            }

            return Json(products.ToDataSourceResult(request));
        }

I see examples on GutHub, but i don't find anything about dynamic binding.

[Alex Gyoshev]

Hello Vlad,

We do not have an example of dynamic column binding just yet. The ParentId should be configured to the field that will hold the parent-child relationship -- otherwise the TreeList will only show the root-level items.

Regards,
Alex Gyoshev
Telerik by Progress

[John A]

Hi Alex,

I am also looking for the same solution, Where loading tree list from the dynamic object.

Can i check if there is any update on the above original question. Thank you.

 

[Boyan Dimitrov]

Hello,

I already replied in your support ticket thread. In order to avoid any confusions I would suggest to continue the discussion in the support thread. 

Regards,
Boyan Dimitrov
Progress Telerik

[David PettyJohn]

We are looking to use a TreeList control with some dynamic columns.  Is that possible in the latest version v2019.3?

Our technology stack:

ASP.Net MVC 5; (C#)

Razor;

.Net Framework 4.7.1

[Tsvetomir]

Hi David,

I have noticed that you have submitted a ticket in our private system - duplicate to this one. It is recommended to avoid submitting duplicates as this would pollute your history and searching for a certain past thread would be more difficult. Nevertheless, I am posting below the answer that I provided there:

Binding the Kendo UI TreeList to a collection is possible after specifying valid Id and ParentId properties. Therefore, the model declaration would be as follows:

@(Html.Kendo().TreeList<dynamic>()
    .Name("treelist")
    .Columns(columns =>
    {
        columns.Add().Field("Id").Width(250).Title("First Name");
        columns.Add().Field("Position").Title("Last Name");
        columns.Add().Field("Phone");
        //columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
    })
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetStudents", "Home"))
        .ServerOperation(false)
        .Model(m => {
            m.Id("Id");
            m.ParentId<Nullable<double>>("ParentId").Nullable(true);
        })
    )
)

And the sample code that I used on the server-side:

        public ActionResult GetStudents([DataSourceRequest] DataSourceRequest request, int? id)
        {
            var collection = new List<dynamic>() { 
                new { Id = 1, Position= "CEO", Phone= "[phone]", ParentId = (string) null },
                new { Id= 2, Name= "Guy Wooten", Position= "Chief Technical Officer", Phone= "[phone]", ParentId= 1 },
                new { Id= 32, Name= "Buffy Weber", Position= "VP, Engineering", Phone= "[phone]", ParentId= 2 },
                new { Id= 11, Name= "Hyacinth Hood", Position= "Team Lead", Phone= "[phone]", ParentId= 32 },
                new { Id= 60, Name= "Akeem Carr", Position= "Junior Software Developer", Phone= "[phone]", ParentId= 11 },
                new { Id= 78, Name= "Rinah Simon", Position= "Software Developer", Phone= "[phone]", ParentId= 11 },
                new { Id= 42, Name= "Gage Daniels", Position= "Software Architect", Phone= "[phone]", ParentId= 32 },
            };

            return Json(collection.ToTreeDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

Regards,

Tsvetomir
Progress Telerik