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

Clear Selection on All Grid Pages

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version Created with the 2017.3.913 version

Description

How can I clear the selection on all Kendo UI Grid pages?

Solution

  1. Assign an empty object as the value of the _selectedIds property of the Grid.
  2. Invoke the clearSelection method.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/orders.js"></script>

<div id="example">
    <div id="grid"></div>
    <button id="button">clearSelection</button>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    data: orders,
                    pageSize: 6,
                    schema: {
                        model: {
                            id: "OrderID"
                        }
                    }
                },
                selectable: "multiple",
                pageable: {
                    buttonCount: 5
                },
                scrollable: false,
                persistSelection: true,
                navigatable: true,
                columns: [{
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    },
                    {
                        field: "Freight",
                        width: 300
                    },
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        format: "{0:dd/MM/yyyy}"
                    }
                ]
            });
            $("#button").kendoButton({
                click: function(e) {
                    var grid = $("#grid").data("kendoGrid");
                    grid._selectedIds = {};
                    grid.clearSelection();
                }
            })

        });
    </script>
</div>
In this article