Remove Rows but Not the Header Row

2 posts, 0 answers
  1. kencox
    kencox avatar
    106 posts
    Member since:
    Oct 2002

    Posted 08 Jan 2018 Link to this post


    I'm using  columns.Select() in a grid to provide "Select All" functionality with checkboxes.

    I have two rows remaining in the grid.

    I manually select both. The "Select All" checkbox in the header comes on.

    When I loop through to dynamically remove the selected rows from view, the following code finds the "Select All" checkbox in the header and removes the header row. I don't want that.


    What do I insert in Line 2 in the jQuery code below to detect that it has found the header row and should skip removing it?
    I note that the header row has a direct <thead> parent which might be a clue to distinguishing between a regular row checkbox and a header row checkbox.

    Thanks for any help.

    1.$("#grid").find("input:checked").each(function () {
    2.    // make sure this isn't the header row
    3.    grid.removeRow($(this).closest('tr'));
  2. Eduardo Serra
    Eduardo Serra avatar
    119 posts

    Posted 09 Jan 2018 Link to this post

    Hello Ken,

    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:

    function removeCheckedRows(){
       $("#grid").find("input:checked").each(function () {                 
          var grid = $("#grid").data("kendoGrid");
          if (!$(this).parents('th').length) {

    I have prepared a sample in the Kendo UI Dojo to demonstrate the approach described above; you can take a look at it here.

    I hope this helps!

    Eduardo Serra
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top