How to add confirmation dialog to a delete button inside listview/update panel?

[Marios]

I have the following code and I'm trying to add a confirmation dialog to the delete button. No matter what I tried I couldn't manage to get the dialog to fire. The latest method I used is this one which I found in a, admittedly, very old thread from this forum. Any ideas?

.aspx file

 

<telerik:RadListView ID="RadListView1" runat="server" DataSourceID="CompNotesSqlDataSource" >
            <ItemTemplate>
               
            <ul>
                <li>
                    <asp:Label ID="TimeLabel" runat="server" Text="Date/Time:"></asp:Label>
                    <asp:Label ID="TimeText" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "NoteDate","") %>'></asp:Label> <br />
                    <asp:Label ID="Label19" runat="server" Text="Company:"></asp:Label>
                    <asp:Label ID="FullNameLabel" runat="server" Text='<%# Eval("Description") %>' />
                    <br />
                    <asp:Label ID="Label20" runat="server" Text="Notes:"></asp:Label>
                    <asp:Label ID="RankLevelLabel" runat="server" Text='<%# Eval("Comments") %>' />
                    <br />
                    </li>
                

                <asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1">
                    <ContentTemplate>
                       <%--<telerik:RadButton ID="btndelete" CommandArgument='<%# Eval("Id")%>' OnCommand="btndelete_Command" runat="server" Text="Delete"></telerik:RadButton>--%>
                        <telerik:RadButton ID="btndelete" OnClientClick='<%# confirmDelete( Eval("Id").ToString() ) %>' CommandArgument='<%# Eval("Id")%>' OnCommand="btndelete_Command" runat="server" Text="Delete"></telerik:RadButton>
                        <telerik:RadButton id="btnedit" CommandArgument='<%# Eval("Id")%>' OnCommand="btnedit_Command" runat="server" text="Edit"></telerik:RadButton>                        
                    </ContentTemplate>    
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="btndelete" EventName="Command" />        
                        <asp:AsyncPostBackTrigger ControlID="btnedit" EventName="Command" />        
                    </Triggers>
                </asp:UpdatePanel>                                  
            </ul>
             
            </ItemTemplate>
        </telerik:RadListView>

 

----------------------------------

.cs file

 

        public string confirmDelete(string Name)
        {
            return @"javascript:if(!confirm('This action will delete the "
               + Name
               + @". Are you sure?')){return false;}";
        }

[Marios]

Also tried the solution from the documentation but the delete button still doesn't trigger a confirmation dialog: http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/delete-records/confirmation-dialogs

[Marin Bratanov]

Hi Marios,

I suggest you review the possible approaches from these demos:

• http://demos.telerik.com/aspnet-ajax/button/examples/confirm/defaultcs.aspx
• http://demos.telerik.com/aspnet-ajax/window/examples/confirmserverclicks/defaultcs.aspx

Regards,

Marin Bratanov
Telerik

[Marios]

The issue is, as you can see, I am using the onCommand method and pass eval("id") result using commandArgument. I couldn't manage to achieve this with an onClick event. Any pointers?

[Marin Bratanov]

Hello,

The RadButton API will initiate the proper postback with the proper arguments. Here is a basic POC:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
<telerik:RadButton ID="btnedit" CommandArgument='someArg' OnCommand="btnedit_Command" runat="server" Text="Edit" OnClientClicking="StandardConfirm"></telerik:RadButton>
<telerik:RadButton ID="btnedit2" CommandArgument='otherArg' OnCommand="btnedit_Command" runat="server" Text="Edit" OnClientClicking="RadConfirm"></telerik:RadButton>
<script>
    function StandardConfirm(sender, args) {
        args.set_cancel(!window.confirm("Are you sure you want to submit the page?"));
    }

    function RadConfirm(sender, args) {
        var callBackFunction = Function.createDelegate(sender, function (shouldSubmit) {
            if (shouldSubmit) {
                //initiate the origianal postback again
                this.click();
            }
        });

        var text = "Are you sure you want to submit the page?";
        radconfirm(text, callBackFunction, 300, 200, null, "RadConfirm");
        //always prevent the original postback so the RadConfirm can work, it will be initiated again with code in the callback function
        args.set_cancel(true);
    }
</script>

protected void btnedit_Command(object sender, CommandEventArgs e)
{
    Response.Write(e.CommandArgument);
}

Regards,

Marin Bratanov
Telerik

[Marios]

Thank you very much, that worked! I was breaking my head on this a couple of days now :D