Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Client-Side Inline Delete

Next database reset in 1 hours, 6 minutes, 22 seconds
Click PostBack button to see that the state is preserved :  

OrderIDProductIDUnitPriceQuantityDiscount 
12345678910...
Page size:
select
 1494 items in 150 pages
1025041$7.70100
1025051$42.40350.15
1025065$16.80150.15
1025122$16.8060.05
1025157$15.60150.05
1025165$16.80200
1025220$64.80400.05
1025233$2.00250.05
1025260$27.20400
1025331$10.00200


  • In addition to the server/ajax delete feature of Telerik RadGrid there is already client-side delete available which allows you to erase records without making a round trip to the server. This optimizes the performance and the source data is automatically refreshed on the subsequent post to the server. The user experience is improved because the delete action is done client-side and the table presentation is updated immediately.

    In order to trigger client-side delete action you need to add GridClientDeleteColumn to the set of columns. This column is special type of GridButtonColumn designated for the task. It has ConfirmText property which can be assigned like with the default GridButtonColumn.

    The client-side delete feature supports:
    • NoRecordsTemplate (including hierarchy)
    • Hierarchy (no matter client/server or ajax)
    • The editing data functionality will remain unaffected
    • Automatic deletes with data source control under ASP.NET 2.0
    • Manual delete with ability to cancel the delete action in the corresponding DeleteCommand/ItemCommand handler (by setting e.Canceled to true)

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.GridExamplesVBNET.Client.ClientDelete.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag2" />
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowDbResetTimer="true" />
        <!-- content start -->
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:PostBack ID="PostBack1" runat="server" />
        <br />
        <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" GridLines="None"
            AllowPaging="True" AllowSorting="True" AutoGenerateColumns="false" AllowAutomaticDeletes="True"
            runat="server">
            <MasterTableView TableLayout="Fixed" DataKeyNames="OrderID,ProductID">
                <Columns>
                    <telerik:GridNumericColumn DataField="OrderID" HeaderText="OrderID" />
                    <telerik:GridNumericColumn DataField="ProductID" HeaderText="ProductID" />
                    <telerik:GridNumericColumn DataField="UnitPrice" HeaderText="UnitPrice" DataFormatString="{0:c}" />
                    <telerik:GridNumericColumn DataField="Quantity" HeaderText="Quantity" />
                    <telerik:GridNumericColumn DataField="Discount" HeaderText="Discount" />
                    <telerik:GridClientDeleteColumn ConfirmTextFields="OrderID" ConfirmTextFormatString="Are you sure you want to delete details for order {0}?"
                        HeaderStyle-Width="35px" ButtonType="ImageButton" ImageUrl="Delete.gif" />
                </Columns>
            </MasterTableView>
            <PagerStyle Mode="NextPrevAndNumeric" />
        </telerik:RadGrid>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Order Details] WHERE [OrderID] = @OrderID AND [ProductID] = @ProductID"
            SelectCommand="SELECT * FROM [Order Details]">
            <DeleteParameters>
                <asp:Parameter Name="OrderID" Type="Int32" />
                <asp:Parameter Name="ProductID" Type="Int32" />
            </DeleteParameters>
        </asp:SqlDataSource>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                document.forms[0].onsubmit = function () {
                    var hasDeletedItems = $find("<%= RadGrid1.ClientID %>")._deletedItems.length > 0;
                    if (hasDeletedItems) {
                        if (!confirm("There are client-side deletes! Would you like to save these changes to the server?")) {
                            $find("<%= RadGrid1.ClientID %>")._deletedItems = [];
                            $find("<%= RadGrid1.ClientID %>").updateClientState();
                        }
                    }
                }
            </script>
        </telerik:RadCodeBlock>
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451