Confirm Delete command with AutoGenerateDeleteColumn in RadGrid

Description

How to prompt the user to confirm deletion of a GridItem when the delete column is automatically generated via enabling the AutoGenerateDeleteColumn property of RadGrid?

Solution

Multiple ways to implement confirmation for deleting an item in RadGrid are described in the Adding a Delete Confirmation article.

When it comes to using the auto-generated delete column of RadGrid the most convenient approach is to handle and conditionally cancel the client-side OnCommand event of the Grid.

Here is a sample approach how to confirm the deletion with window.confirm() or RadWindowManager's RadConfirm Dialog functionality:

<script>
    var preventCommand = true;

    function gridCommand(sender, args) {
        var commandName = args.get_commandName();

        if (commandName == 'Delete') {
            var itemIndex = args.get_commandArgument();
            var tableView = args.get_tableView();

            //make sure that the field name is added to the ClientDataKeyNames collection
            var orderId = tableView.get_dataItems()[itemIndex].getDataKeyValue("OrderID");

            var confirmMessage = "Are you sure you want to delete item with ID " + orderId + "?";

            ////use window.confirm()
            //args.set_cancel(!confirm(confirmMessage));

            //use radconfirm()
            if (preventCommand) {
                args.set_cancel(preventCommand);
                radconfirm(confirmMessage, confirmCallBackFn, 300, 200, null, "Confirm");
            }

            function confirmCallBackFn(arg) {
                if (arg) {
                    preventCommand = false;
                    tableView.fireCommand(commandName, itemIndex);
                }
            }
        }
    }
</script>

<telerik:RadWindowManager runat="server" ID="RadWindowManager1"></telerik:RadWindowManager>

<asp:Label Text="Log:" runat="server" /><br />
<asp:Label Text="" ID="Label1" runat="server" />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px"
    AutoGenerateEditColumn="true"
    AutoGenerateDeleteColumn="true"
    DataSourceID="SqlDataSource1"
    AllowAutomaticInserts="true"
    AllowAutomaticUpdates="true"
    AllowAutomaticDeletes="true"
    OnDeleteCommand="RadGrid1_DeleteCommand"
    OnItemCommand="RadGrid1_ItemCommand">
    <ClientSettings>
        <ClientEvents OnCommand="gridCommand" />
    </ClientSettings>
    <MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" CommandItemDisplay="Top"
        DataKeyNames="OrderID" ClientDataKeyNames="OrderID">
        <Columns>
            <telerik:GridNumericColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
            </telerik:GridNumericColumn>
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                SortExpression="OrderDate" UniqueName="OrderDate">
            </telerik:GridDateTimeColumn>
            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                SortExpression="Freight" UniqueName="Freight">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="ShipName"
                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                SortExpression="ShipName" UniqueName="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry"
                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                SortExpression="ShipCountry" UniqueName="ShipCountry">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    InsertCommand="INSERT INTO [Orders] ([OrderDate], [Freight], [ShipName], [ShipCountry]) VALUES (@OrderDate, @Freight, @ShipName, @ShipCountry)"
    SelectCommand="SELECT [OrderID], [OrderDate], [Freight], [ShipName], [ShipCountry] FROM [Orders]"
    UpdateCommand="UPDATE [Orders] SET [OrderDate] = @OrderDate, [Freight] = @Freight, [ShipName] = @ShipName, [ShipCountry] = @ShipCountry WHERE [OrderID] = @OrderID"
    DeleteCommand="DELETE FROM [Orders] WHERE [OrderID] = @OrderID">
    <InsertParameters>
        <asp:Parameter Name="OrderDate" DbType="DateTime" />
        <asp:Parameter Name="Freight" DbType="Decimal" />
        <asp:Parameter Name="ShipName" DbType="String" />
        <asp:Parameter Name="ShipCountry" DbType="String" />
    </InsertParameters>
    <UpdateParameters>
        <asp:Parameter Name="OrderID" DbType="Int32" />
        <asp:Parameter Name="OrderDate" DbType="DateTime" />
        <asp:Parameter Name="Freight" DbType="Decimal" />
        <asp:Parameter Name="ShipName" DbType="String" />
        <asp:Parameter Name="ShipCountry" DbType="String" />
    </UpdateParameters>
    <DeleteParameters>
        <asp:Parameter Name="OrderID" DbType="Int32" />
    </DeleteParameters>
</asp:SqlDataSource>

protected void RadGrid1_DeleteCommand(object sender, GridCommandEventArgs e)
{
    Label1.Text += "DeleteCommand event Fired!<br />";
}

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    Label1.Text += "ItemCommand event Fired! for Command: "+e.CommandName+"<br />";
}