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

Prevent Header Remove When Removing by Checked Select Column


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


I am using the columns.Select() functionality of the Kendo UI Grid and looping through its rows to delete the ones that are checked with the following code:

$("#grid").find("input:checked").each(function () {

This causes the header row to be removed if checked as well. How can I prevent the header row from removing?


To detect if the checkbox that is used to remove a row belongs to the header of the Grid, check if the element has a parent of type th.

<div id="example">
  <button onclick=removeCheckedRows()>Remove checked rows</button>
  <div id="grid"></div>

    function removeCheckedRows(){
      $("#grid").find("input:checked").each(function () {                  
        var grid = $("#grid").data("kendoGrid");

        if (!$(this).parents('th').length) {

    $(document).ready(function () {
        dataSource: {
            pageSize: 10,
            transport: {
                read:  {
                  url: "",
                  dataType: "jsonp"
            schema: {
              model: {
                id: "ProductID"
        pageable: true,
        scrollable: false,
        persistSelection: true,
        sortable: true,
        columns: [
          { selectable: true, width: "50px" },
          { field:"ProductName", title: "Product Name" },
          { field: "UnitPrice", title:"Unit Price", format: "{0:c}"},
          { field: "UnitsInStock", title:"Units In Stock"},
          { field: "Discontinued"}]

See Also

In this article