Delete Rows Selected with Checkboxes

The following example demonstrates how to delete multiple rows selected with checkboxes in a Grid.

Example

    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>
    <div id="example" class="k-content">
      <div id="grid"></div>

      <div id="details"></div>

      <script>

        $(document).ready(function () {
          var grid = $("#grid").kendoGrid({
            dataSource: {
              pageSize: 20,
              data: createRandomData(50)
            },
            pageable: true,
            height: 430,
            columns: [
              { field: "FirstName", title: "First Name", width: "140px" },
              { field: "LastName", title: "Last Name", width: "140px" },
              { field: "Title" },
              {
                field : "Select",
                title : "Select",
                width : "16%",
                template: "<input type='checkbox' class='sel' />"},
              { command: { text: "Delete", click: whenYourDeleteButtonIsClicked }, title: " ", width: "140px" }]
          }).data("kendoGrid");

        });

        function whenYourDeleteButtonIsClicked(){
          var grid = $("#grid").data("kendoGrid");
          $("#grid").find("input:checked").each(function(){
            grid.removeRow($(this).closest('tr'));
          })
        }
      </script>


    </div>

    <script>

    </script>

See Also

• JavaScript API Reference of the Grid
• How to Add New Rows When Tabbing out of the Last One
• How to Build Custom dataSource for Custom Editor
• How to Customize the Delete Confirmation Dialog
• How to Edit Records in Child Grids
• How to Edit Records Using External Forms
• How to Increase Popup Edit Form and Textbox Width
• How to Preserve Dirty Indicator in Incell Editing and Client Operations
• How to Render Grid Editor in Column Template
• How to Show Custom Editor Using the Selected Item outside the Grid
• How to Skip Non-editable Cells When Tabbing
• How to Use AutoComplete as Custom Column Editor
• How to Use CRUD Operations When Grid Is Bound through MVVM
• How to Use Editors Based on Data Item Property
• How to Use TreeView as Custom Editor

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