How to place 'check-all' checkbox in kendo grid column template

[Tom]

I have a kendo grid with a column that has a row template that is a checkbox. When it is selected, it marks that row as selected so that I can operate on a subset of the rows selected by the user.

I wish to place a checkbox in the column header that will check or uncheck every row in the grid.

I have tried adding a headerTemplate with a checkbox but I do not know how to cause it to select all rows.

Also, for some reason the checkbox in the header does not get checked when I click it, instead when I click it, it appears to try to sort the grid (the asc/desc arrows appear on the header cell). I've tried adding `filterable: false` but this still happens.

My grid is below. The column in question is `select_all`

    <div id="PatrolRecords"
            data-filterable='{ "mode": "row" }'
            data-role='grid'
            data-sortable='true'
            data-detail-template='patrolDetailTemplate'
            data-detail-init='detailInit'
            data-bind='source: reportData, events: {excelExport: excelExportHandler}'
            data-bound='onDataBound'
            data-pageable='{ "pageSize": 10 }'
            data-toolbar='[{ template: kendo.template($("#toolbarTemplate").html()) }]'
            data-excel='{ "fileName": "Patrols.xlsx", "allPages": "true" }'
            data-columns='[
                {
                    field: "address",
                    title: "Address",
                    template: kendo.template($("#addressTemplate").html()),
                    filterable: { cell: { operator: "contains" } }
                },
                {
                    field: "end_date_seconds",
                    title: "Date & Time",
                    template: kendo.template($("#dateTemplate").html()),
                    filterable: false
                },
                {
                    field: "patrolled_by",
                    title: "Patrolled By",
                    filterable: { cell: { operator: "contains" } }
                },
                {
                    field: "select_all",
                    width: 35,
                    headerTemplate: "<input type=\"checkbox\" id=\"chkAll\" />",
                    template: "<input type=\"checkbox\" class=\"check_row\" />",
                    filterable: false
                }
            ]'>
        </div>

[Dimiter Topalov]

Hi Tom,

The described sorting behavior is caused by the fact that the check-box template column configuration options include the field option, which triggers an attempt the column to be bound to the 'select_all' field of the data items.

For the template columns (ones that are for presentation purposes only, and are not bound to data item fields) you can use the columns.headerTemplate option to determine the content, and add some text to the checkbox (if necessary):

http://dojo.telerik.com/OyABU

As for the necessary custom logic for maintaining selecting rows via checkboxes, and the select/toggle all functionality, I can suggest the following example:

http://dojo.telerik.com/akuJa

You can inspect it, and get an idea of the custom logic, required to implement it in your scenario. I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Mohit]

How can I implement select all in kendo grid header using angular2.There is a checkbox in table header when user check that checkbox then all the row of grid shoud be selected.Each row of grid having checkbox.Please help me how can I do that.

<kendo-grid [data]="activeTabData" [height]="410">
<!--<kendo-grid-checkbox-column [locked]="true" width="80"></kendo-grid-checkbox-column>-->
<kendo-grid-column field="" title="" width="1" [locked]="false">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" title="Discontinued" width="70" [locked]="true">
<ng-template kendoGridCellTemplate let-dataItem let-idx="rowIndex">
<input type="checkbox" width="30" height="30" [checked]="dataItem.Discontinued" (click)=SetSelectedItem(dataItem) />

</ng-template>
</kendo-grid-column>
<ng-template ngFor [ngForOf]="tableKeys" let-column>
<kendo-grid-column
width="180"
field="{{column}}"
>
</kendo-grid-column>
</ng-template>
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
</ng-template>
<kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel>
</kendo-grid>

[Dimiter Topalov]

Hello Mohit,

You can utilize the recently introduced enhanced selection functionality that provides a checkbox column for selecting Grid items, as well as selecting multiple rows, out-of-the-box:

http://www.telerik.com/kendo-angular-ui/components/grid/selection/

The "master checkbox" functionality is not supported out-of-the-box, but can be achieved via some custom implementation, based on using a checkbox with custom click handler in the GridHeaderTemplate, e.g.:

http://plnkr.co/edit/mB8ofZ7l5kIfx30D5qsi?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Sreejith]

The below example is not working?

 

The "master checkbox" functionality is not supported out-of-the-box, but can be achieved via some custom implementation, based on using a checkbox with custom click handler in the GridHeaderTemplate, e.g.:

http://plnkr.co/edit/mB8ofZ7l5kIfx30D5qsi?p=preview

[Alex Hajigeorgieva]

Hello, Sreejith,

You can have a look at the Kendo Angular site here for a runnable example:

https://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-select-all-feature



For the jQuery Kendo UI Grid, the built-in select column demo is available at:

https://demos.telerik.com/kendo-ui/grid/checkbox-selection

Let us know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Kamaraj]

Hi ,

 

I am looking for same functionality using Angular with Kendogrid .Can you suggest same example link for Angular also please.

 

Thanks and Regards,

Kamaraj.P

[Kamaraj]

 

Hi Alex,

I can able to pick the values based on check box selection event now by refer the first example .

 

Thanks,

Kamaraj.P