Edit this page

Select Multiple Rows with Checkboxes

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

Example
   <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-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 () {
          $(".checkbox").bind("change", function (e) {
            $(e.target).closest("tr").toggleClass("k-state-selected");
          });
        }
      })
    </script>

See Also

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy