Kendo Grid - Multiple column level selection and row level selection

[Akarsh]

I have a grid which has three header columns and each column has check boxes. And the each column data also have check boxes.

For Example:

If suppose i click first column checkbox, it should select only first column data checkboxs, same applicable for all columns  and also need row level selection too.

 

Please have a look at the attached image for better clarification.

 

 

[Svet]

Hi Akarsh,

Thank you for the provided screenshot.

Indeed there isn't a built-in feature that would allow to achieve the requirements out-f-the-box. However the demonstrated requirement could be achieved by implementing a custom approach. First the desired checkboxes should be rendered within the kendoGridHeaderTemplate and kendoGridCellTemplate of each column. Then there should also be added a sub checked property for each item property represented in each cell:

export const sampleProducts = [
    {
        "ProductName": {ProductName: "Chai", checked: false},
        "UnitPrice": {UnitPrice: 18, checked: false}
    },
    {
        "ProductName": {ProductName: "Chang", checked: false},
        "UnitPrice": {UnitPrice: 10, checked: true},
    }
];

The checkboxes should then be bound to their corresponding checked properties and on their (change) events the required checked properties should be checked or unchecked using some custom logic. Please check the following example demonstrating such approach:

https://stackblitz.com/edit/angular-maukxj?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik