Edit this page

Select All Rows on All Grid Pages

Environment

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

Description

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

Solution

Important

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="https://demos.telerik.com/kendo-ui/content/shared/styles/examples-offline.css">
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/console.js"></script>  


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

    <script>
        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();
            grid.dataSource.pageSize(grid.dataSource.data().length);

            if (grid.dataSource.data().length === grid.select().length) {
                grid.clearSelection();
            } else {
                grid.select("tr");
            };

            grid.dataSource.pageSize(oldPageSize);
        };

        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    pageSize: 10,
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/kendo-ui/service/Products",
                            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);
        });
    </script>
    <div class="box wide">
        <h4>Console log</h4>
        <div class="console"></div>
    </div>
    <style>
        .console div {
            height: 6em;
        }
    </style>
</div>

Notes

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

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy