Select Multiple Rows with Checkboxes

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I select multiple rows with checkboxes in the Kendo UI Grid for jQuery?

Solution

The following example demonstrates how to select multiple rows by using the checkbox template in the Grid.

EditPreviewOpen In Dojo

   <div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        selectable:"multiple, row",
        dataSource: {
          data: [
            {id: 1, foo: "item1", bar: "name1"},
            {id: 2, foo: "item2", bar: "name2"},
            {id: 3, foo: "item3", bar: "name3"},
            {id: 4, foo: "item4", bar: "name4"},
            {id: 5, foo: "item5", bar: "name5"},
            {id: 6, foo: "item6", bar: "name6"},
            {id: 7, foo: "item7", bar: "name7"},
            {id: 8, foo: "item8", bar: "name8"},
            {id: 9, foo: "item9", bar: "name9"}
          ]
        },
        change: function(e) {
          $('tr').find('[type=checkbox]').prop('checked', false);
          $('tr.k-selected').find('[type=checkbox]').prop('checked', true);
        },
        columns: [{
            title: "select",
            template: '<input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" />'
          },
          { field: "id" },
          { field: "foo" },
          { field: "bar" }
        ],
        dataBound: function (e) {
          $(".checkbox").bind("click", function (e) {
            e.stopPropagation();
            $(e.target).closest("tr").toggleClass("k-selected");
          });

          var rows = e.sender.element.find("tr");
          rows.each(function(e){
            $(this).children().first().on("click", onFirstTDClick);
          })
        }
      });

      function onFirstTDClick(e){
        e.stopPropagation();
        var tr = $(e.target).closest("tr");

        tr.find('[type=checkbox]').prop('checked', !tr.hasClass("k-selected"));
        tr.toggleClass("k-selected");
      }
    </script>

For selection or deselection of all rows on the current page of the Grid with a Select All header checkbox please refer to this article.