New to Kendo UI for jQueryStart a free 30-day trial

Use Both Standard and Checkbox Selection in Grid

Environment

ProductProgress® Kendo UI® Grid for jQuery
Product VersionCreated with version 2020.3.1021

Description

How can I use both standard and checkbox selection in the Grid?

Solution

  1. Enable the checkbox selection.
  2. Attach an event handler to the click event of the row.
  3. By using the select method, select or deselect the rows.
    <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"
              }
            }
          },
          pageable: {
            buttonCount: 5
          },
          scrollable: false,
          persistSelection: true,
          navigatable: true,
          columns: [
            {
              selectable:true
            },
            {
              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) {
          if(!$(e.target).is('.k-checkbox')){
            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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support