Confirm WebDataGrid Row Deletion with Message Box

Alex Kartavov / Wednesday, August 4, 2010

It is often necessary for an end-user to delete rows from a grid. However, sometimes an end-user will select a row for deletion that was not meant to be removed. Therefore, it is beneficial to have a confirmation appear before the delete action is processed.

Here is how to attach to the rows deleting client event and confirm a delete action.

Set up a WebDataGrid for row deletion. Configure its data source to accept changes.
Setup the EditingCore client event, RowsDeleting, to have an event handler.

In ASPX:

<ig:EditingCore>

<ig:RowDeleting />

</Behaviors>

</ig:EditingCore>

<ig:RowSelectors>

</ig:RowSelectors>

<ig:Selection CellClickAction="Row" RowSelectType="Multiple">

</ig:Selection>

</Behaviors>

In Visual Basic:

Me.WebDataGrid1.Behaviors.EditingCore.EditingClientEvents.RowsDeleting = "WebDataGrid1_Editing_RowsDeleting";

In C#:

this.WebDataGrid1.Behaviors.EditingCore.EditingClientEvents.RowsDeleting = "WebDataGrid1_Editing_RowsDeleting";

Add an event handler on your aspx defined as follows:

In Javascript:

function WebDataGrid1_Editing_RowsDeleting(sender, eventArgs)

{

///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>

///<param name="eventArgs" type="Infragistics.Web.UI.CancelRowsDeletingEventArgs"></param>

// Open a dialog to use asking for a yes/no about deletion

var continueDelete = confirm("Are you sure you want to delete those row(s)?");

// if end-user says no, cancel the delete action

if (!continueDelete)

eventArgs.set_cancel(true);

}

4. Run your application. Click on several rows with the mouse and control key to prepare them for deletion.

5. Pressing the ‘Delete’ key will display the following. Note: the rows have already been cleared of being selected by this point.

Clicking ok will allow the delete operation to proceed to the server. Pressing Cancel will stop the delete operation from happening.

ASP.NET Team