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>