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

    Grouping

    BeveragesTotal Price: $47
    • Chai

      Chai

      $18

    • Chang

      Chang

      $19

    • Aniseed Syrup

      Aniseed Syrup

      $10


    DessertsTotal Price: $93
    • Chef Anton's Cajun Seasoning

      Chef Anton's Cajun Seasoning

      $22

    • Grandma's Boysenberry Spread

      Grandma's Boysenberry Spread

      $25

    • Northwoods Cranberry Sauce

      Northwoods Cranberry Sauce

      $40

    • Queso Manchego La Pastora

      Queso Manchego La Pastora

      $6


    MealsTotal Price: $200
    • Chef Anton's Gumbo Mix

      Chef Anton's Gumbo Mix

      $21

    • Uncle Bob's Organic Dried Pears

      Uncle Bob's Organic Dried Pears

      $30

    • Mishi Kobe Niku

      Mishi Kobe Niku

      $97

    • Ikura

      Ikura

      $31

    • Queso Cabrales

      Queso Cabrales

      $21


    The demo shows how to apply group setting to the data source and retrieve the grouped data. This is done through the GroupExpressions collection:
    <GroupExpressions>
       <telerik:ClientDataSourceGroupExpression FieldName="Name" SortOrder="Asc">
       </telerik:ClientDataSourceGroupExpression>
    </GroupExpressions>
    • DefaultCS.aspx
    • scripts.js
    • styles.css
    <%@ Page Language="C#" AutoEventWireup="true"  %>
     
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="styles.css" rel="stylesheet" />
        <script type="text/javascript" src="scripts.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-containers">
            <div class="demo-container">
                <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
                    <script type="text/javascript">
                        var dataSource;
                        Sys.Application.add_load(function () {
                            dataSource = $find('<%= RadClientDataSource1.ClientID %>');
                        });
                    </script>
                </telerik:RadCodeBlock>
                <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
                    <DataSource>
                        <WebServiceDataSourceSettings ServiceType="OData">
                            <Select Url="https://demos.telerik.com/aspnet-ajax/Services/SampleODataService.svc/Products" />
                        </WebServiceDataSourceSettings>
                    </DataSource>
                    <Schema>
                        <Model ID="ProductID">
                            <telerik:ClientDataSourceModelField FieldName="ProductName" DataType="String" />
                            <telerik:ClientDataSourceModelField FieldName="UnitPrice" DataType="Number" />
                            <telerik:ClientDataSourceModelField FieldName="Category" DataType="String" />
                        </Model>
                    </Schema>
                    <GroupExpressions>
                        <telerik:ClientDataSourceGroupExpression FieldName="Category">
                            <Aggregates>
                                <telerik:ClientDataSourceAggregate Aggregate="Sum" Field="UnitPrice" />
                            </Aggregates>
                        </telerik:ClientDataSourceGroupExpression>
                    </GroupExpressions>
                    <ClientEvents OnChange="dataSourceChange" />
                </telerik:RadClientDataSource>
                <div class="demo-section">
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance