Select Multiple Rows with Checkboxes

Select Multiple Rows with Checkboxes

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-state-selected').find('[type=checkbox]').prop('checked', true);
        columns: [{
            title: "select",
            template: '<input class="checkbox" 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-state-selected"));

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article