New to Telerik UI for ASP.NET Core? Download free 30-day trial

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

See Also

In this article