Kendo MVC TreeList not Rendering from Initial BindTo

Question

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:

• If initial records exist...display them
• The READ ACTION CANNOT be executed on the initial render (other controls manage that later)

For other Kendo controls, you set:

• AutoBind(false)
• BindTo(Model.MyCollectiom)

...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())

Answer 1

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!