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

8 posts, 0 answers
  1. Tom
    Tom avatar
    10 posts
    Member since:
    Mar 2013

    Posted 30 Nov 2016 Link to this post

    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>
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1298 posts

    Posted 02 Dec 2016 Link to this post

    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.
  3. Mohit
    Mohit avatar
    1 posts
    Member since:
    Aug 2017

    Posted 28 Aug 2017 in reply to Dimiter Topalov Link to this post

    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>

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1298 posts

    Posted 30 Aug 2017 Link to this post

    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.
  5. Sreejith
    Sreejith avatar
    8 posts
    Member since:
    Jan 2013

    Posted 21 Mar 2019 in reply to Dimiter Topalov Link to this post

    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

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 25 Mar 2019 Link to this post

    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.
  7. Kamaraj
    Kamaraj avatar
    6 posts
    Member since:
    Sep 2020

    Posted 07 Nov 2020 in reply to Alex Hajigeorgieva Link to this post

    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

  8. Kamaraj
    Kamaraj avatar
    6 posts
    Member since:
    Sep 2020

    Posted 07 Nov 2020 in reply to Alex Hajigeorgieva Link to this post

     

    Hi Alex,

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

     

    Thanks,

    Kamaraj.P

Back to Top