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

Select Multiple Rows with Checkboxes


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


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


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

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

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

      function onFirstTDClick(e){
        var tr = $("tr");

        tr.find('[type=checkbox]').prop('checked', !tr.hasClass("k-selected"));

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.

See Also

In this article