Grid: After Binding a ClientDetailTemplate to a collection in parent row: Sort/Filter functionalities don't work

1 Answer 101 Views
Grid
Tygereye
Top achievements
Rank 1
Tygereye asked on 08 Dec 2021, 01:28 PM | edited on 08 Dec 2021, 01:58 PM

Hi,

I have a Model object which is used to create the parent Kendo Grid. This Model object contains a list of object which is used as a data source to another nested grid created with a ClientDetailTemplate and DetailInit event. The nested grid is coming up fine but I am unable to perform any grid operations like sorting or filtering. It does not give any error but the grid just closes down.

I think I might be missing some configuration in DetailInit event method to make sure the sorting/filtering operations does not do server operations. So I used  grid.dataSource.serveroperation = false; in detailInit event. still the grid just closes in and looks like its trying to do server operation for sorting and filtering. Following is an example of the code that I am using:


public class ParentModel
   {
      public long ParentId { get; set; }
      public List<ChildModel> ChildModelList{ get; set; }
      ...
   }

@(Html.Kendo().Grid<ParentModel>()  
    .Name("Grid")
    ...
    .ClientDetailTemplateId("nested_grid")
    .Events(e => e.DetailInit("detailInit"))
    ...
)
  
<script id="nested_grid" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ChildModel>()
               .Name("ParentModel_#=ParentId#")
               .Sortable()
               .Filterable()
               .ToClientTemplate()
     )
</script>
  
<script>
    function detailInit(e) {
        var grid = $("#ParentModel_" + e.data.Name).data("kendoGrid");
        grid.dataSource.data(e.data.ChildModelList);
        grid.dataSource.serveroperation = false;
        }
</script>
Thanks!

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 13 Dec 2021, 09:30 AM

Hi,

 

Thank you for writing to us.

This scenario has some specifics. For instance, you can set the .AutoBind() property to false. Also, server operations should be declared in the @(Html.Kendo().Grid<ChildModel>() definition.

In order to do that, you will need to declare an empty DataSource object to the grid:

        .DataSource(ds => ds.Ajax()
                      .ServerOperation(false))

All these additional steps lead to the idea that using a Kendo jQuery grid is much more suitable in this case. You can use the same logic demonstrated here to achieve that:
https://demos.telerik.com/kendo-ui/grid/hierarchy

More specifically, this part:

        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 10,
                    filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                },
                scrollable: false,
                sortable: true,
                pageable: true,
                columns: [
                    { field: "OrderID", width: "110px" },
                    { field: "ShipCountry", title:"Ship Country", width: "110px" },
                    { field: "ShipAddress", title:"Ship Address" },
                    { field: "ShipName", title: "Ship Name", width: "300px" }
                ]
            });
        }
Feel free to check these suggestions and let me know if they help you.

Do not hesitate to share your thoughts.

 

Regards,
Eyup
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Tygereye
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or