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

Select or Deselect Items on Row Click in Grid


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


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


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

            var selected =;

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

              return itemToRemove.OrderID != currentItem.OrderID





In this article