New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Partial Ajaxification

Products:
Add to cartProductNameQuantityPerUnitUnitPriceUnitsInStock
 
123456
Page size:
 30 items in 6 pages
Tofu40 - 100 g pkgs.$23.2535
Genen Shouyu24 - 250 ml bottles$15.5039
Carnarvon Tigers16 kg pkg.$62.5042
Teatime Chocolate Biscuits10 boxes x 12 pieces$9.2025
Sir Rodney's Marmalade30 gift boxes$81.0040
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom



Shopping cart:
ProductNameQuantityPerUnitUnitPriceUnitsInCartTotal Price
     
No products added to the shopping cart.
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom

RadAjaxManager can AJAX-enable specific controls dynamically. Here, the ImageButtons are ajaxified intercepting the ItemCreated event hander of the grid.
Here is a code snippet showing how this is achieved:

         protected   void  RadGrid1_ItemCreated( object  sender, Telerik.Web.UI.GridItemEventArgs e) 
        { 
            if (e.Item is GridDataItem) 
            { 
                GridDataItem dataItem = e.Item as GridDataItem; 
                ImageButton ibtnAddToCart = (ImageButton)(dataItem["TemplateColumn1"]).FindControl("ibtnAddToCart"); 
                RadAjaxManager1.AjaxSettings.AddAjaxSetting(ibtnAddToCart, RadGrid2); //ajaxify the button 
            } 
        } 

When a user clicks an Image button, the corresponding item is added to the shopping cart (RadGrid2).

Both grids are AJAX-enabled with declaratively applied settings in the mark-up code. For further information, please refer to the Default.aspx section.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AjaxManager.ApplicationScenarios.PartialAjaxification.DefaultCS" Culture="en-US" UICulture="en-US" %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container" style="width: 876px">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="EmptyShoppingCart">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" DecoratedControls="Buttons"></telerik:RadFormDecorator>
        <h5>Products:</h5>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
            AllowSorting="True" GridLines="None" OnItemCreated="RadGrid1_ItemCreated" OnItemCommand="RadGrid1_ItemCommand"
            OnNeedDataSource="RadGrid1_NeedDataSource" PageSize="5">
            <PagerStyle AlwaysVisible="true" />
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="ProductID">
                <Columns>
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn1" HeaderText="Add to cart"
                        AllowFiltering="false">
                        <ItemStyle HorizontalAlign="Center"></ItemStyle>
                        <ItemTemplate>
                            <asp:ImageButton ID="ibtnAddToCart" runat="server" ImageUrl="images/addtocart.png"
                                AlternateText="Add to cart" CommandName="AddToCart"></asp:ImageButton>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
                        UniqueName="ProductName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="QuantityPerUnit"
                        SortExpression="QuantityPerUnit" UniqueName="QuantityPerUnit">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="UnitPrice" DataType="System.Decimal" HeaderText="UnitPrice"
                        SortExpression="UnitPrice" UniqueName="UnitPrice" DataFormatString="{0:C}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Units" DataType="System.Int32" HeaderText="UnitsInStock"
                        SortExpression="Units" UniqueName="Units" FooterAggregateFormatString="{0:C}">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
        <br />
        <br />
        <br />
        <h5>Shopping cart:</h5>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
            ShowFooter="true" AllowSorting="True" OnNeedDataSource="RadGrid2_NeedDataSource"
            PageSize="5">
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="ProductID">
                <NoRecordsTemplate>
                    No products added to the shopping cart.
                </NoRecordsTemplate>
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
                        UniqueName="ProductName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="QuantityPerUnit"
                        SortExpression="QuantityPerUnit" UniqueName="QuantityPerUnit">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="UnitPrice" DataType="System.Decimal" HeaderText="UnitPrice"
                        SortExpression="UnitPrice" UniqueName="UnitPrice" DataFormatString="{0:C}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Units" DataType="System.Int32" HeaderText="UnitsInCart"
                        SortExpression="Units" UniqueName="Units">
                    </telerik:GridBoundColumn>
                    <telerik:GridCalculatedColumn HeaderText="Total Price" UniqueName="TotalPrice" DataType="System.Double"
                        DataFields="UnitPrice, Units" Expression="{0}*{1}" Aggregate="Sum" DataFormatString="{0:C}"
                        FooterAggregateFormatString="Total : {0:C}">
                    </telerik:GridCalculatedColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

        <div style="padding-top: 5px; float: right">
            <asp:Button ID="EmptyShoppingCart" runat="server" Text="Empty Shopping cart" OnClick="EmptyShoppingCart_Click"></asp:Button>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance