Prevent Header Remove When Removing by Checked Select Column


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


I'm using the columns.Select() functionality of the Kendo UI Grid and looping through its rows in order 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 being removed?


In order to detect if the checkbox being used to remove a row belongs to the header of the grid, we can 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
Not finding the help you need? Improve this article