Grid View for ASP.NET MVC - How to use a popup control to show a confirmation dialog box

This example demonstrates how to create a custom Delete button and show a confirmation pop-up window on a button click.

Overview

Create a custom Delete button and handle the grid's CustomButtonClick event to show a confirmation pop-up window on a button click.

GridViewCommandColumnCustomButton customButton = new GridViewCommandColumnCustomButton(){
    ID = "deleteButton", Text = "Delete" };
settings.CommandColumn.CustomButtons.Add(customButton);
settings.ClientSideEvents.CustomButtonClick = "function(s, e) { OnCustomButtonClick(s, e); }";

var visibleIndex;
function OnCustomButtonClick(s, e) {
    if (e.buttonID = "deleteButton") {
        visibleIndex = e.visibleIndex;
        popup.Show();
    }
}

When a user clicks the Yes button, the grid deletes the row specified by its visible index.

function OnClickYes(s, e) {
    GridView.DeleteRow(visibleIndex);
    popup.Hide();
}
function OnClickNo(s, e) {
    popup.Hide();
}

Files to Review

• GridViewPartial.cs (VB: GridViewPartial.vb)
• Index.cs (VB: Index.vb)
• HomeController.cs (VB: HomeController.vb)

More Examples

• GridView for Web Forms - How to use ASPxPopupControl to show a confirmation dialog