New to Kendo UI for jQuery? Download free 30-day trial

Select All Rows on All Grid Pages


Product Progress® Kendo UI® Grid for jQuery
Product Version Tested up to version 2017.2 621


How can I select all rows on all Kendo UI Grid pages?


The implementation of this functionality might lead to slow Grid performance.

  1. Set the persistSelection configuration of the Grid to true.
  2. Use a jQuery selector to subscribe for the click event of the master checkbox.
  3. In the click event handler:
    1. Save the current page size in a global variable by using the pageSize method of the Kendo UI dataSource.
    2. Show all the rows on a single page by using the pageSize method.
    3. Select all the rows by using the select method of the Kendo UI Grid.
    4. Bring back the old page size by using the pageSize method.
<link rel="stylesheet" href="">
<script src=""></script>

<div id="example">
    <div id="grid"></div>

        var oldPageSize = 0;

        function onChange(e) {
            kendoConsole.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");

        function onClick(e) {
            var grid = $("#grid").data("kendoGrid");

            oldPageSize = grid.dataSource.pageSize();

            if ( === {
            } else {


        $(document).ready(function() {
                dataSource: {
                    pageSize: 10,
                    transport: {
                        read: {
                            url: "",
                            dataType: "jsonp"
                    schema: {
                        model: {
                            id: "ProductID"
                pageable: true,
                scrollable: false,
                persistSelection: true,
                sortable: true,
                change: onChange,
                columns: [{
                        selectable: true,
                        width: "50px"
                        field: "ProductName",
                        title: "Product Name"
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}"
                        field: "UnitsInStock",
                        title: "Units In Stock"
                        field: "Discontinued"

            var grid = $("#grid").data("kendoGrid");

            grid.thead.on("click", ".k-checkbox", onClick);
    <div class="box wide">
        <h4>Console log</h4>
        <div class="console"></div>
        .console div {
            height: 6em;


The checkbox selectable column is available as of the Kendo UI R2 2017 SP1 release.

See Also

In this article