Grid Removing Previously Selected Items
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
In order 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).
- To the clicked row could be added some style for representing that it is a row that will be removed.
- For the removal, add a new custom button outside of the Grid or in its Toolbar.
- In the "Click" Event handler of the button from point 5 - remove all the rows saved in the global scope variable. This could be achieved with the help of the "removeRow" method.
- Here is an example:
// 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);
}