How to place 'check-all' checkbox in kendo grid column template
1 Answer 369 Views
Tom
Top achievements
Rank 1
Tom asked on 30 Nov 2016, 06:58 PM
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>

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 02 Dec 2016, 01:00 PM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.

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>

- by
Mohit
Top achievements
Rank 1
on 28 Aug 2017, 01:28 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
- by
Dimiter Topalov
Telerik team
on 30 Aug 2017, 08:47 AM

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

- by
Sreejith
Top achievements
Rank 1
on 21 Mar 2019, 02:27 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
- by
Alex Hajigeorgieva
Telerik team
on 25 Mar 2019, 01:18 PM

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

- by
Kamaraj
Top achievements
Rank 1
on 07 Nov 2020, 09:12 AM

 

Hi Alex,

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

 

Thanks,

Kamaraj.P

- by
Kamaraj
Top achievements
Rank 1
on 07 Nov 2020, 10:10 AM
Tags
Grid
Asked by
Tom
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or