asp.net-mvckendo-uikendo-treelist

Kendo MVC TreeList not Rendering from Initial BindTo


My MVC ViewModel contains the initial list of records to be displayed within my Kendo TreeList. However, the TreeList is NOT rendering the initial list...and I don't understand why.

REQUIREMENTS:

For other Kendo controls, you set:

...and the READ ACTION does not execute. But the TreeList is failing at the moment.

MY RAZOR LOOKS LIKE:
At initial render records DO EXIST (see image below)

@(Html.Kendo().TreeList<DeviceHierarchyDataItem>()
              .Name("treeTarget")
              .Columns(columns =>
              {
                  columns.Add().Field(e => e.DisplayName)
                               .TemplateId("tmplDisplayName")
                               .Title(" ");
              })
              .BindTo(Model.TargetDevices)
              .AutoBind(false)
              .DataSource(dataSource => dataSource
                         .Read(read => read.Action("find", "devicehierarchy", new { Area = "" })
                                           .Data("window.etp.pageController.getFilter"))
                         .ServerOperation(false)
                         .Model(m =>
                         {
                             m.Id(f => f.Id);
                             m.ParentId(f => f.ChildOf);
                             m.Expanded(true);
                             m.Field(f => f.DisplayName);
                         }))
              .Sortable())

enter image description here

enter image description here

enter image description here


Solution

  • Strangely enough the TreeList MVC control doesn't support binding to local data... At least not in july 2018...

    The recommendation is to use the jquery control instead.

    And then convert the data from the Model to a json string:

    $(document).ready(function () {
                    var dataSource = new kendo.data.TreeListDataSource({
                        data: @Html.Raw(Json.Encode(@Model.TargetDevices)),
                        schema: {
                            model: {
                            id: "Id", 
                            parentid: "ChildOf", 
                            expanded: true
                            }
                        }
                    });
    

    I hope it helps!