Grid Grouping with Responsive Columns

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2023.1.425 version

Description

When I utilize the approach suggested in the Grid Responsive Columns Demo I lose the ability to group the Grid's columns. How can I solve this?

Solution

The ability to group the Grid is lost when the responsive-column-template is in use because the original columns of the Grid are no longer displayed. To workaround this you can define a MultiSelect Component over the Grid and subscribe to its Change Еvent to group the Grid by its selected values.

1. Bind the MultiSelect to a List of the Grid columns' names.

   @(Html.Kendo().MultiSelect()
           .Name("group")
           .Placeholder("Group by...")
           .BindTo(new List<string>() {
               "ContactName",
               "ContactTitle",
               "CompanyName",
               "Country"
           })
           .Events(e => e.Change("onChange"))
   )
   

2. In the onChange handler create an object from the selected values of the MultiSelect and push that into an array. Then pass that array to dataSource's group method.

       function onChange(e){
           var grid = $("#grid").getKendoGrid(); 
           var groupedBy = [];
           var values = e.sender.value();
           if(values.length>0){
               values.forEach(value=>{
                   groupedBy.push({field:value})
               })
           }
           grid.dataSource.group(groupedBy)
       }
   

3. Subscribe to the resize event of the Web API's Window to show the MultiSelect when the Grid's columns collapse and also ensure that columns that have been grouped are persisted in the new responsive layout.

       $(window).on("resize",function(e){
           if(parseInt($(".k-body").css("width"),10)<450){
               $(".k-grouping-header").css("display","none");
               $(".group").css("display","block");
               var grid = $("#grid").getKendoGrid(); 
               var ms = $("#group").getKendoMultiSelect();
               var groups = grid.dataSource.group();
               if(groups.length>0){
                   groups.forEach(group=>{
                       ms.value([ms.value(),group.field])
                   })
               }
           }else{
               $(".k-grouping-header").css("display","block");
               $(".group").css("display","none");
           }
       })
   

To explore the complete behavior, see the Telerik REPL example on how to enable Grid Grouping when Responsive Columns are employed.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Get Started with the Telerik REPL for ASP.NET Core

• Client-Side API Reference of the Grid for ASP.NET Core

• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base