Remote Data Binding Issue

[UBALDI SI]

Hello,

I try to load child nodes on parent's expansion with the data remote binding.
But when i do like the exemple (https://demos.telerik.com/aspnet-mvc/treelist/remote-data-binding) My first level is correctly loaded but I can't expand them beacause there is no icon to do it on my treelist. See Screenshot there

I got the same issue on your sample application. I runned your solution and there is no icon to expand parent also. See screenshot

My current kendo version is 2017.2.504.545.

Also, I found on the forum another user who has the same problem (https://www.telerik.com/forums/mvc-treelist-load-on-demand, see the end of the topic)

There is my treelist view 

@(Html.Kendo().TreeList(Model)
            .Name("hierarchyTreelist")
            .Toolbar(x => {
                if (ViewBag.Mode == TypeArbo.MP.ToString())
                {
                    x.Create().Text(" ");
                }
            })
            .Editable(editable => editable.Mode("popup").TemplateName("HierarchyPopUpEditor"))
            .Sortable()
            .Filterable(ftb => ftb.Extra(false))
            .Resizable(true)
            .Scrollable(true)
            .ColumnMenu()
            .Columns(columns =>
            {
                columns.Add().Field(e => e.Id).Hidden(true);
                columns.Add().Field(e => e.Libelle);
                columns.Add().Field(e => e.Code).Width(140);
                columns.Add().Field(e => e.CodeParent).Width(140);
                columns.Add().Field(e => e.CodeEtLibelleUbaldi).Width(200).Hidden(ViewBag.Mode == TypeArbo.Ubaldi.ToString());
                columns.Add().Field(e => e.FamilleLogistiqueNom).Width(250).Hidden(ViewBag.Mode == TypeArbo.Ubaldi.ToString());
                columns.Add().Field(e => e.IsActif).Template("#= IsActif ? 'Oui' : 'Non' #").Width(100);
                columns.Add().Title("Attributs").Command(c =>
                {
                    c.Custom().Click("AttributView").Text(" ").Name("btnEditHierarchyAttribut").ImageClass("glyphicon glyphicon-th-list").ClassName("btn btn-info");
                }).Width(80);
                if (ViewBag.Mode == TypeArbo.MP.ToString())
                {
                    columns.Add().Command(c =>
                    {
                        c.CreateChild().Text(" ").ClassName("btn btn-success");
                        c.Edit().Text(" ").ClassName("btn btn-primary");
                        c.Custom().Click("MoveView").Text(" ").Name("btnMoveHierarchy").ImageClass("glyphicon glyphicon-move").ClassName("btn btn-warning");
                        c.Custom().Click("DeleteView").Text(" ").Name("btnDeleteHierarchy").ImageClass("k-i-trash").ClassName("btn btn-danger");
                    }).Width(250);
                }
            })
            .DataSource(dataSource => dataSource
                .Create(create => create.Action("Create", "Hierarchie"))
                .Update(update => update.Action("Update", "Hierarchie"))
                .Destroy(destroy => destroy.Action("Delete", "Hierarchie"))
                .Read(read => read.Action("GetHierarchies", "Hierarchie",
                                  new { typeArbo = ViewBag.Mode, txtCode = Code, txtLibelle = Libelle, txtParent = CodeParent, txtFamLogi = FamLogi, rdblIsActif = IsActif }))
                .Model(m =>
                {
                    m.Id(f => f.Code);
                    m.ParentId(f => f.CodeParent);
                    m.Field(f => f.Libelle);
                    m.Field(f => f.IsActif);
                    m.Field(f => f.Description);
                    m.Field(f => f.URL);
                    m.Expanded(false);
                })
            )
            .Events(e =>
            {

                e.Edit("OnEdit");
                e.Save("OnSave");
            })
)

 

And there my data controller action :

        public JsonResult GetHierarchies([DataSourceRequest] DataSourceRequest request,string id, TypeArbo typeArbo, string txtCode, string txtLibelle, string txtParent, string txtFamLogi, bool? rdblIsActif)
        {

            List<PIMHierarchy> list = new List<PIMHierarchy>();

            if (rdblIsActif != null)
                list = hierarchyManager.GetByParams(txtCode, txtLibelle, txtParent, txtFamLogi, typeArbo)
                                  .Where(h => ((bool)rdblIsActif && h.IsActif || !(bool)rdblIsActif && !h.IsActif)).ToList();
            else
                list = hierarchyManager.GetByParams(txtCode, txtLibelle, txtParent, txtFamLogi, typeArbo).ToList();

            TreeDataSourceResult result = result = list.ToTreeDataSourceResult(request,
                                                    e => e.Code,
                                                    e => e.CodeParent,
                                                    e => id != null ? e.CodeParent == id : e.CodeParent == string.Empty,
                                                    e => e
                                                );

            return Json(result, JsonRequestBehavior.AllowGet);
}

 

Do you have any ideas where the problem is ? 

Thank you for you time on that issue,

 

[Stefan]

Hello, Jeremy,

Thank you for the provided details.

Based on the code and the screenshot I can assume that the issue occurs because the records do not have the hasChildren property or the property is not true. This will tell the TreeList that the item has children and it will set the arrow accordingly:



https://docs.telerik.com/kendo-ui/framework/hierarchicaldatasource/overview#bind-hierarchicaldatasource-to-remote-service

"The hasChildren Boolean property indicates whether a data item contains children that can be fetched from the server. You can either hard-code it, map it to another property, or compute it with a function, as demonstrated below."

// hard-code that the item will always have children
hasChildren: true

// map the hasChildren property to the HasEmployees field, serialized from the server
hasChildren: "HasChildren"

// compute whether the given item will have children
hasChildren: function(item) {
    return item.HasEmployees && item.RelatedDepartment;
}

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[UBALDI SI]

Hello Stefan,

It works as expected ! I didn't see this property in the asp.net mvc documentation.

Thank you for your quick answer.

[Heiko]

Hello Stefan,

I had a similar problem like UBALDI, Unfortunately, I had to realize that "hasChildren" has not been mentioned by a single word in the ASP.NET MVC documentation. That would have saved me half a day's work because my TreeList was not working as expected. Neither the razor-part nor the description of the service mentions "hasChildren" with a single word. This is really poor and misleading.

[Stefan]

Hello, Heiko,

I'm sorry to hear that the documentation has not helpful for setting up the TreeList.

This property and how it works is shown in the HierarchicalDataSource documentation as it is specific to the HierarchicalDataSource:



Still, as it strongly affects the TreeList, we will add it to the TreeList documentation, so it will not cause situations like this one.

Regards,
Stefan
Progress Telerik

[Heiko]

Thanks a lot. Since the documentation of HierarchicalDataSource is inside the "Kendo UI for jQuery" docs it would really be helpful to mention it in the MVC part of TreeList widget.

Regards
Heiko

[Stefan]

Hello, Heiko,

Yes, we will consider adding more details to the MVC part of the documentation. More specifically details for the DataSource and the HierarchicalDataSource.

Also, please have in mind that it is always helpful checking the jQuery documentation as well as it has additional details and examples which are applicable to the MVC version as well.

Regards,
Stefan
Progress Telerik