Remote Data Binding Issue

7 posts, 0 answers
  1. UBALDI SI
    UBALDI SI avatar
    6 posts
    Member since:
    Jul 2013

    Posted 06 Dec 2017 Link to this post

    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,

     

  2. Stefan
    Admin
    Stefan avatar
    2056 posts

    Posted 08 Dec 2017 Link to this post

    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.
  3. UBALDI SI
    UBALDI SI avatar
    6 posts
    Member since:
    Jul 2013

    Posted 08 Dec 2017 in reply to Stefan Link to this post

    Hello Stefan,

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

    Thank you for your quick answer.

  4. Heiko
    Heiko avatar
    153 posts
    Member since:
    Oct 2012

    Posted 20 Aug Link to this post

    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.

  5. Stefan
    Admin
    Stefan avatar
    2056 posts

    Posted 21 Aug Link to this post

    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.
  6. Heiko
    Heiko avatar
    153 posts
    Member since:
    Oct 2012

    Posted 21 Aug in reply to Stefan Link to this post

    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

  7. Stefan
    Admin
    Stefan avatar
    2056 posts

    Posted 22 Aug Link to this post

    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.
Back to Top