Deselect Grid Rows on Click

Environment

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

Description

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

Solution

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="https://demos.telerik.com/kendo-ui/content/shared/js/orders.js"></script>


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

<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}"
        }
        ]
    });

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

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

        if ($row.hasClass("k-selected")) {
        $row.removeClass("k-selected");
        e.stopPropagation();
        }
    });

    });
</script>