Edit this page

Use Both Standard and Checkbox Selection in Grid

Environment

Product Progress Kendo UI Grid
Progress Kendo UI version Created with version 2018.1.221

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-label')){
            var rowElement = this;
            var row = $(rowElement);
            var grid = $("#grid").getKendoGrid();

            if (row.hasClass("k-state-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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy