Grid Grouping with Responsive Columns

Environment

Product	Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC 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 MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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