Edit this page

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: "https://demos.telerik.com/kendo-ui/service/Products",
                  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

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

Give article feedback

Tell us how we can improve this article