Grouped grid with checkbox - select all by group and get selected

1 Answer 168 Views
Top achievements
Rank 2
Kevin asked on 23 Mar 2022, 04:10 PM

Hi all,

I've struggled a couple of days with this - pretty much every example I've found just doesn't work for me or is for React/Angular etc.

I have a grid that is grouped and has a checkbox on one of them (actually it isn't grouped by default)

    .Columns(columns =>
        columns.Bound(s => s.Store);
        columns.Bound(s => s.State);
        columns.Bound(p => p.Region).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.District).Filterable(ftb => ftb.Multi(true));
        //columns.Bound(p => p.VehicleTypeName).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.SupplierNumber).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.OrderGroup).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.SupplierName).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.OrderSupplier).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.DeliverySupplier).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.OrdersWithPattern).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.DeliversWithPattern).Filterable(ftb => ftb.Multi(true)).ClientGroupHeaderColumnTemplate(
            " <input type='checkbox' class='checkbox select-group'></input> Delivery Pattern"
    .Scrollable(s => s.Height("465px"))
    .Selectable(selectable => selectable
    .HtmlAttributes(new { style = "height:600px;" })
    .Resizable(r => r.Columns(true))
    .DataSource(dataSource => dataSource
    .Read(read => read.Action("GetEventSchedule", "Schedule"))
    .Group(groups => groups.Add(p => p.VehicleTypeName))

When the checkbox on DeliveryPattern is checked, I'd like all items grouped under it, to be checked.  When it's unchecked, uncheck all in the group.

Also, if someone can give me the syntax for grouping two fields by default, that'd be helpful

Finally, I'd like to add a button that goes to the next part of my page, and that would tell me every selected checkbox in the grid.

Can someone help me with this please?

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 28 Mar 2022, 08:45 AM

Hi Kevin,


Thank you for writing to us.

A similar feature is available for TreeView:

And TreeList:

But I am afraid not for the Grid component. However, you can use the custom solution provided here to achieve it manually:

And you can add multiple groups by default using this approach:

                .Group(groups => {
                    groups.Add(p => p.ShipCity);
                    groups.Add(p => p.ShipName);

I hope these resources and steps will prove helpful. As for the last button requirements, I would kindly ask you to open a new ticket so we can keep the threads organized and focused on a single task.

Thank you for your understanding.


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

Asked by
Top achievements
Rank 2
Answers by
Telerik team
Share this question