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

1 Answer 168 Views
Grid
Kevin
Top achievements
Rank 2
Iron
Iron
Iron
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)


@(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?

1 Answer, 1 is accepted

Sort by
0
Eyup
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:
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

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 https://learn.telerik.com/.

Tags
Grid
Asked by
Kevin
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Eyup
Telerik team
Share this question
or