This is a migrated thread and some comments may be shown as answers.

Remote Data Binding Issue

6 Answers 129 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
UBALDI SI
Top achievements
Rank 1
UBALDI SI asked on 06 Dec 2017, 11:36 AM

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,

 

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 08 Dec 2017, 07:48 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
UBALDI SI
Top achievements
Rank 1
answered on 08 Dec 2017, 11:58 AM

Hello Stefan,

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

Thank you for your quick answer.

0
Heiko
Top achievements
Rank 1
answered on 20 Aug 2018, 04:01 PM

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.

0
Stefan
Telerik team
answered on 21 Aug 2018, 08:49 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Heiko
Top achievements
Rank 1
answered on 21 Aug 2018, 12:55 PM

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

0
Stefan
Telerik team
answered on 22 Aug 2018, 06:57 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeList
Asked by
UBALDI SI
Top achievements
Rank 1
Answers by
Stefan
Telerik team
UBALDI SI
Top achievements
Rank 1
Heiko
Top achievements
Rank 1
Share this question
or