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

RemoveRow

methods

Removes the specified table row from the grid. Also removes the corresponding data item from the data source.

Executing of removeRow triggers the default execution of the Grid delete mechanism. If the Grid data source is configured with destroy remote data operation a delete request will be performed. If the editable configuration is set to true, a confirmation dialog will appear before removing the row. You can disable it from the editable.confirmation setting.

Fires the remove event.

removeRow

Parameters:rowString|Element|jQuery

A string, DOM element or jQuery object which represents the table row. A string is treated as a jQuery selector.

<button id="btn">Remove Row</button>
<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [{ field: "name" }, { field: "age" }],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 },
      ],
      schema: {
        model: { id: "id" },
      },
    },
    editable: true,
  });

  $("#btn").on("click", function () {
    var grid = $("#grid").data("kendoGrid");
    grid.removeRow("tr:eq(1)");
  });
</script>

<button class="k-button" onclick="remove()">Remove selected row</button>
<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    selectable: true,
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 },
        { id: 3, name: "Angela Smith", age: 33 }
      ]
    }
  });

  function remove() {
    var grid = $("#grid").data("kendoGrid");
    grid.removeRow(grid.select());
  }
</script>