This is a migrated thread and some comments may be shown as answers.

Confirm Delete Issue

2 Answers 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 06 Jun 2018, 04:53 PM

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 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 07 Jun 2018, 12:47 PM
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.
0
Mark
Top achievements
Rank 1
answered on 07 Jun 2018, 02:25 PM

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

That solution worked great!

Thanks for your assistance.

Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Mark
Top achievements
Rank 1
Share this question
or