New to Telerik UI for ASP.NET Core? Download free 30-day trial

Removing Previously Selected Items in the Grid

Environment

Product Grid for Progress® Telerik® UI for ASP.NET MVC

Description

I have a Grid where custom buttons are implemented per row. When a custom button in a row is clicked, the row should be marked as deleted, but the removal should be applied when clicking a custom Delete button outside of the Grid.

Solution

To achieve the desired behavior, use the following approach:

  1. Add a custom Command button for every row.
  2. Handle the click of the custom button.
  3. The button stands for a row, so when clicked, add it to a global scope variable (array).
  4. You can add some styles to the clicked row—this allows you to show that this row will be removed.
  5. For the removal, add a new custom button outside of the Grid or in its Toolbar.
  6. In the Click event handler of the button from step 5, remove all the rows saved in the global scope variable. You can achieve this with the help of the removeRow method.

The following example represents the steps described above.

// In the Grid, add the custom button.
columns.Command(command => command.Custom("DeleteRow").Click("deleteRow")).Width(180);

// The click of a DeleteRow button (and the global scope variable)
    var rowsToDelete = [];

    function deleteRow(e) {
        var currRow = $(e.currentTarget).closest('tr')[0];

        //Adding a custom style for the rows that will be removed
        $(currRow).css("background-color", "red");

        rowsToDelete.push(currRow);
    }

// The Click Event handler of the button in step 5
    var rowsToDelete = [];

    function deleteRow(e) {
        var currRow = $(e.currentTarget).closest('tr')[0];

        //Adding a custom style for the rows that will be removed
        $(currRow).css("background-color", "red");

        rowsToDelete.push(currRow);
    }

More ASP.NET Core Grid Resources

See Also

In this article