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

Deselect Grid Rows on Click


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


How can I remove the selection functionality from a selectable Grid row when the user clicks on it a second time?


When you enable selection, the built-in option for deselecting a row is by using the Ctrl + click shortcut.

The following example demonstrates how to deselect a row by clicking only, that is, without holding the Ctrl key.

<script src=""></script>

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

    $(document).ready(function () {
        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}"

    $("#grid tbody").on("click", "tr", function(e) {

        var rowElement = this;
        var $row = $(rowElement);
        var grid = $("#grid").getKendoGrid();

        if ($row.hasClass("k-selected")) {

In this article