Select or Deselect Items on Row Click in Grid

Environment

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

Description

How can I select and deselect multiple rows by clicking on a row in a Grid with enabled selection?

Solution

When selection is enabled in the Grid component, the built-in option for deselecting a row or selecting multiple rows is Ctrl+ click. To deselect a row or select multiple rows by row clicking and without holding the Ctrl key, use the following approach.

    <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")) {

            var selected = grid.select();

            selected = $.grep(selected,function(x){
              var itemToRemove = grid.dataItem(row);
              var currentItem = grid.dataItem(x);

              return itemToRemove.OrderID != currentItem.OrderID
            })

            grid.clearSelection();

            grid.select(selected);

            e.stopPropagation();
          }else{
            grid.select(row)

            e.stopPropagation();
          }
        });

      });
    </script>