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:
- Add a custom Command button for every row.
- Handle the click of the custom button.
- The button stands for a row, so when clicked, add it to a global scope variable (array).
- You can add some styles to the clicked row—this allows you to show that this row will be removed.
- For the removal, add a new custom button outside of the Grid or in its Toolbar.
- In the
Clickevent 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 theremoveRowmethod.
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);
}