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

[Kevin]

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)

@(Html.Kendo().Grid<MyProject.Models.Schedule.StoredProcResults.EventSchedule>()
    .Name("schedule")
    .Columns(columns =>
    {
        columns.Select().Width(50);
        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"
            );
    })
    .Sortable()
    .PersistSelection()
    .Scrollable(s => s.Height("465px"))
    .Groupable()
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple)
        )
    .Filterable()
    .HtmlAttributes(new { style = "height:600px;" })
    .Resizable(r => r.Columns(true))
    .DataSource(dataSource => dataSource
    .Ajax()
    .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?

[Eyup]

Hi Kevin,

 

Thank you for writing to us.

A similar feature is available for TreeView:
https://demos.telerik.com/aspnet-mvc/treeview/checkboxes

And TreeList:
https://demos.telerik.com/aspnet-mvc/treelist/checkbox-selection

But I am afraid not for the Grid component. However, you can use the custom solution provided here to achieve it manually:
https://feedback.telerik.com/kendo-jquery-ui/1492519-checkbox-selection-in-the-group-headers-with-serveroperations-enabled

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.

 

Regards,
Eyup
Progress Telerik