Confirm Delete Issue

3 posts, 0 answers
  1. Mark
    Mark avatar
    28 posts
    Member since:
    Jan 2014

    Posted 06 Jun 2018 Link to this post

    I am attempting to place a confirm delete prompt message on a RadButton in a GridTemplateColumn.  Depending on the browser, I am getting mixed results, none of which are acceptable.

    In Edge and Chrome, Pressing the delete button pops the message up, but pressing Ok or Cancel will pop the message up second time immedately, and pressing Ok or Cancel on the second message will perform the action desired (Cancel will close message and do nothing, Ok will fire DeleteCommand on server side)

    In IE11, pressing the Ok or Cancel will show the confirm message only once.  Ok will run the DeleteCommand routine as expected.  However, Cancel will ignore the cancel and ALSO run the DeleteCommand routine.  

    My guess is whatever is causing the issue to show a double-message in Edge or Chrome is being ignored in IE and it just fires the delete command regardless of what button was pressed on the confirm message.

    Here are some code snippets:

    GRID:

        <telerik:RadGrid OnItemCreated="RadGrid1_ItemCreated" ID="RadGrid1" runat="server" Skin="Simple" AllowPaging="True" AllowSorting="true" >
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="True" SaveScrollPosition="true" ScrollHeight="415px"></Scrolling>
            </ClientSettings>
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="CapitalProjectID" ClientDataKeyNames="CapitalProjectID" TableLayout="Fixed"
                Width="100%" CommandItemDisplay="Top" PageSize="100" AllowPaging="true" PagerStyle-AlwaysVisible="true" >
                <Columns>
                    <%--<telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="RecordStatus" HeaderStyle-Width="3%"  />--%>
                    <telerik:GridTemplateColumn HeaderStyle-Width="3%">
                        <ItemTemplate>
                            <asp:Image ID="RecordStatus" runat="server" ImageUrl="/images/spacer.gif" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <%--<telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="PartnerStatus" HeaderStyle-Width="3%"  />--%>
                    <telerik:GridTemplateColumn HeaderStyle-Width="3%">
                        <ItemTemplate>
                            <asp:Image ID="PartnerStatus" runat="server" ImageUrl="/images/spacer.gif" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="cpNumber" HeaderText="Project Number" HeaderStyle-Width="15%" />
                    <telerik:GridBoundColumn DataField="cpStatus" HeaderText="Status" HeaderStyle-Width="8%" />
                    <telerik:GridBoundColumn DataField="SchoolName" HeaderText="School" HeaderStyle-Width="20%" />
                    <telerik:GridBoundColumn DataField="cpName" HeaderText="Project Name" HeaderStyle-Width="25%" />
                    <telerik:GridBoundColumn DataField="CPPartnershipProject" HeaderText="Partnership" HeaderStyle-Width="9%" />
                    <telerik:GridTemplateColumn UniqueName="TemplateEditColumn" HeaderStyle-Width="15%">
                        <ItemTemplate>
                            <telerik:RadButton runat="server" ID="EditButton" Text="EDIT" Skin="ARButton" Width="40px" EnableEmbeddedSkins="false" RenderMode="Lightweight" Visible="true"  />
                            <telerik:RadButton runat="server" ID="DeleteButton" Text="DELETE" CommandName="Delete" Skin="ARButton" Width="50px" EnableEmbeddedSkins="false" RenderMode="Lightweight" Visible="true"  />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="CapitalProjectID" HeaderText="ID" ReadOnly="True"
                        SortExpression="CapitalProjectID" UniqueName="CapitalProjectID" Display="false" >
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CPProjectStatus" HeaderText="Status" Display="false" />
                    <telerik:GridBoundColumn DataField="ShowHandshake" HeaderText="Status" Display="false" />
                </Columns>
                <CommandItemTemplate>
                    <div style="vertical-align: text-bottom; padding: 5px 5px;">
                        <asp:Table ID="Table1" runat="server" Width="100%">
                            <asp:TableRow>
                                <asp:TableCell HorizontalAlign="Left"><asp:LinkButton ID="lnkAddNew" runat="server" OnClientClick="ShowInsertForm();"><img style="border:0px;vertical-align:middle;" alt="" src="/images/AddRecord.png"/>&nbsp;New Project</asp:LinkButton></asp:TableCell>
                                <asp:TableCell HorizontalAlign="Left"><asp:LinkButton ID="lnkFilter" runat="server" OnClientClick="FilterForm();"><img style="border:0px;vertical-align:middle;" alt="" src="/images/filter.gif"/>&nbsp;Filter List</asp:LinkButton></asp:TableCell>
                                <asp:TableCell HorizontalAlign="Right"><asp:LinkButton ID="lnkRefresh" runat="server" CommandName="RebindGrid"><img style="border:0px;vertical-align:middle;" alt="" src="/images/Refresh.png"/>&nbsp;Refresh</asp:LinkButton></asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </div>
                </CommandItemTemplate>
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="true"></Selecting>
                <ClientEvents OnRowDblClick="RowDblClick"></ClientEvents>
            </ClientSettings>
        </telerik:RadGrid>

     

    SERVER SIDE:

        Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles RadGrid1.ItemCreated
            If TypeOf e.Item Is GridDataItem Then
                    Dim deleteButton As RadButton = DirectCast(e.Item.FindControl("DeleteButton"), RadButton)
                    Dim msg As String = "'Are you sure you want to delete this project ?'"
                    If Not e.Item.DataItem Is Nothing Then
                            msg = [String].Format("'Are you sure you want to delete {0} ?'", DirectCast(e.Item.DataItem, ARKAPP.BusinessLogicLayer.CapitalProject).CPNumber)
                    End If
                    msg = "if (!confirm(" & msg & ")) {return false;}"
                    deleteButton.Attributes("onclick") = msg
            End If
        End Sub

     

        Protected Sub RadGrid1_DeleteCommand(ByVal source As Object, ByVal e As GridCommandEventArgs) Handles RadGrid1.DeleteCommand
            Try
                Dim iProjectID As Integer = DirectCast((DirectCast(e.Item, GridDataItem)).GetDataKeyValue("CapitalProjectID"), Integer)
                SqlHelper.ExecuteNonQuery(System.Configuration.ConfigurationManager.AppSettings(ARKAPP.Web.[Global].CfgKeyConnString), "sp_WA_Del_CapitalProject", iProjectID)
            Catch ex As Exception
                Dim sMsg As String = "ERROR DELETING PROJECT FROM GRID: " & ex.Message
                Document.DeleteLog(sMsg, 0, 0)
                ShowErrorMessage(ex.Message)
            End Try
        End Sub

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5355 posts

    Posted 07 Jun 2018 Link to this post

    Hello Mark,

    The following demo shows how to confirm the click on a RadButton in several ways, so you need to take one of those approaches, the provided code is suitable for a standard asp:Button only: https://demos.telerik.com/aspnet-ajax/button/examples/confirm/defaultcs.aspx

    For your convenience I am attaching here the simplest example with a browser confirm as a reference point.

    The sample can be tweaked in a variety of ways - you can use a RadConfirm instead, you can use hidden fields or other data-attributes to store data, or even the client-side data-key collections of the grid. Alternatively, you can use a standard button that the generic confirmation cna work with and style it as needed, considering how you are already styling the RadButton with your own styles - it may well be easier to create a few rules of your own than override already existing stylesheets.


    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Mark
    Mark avatar
    28 posts
    Member since:
    Jan 2014

    Posted 07 Jun 2018 Link to this post

    Good catch.  I did convert a Asp button to a radbutton. 

    That solution worked great!

    Thanks for your assistance.

Back to Top