"Delete Row" Dialog

One of the ways to delete data is to use the "Delete Row Dialog" functionality of the grid. This brings a popup dialog (modal or not, this is configurable) with confirmation whether you wish to delete the row or not.

Then, also set the ToolbarSettings.ShowDeleteButton property to true - this will show the edit (pencil) button in the toolbar. You can see that in the screenshot on top (bottom left).

<trirand:JQGrid ID="JQGrid1" runat="server" OnRowDeleting="JQGrid1_RowDeleting">         
   <ToolBarSettings ShowDeleteButton="true" />
</trirand:JQGrid>

When the user deletes the row, jqGrid fires the RowEditing event. You can hook custom code in this event and using the event argument RowKey you can find the respective row in your datasource and modify it.

<trirand:JQGrid ID="JQGrid1" runat="server" OnRowDeleting="JQGrid1_RowDeleting">         
</trirand:JQGrid>

You can customize almost any feature of the delete dialog via the DeleteDialogSettings collection. Here is a full list of all possible customization and sample settings:

<trirand:JQGrid ID="JQGrid1" runat="server" OnRowEditing="JQGrid1_RowEditing">         
   <DeleteDialogSettings
         CancelText="Cancel delete"
            Draggable="true"
            Height="200"
            Width="200"
            TopOffset="100"
            LeftOffset="100"
            LoadingMessageText="Deleting"
            Modal="false"
            ReloadAfterSubmit="true"
            Resizable="true"
            SubmitText="Do delete" />
</trirand:JQGrid>