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

6 posts, 0 answers
  1. Marios
    Marios avatar
    5 posts
    Member since:
    Jul 2016

    Posted 01 Jul Link to this post

    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;}";
            }

  2. Marios
    Marios avatar
    5 posts
    Member since:
    Jul 2016

    Posted 01 Jul Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 Jul Link to this post

    Hi Marios,

    I suggest you review the possible approaches from these demos:


    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Marios
    Marios avatar
    5 posts
    Member since:
    Jul 2016

    Posted 01 Jul Link to this post

    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?
  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 Jul Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Marios
    Marios avatar
    5 posts
    Member since:
    Jul 2016

    Posted 01 Jul Link to this post

    Thank you very much, that worked! I was breaking my head on this a couple of days now :D
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017