Custom Delete Confirmation with parameters

[Lance]

Is there a way to create a custom delete confirmation using RadWindow that would allow me to ask the user about delete options when performing the delete?  I need to be able to ask the user when deleting a record if the related records should also be deleted, or unlinked.

[Shinu]

Hello Lance,


If you want to modify the confirm text only, then set the ConfirmText property of the GridBttonColumn accordingly.

ASPX:

<telerik:GridButtonColumn ConfirmDialogType="RadWindow" ConfirmText="Are you sure (custom text here)" Text="Delete">
</telerik:GridButtonColumn>

In the case of, you need to change the confirm text based on some condition, then you can try another approach as described below.

Attach OnCommand client event to RadGrid and cancel the event. Call the RadConfirm explicitly (you can set the confirm text here), if this returns true, then call the delete function using fireCommand method.

Working example is shown here: GridButtonColumn, RadWindow and ConfirmText


-Shinu

[Lance]

Thanks Shinu, this gets me moving along the way I need to go.  The second option is the direction I was trying and need to pursue (completely custom interface).

Is there a good reference for the args of the OnCommand event?  The OnCommand event documentation page is woefully short on details.  It looks like the args.get_commandArgument returns the row index for which the delete command was fired?

-Lance

[Lance]

I have used the guidance you have provided to stop the delete command (Client.OnCommand is wired to ProjectGridCommand) and open a custom RadWindow with additional user options:

function ProjectGridCommand(sender, args) {
    if (args.get_commandName() == "Delete") {
        if (!allowDelete) {
            //cancel the command
            args.set_cancel(true);
            //open a window to prompt the user for the desired delete behavior
            var wm = $telerik.findWindowManager("<%=RadWindowManager1.ClientID %>", null);
            var grd = $telerik.findGrid("<%= rgProjects.ClientID %>", null);
            //find the current grid row, based upon the args.commandArgument (row index)
            var dataItem = grd.get_masterTableView().get_dataItems()[args.get_commandArgument()];
            //get the project ID for this row
            projectID = dataItem.getDataKeyValue("ID");
            //open the dialog window, passing in the project
            wm.getWindowById("rwProjectActions").show();
        }
    }
}

My custom radwindow looks like the following:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server"
    Behavior="Default" InitialBehavior="None">
    <Windows>
        <telerik:RadWindow ID="rwProjectActions" runat="server" Behavior="Close, Move" InitialBehavior="None"
            Modal="True" Behaviors="Close, Move" Width="400px">
            <ContentTemplate>
                <div class="rwDialogPopup radconfirm">
                    <div class="rwDialogText">
                        What do you want to do with the associated work items for this project?
                    </div>
                    <div>
                        <a class="rwPopupButton" onclick="CloseProjectAction(1);" href="javascript:void(0);">
                            <span class="rwOuterSpan">
                                <span class="rwInnerSpan">De-associate</span>
                            </span>
                        </a>
                        <a class="rwPopupButton" onclick="CloseProjectAction(2);" href="javascript:void(0);">
                            <span class="rwOuterSpan">
                                <span class="rwInnerSpan">Delete</span>
                            </span>
                        </a>
                        <a class="rwPopupButton" onclick="CloseProjectAction(3);" href="javascript:void(0);">
                            <span class="rwOuterSpan">
                                <span class="rwInnerSpan">Cancel</span>
                             </span>
                        </a>
                    </div>
                </div>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

The user interface in the RadWindow calls the following code:

function CloseProjectAction(action) {
    // close the window
    var wm = $telerik.findWindowManager("<%=RadWindowManager1.ClientID %>", null);
    wm.getWindowById("rwProjectActions").close(null);
    if (projectID != null) {
        if (action == 1) {
            DeleteProject(projectID, action);
        }
        else if (action == 2) {
            DeleteProject(projectID, action);
        }
    }
    projectID = null;
}
function DeleteProject(projectID, action) {
    var grd = $telerik.findGrid("<%= rgProjects.ClientID %>", null);
    var masterTable = grd.get_masterTableView();
    // send the delete command with both the project id and the action to grid to process
    allowDelete = true; //
    masterTable.fireCommand("Delete", projectID + "?" + action);
}

Note that I use the allowDelete flag (page level javascript variable) to flag the ProjectGridCommand event to let the delete command pass I intend to call the delete command (because I called fireCommand).

However, fireCommand("Delete", ....) needs to have the arg be the rowIndex for the grid.  As it's currently coded, I get a server side error because of the improper argument type for the commandargs.  How can I pass the additional information back to the server side so that my delete command can process accordingly like this:

Private Sub rgProjects_DeleteCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rgProjects.DeleteCommand
    Dim projectID, deleteAction As String
    projectID = Left(e.CommandArgument, InStr(e.CommandArgument, "?") - 1)
    deleteAction = Mid(e.CommandArgument, InStr(e.CommandArgument, "?") + 1)
    Dim oProj As Project = PM.GetObject(New Project(projectID))
    Select Case CInt(deleteAction)
        Case 1 'disassociate
            For Each oWI As E2F.WorkItem In oProj.WorkItems
                Select Case oWI.Type
                    Case WorkItem.WIType.ComponentSectionWorkItem
                        DirectCast(oWI, BuildingBR.Component_Section_WorkItem).Project = Nothing
                    Case WorkItem.WIType.RoofSectionWorkItem
                        DirectCast(oWI, BuildingBR.RoofSectionWorkItem).Project = Nothing
                End Select
                PM.UpdateObject(oWI)
            Next
            PM.DeleteObject(oProj)
        Case 2 'delete
            For Each oWI As E2F.WorkItem In oProj.WorkItems
                PM.DeleteObject(oWI)
            Next
            PM.DeleteObject(oProj)
    End Select
    rgProjects.DataSource = Nothing
    rgProjects.Rebind()
End Sub

[Vasil]

Hi Lance,

You can fire your custom command, instead of delete command.

<script type="text/javascript">
    var projectID;

    function GetConfirmationMessage(itemIndex) {
        var wm = $telerik.findWindowManager("<%=RadWindowManager1.ClientID %>", null);
        var grid = $find("<%= RadGrid1.ClientID %>");
        projectID = itemIndex;
        wm.getWindowById("rwProjectActions").show();
    }

    function CloseProjectAction(action) {
        var wm = $telerik.findWindowManager("<%=RadWindowManager1.ClientID %>", null);
        wm.getWindowById("rwProjectActions").close(null);

        var grd = $telerik.findGrid("<%= RadGrid1.ClientID %>", null);
        var masterTable = grd.get_masterTableView();

        if (projectID != null) {
            if (action == 1) {
                masterTable.fireCommand("DeAssociate", projectID);
            }
            else if (action == 2) {
                masterTable.fireCommand("CustomDelete", projectID);
            }
        }
        projectID = null;
    }
</script>

On ItemDataBound, add onclick even, to the "delete" links. And then on ItemCommand, you can handle your custom delete commands and make further database manipulations.

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        LinkButton button = dataItem["DeleteColumn"].Controls[0] as LinkButton;
        button.Attributes["onclick"] = " GetConfirmationMessage('" + dataItem.ItemIndex + "'); return false;";
    }
}
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "CustomDelete")
    {
        int projectID = int.Parse(e.CommandArgument as string);
        //Do your delete here
    }

    if (e.CommandName == "DeAssociate")
    {
        int projectID = int.Parse(e.CommandArgument as string);
        //Do your De-Associate here
    }
}

<telerik:RadGrid ID="RadGrid1" ..... OnItemDataBound="RadGrid1_ItemDataBound" OnItemCommand="RadGrid1_ItemCommand">
    <MasterTableView...>
        .....
        <Columns>
            <telerik:GridButtonColumn Text="Delete" UniqueName="DeleteColumn"/>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Notice that the RadWindowManager1 is the same as yours.

Greetings,
Vasil
the Telerik team