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 Group Load

Country  
 CountryCityCompany NameContact NameContact Title
12345
 Page 1 of 5, items 1 to 20 of 91.

Country: Argentina
 ArgentinaBuenos AiresCactus Comidas para llevarPatricio SimpsonSales Agent
 ArgentinaBuenos AiresOcéano Atlántico Ltda.Yvonne MoncadaSales Agent
 ArgentinaBuenos AiresRancho grandeSergio GutiérrezSales Representative

Country: Austria
 AustriaGrazErnst HandelRoland MendelSales Manager
 AustriaSalzburgPiccolo und mehrGeorg PippsSales Manager

Country: Belgium
 BelgiumBruxellesMaison DeweyCatherine DeweySales Agent
 BelgiumCharleroiSuprêmes délicesPascale CartrainAccounting Manager

Country: Brazil
 BrazilSao PauloComércio MineiroPedro AfonsoSales Associate
 BrazilSao PauloFamilia ArquibaldoAria CruzMarketing Assistant
 BrazilCampinasGourmet LanchonetesAndré FonsecaSales Associate
 BrazilRio de JaneiroHanari CarnesMario PontesAccounting Manager
 BrazilRio de JaneiroQue DelíciaBernardo BatistaAccounting Manager
 BrazilSao PauloQueen CozinhaLúcia CarvalhoMarketing Assistant
 BrazilRio de JaneiroRicardo AdocicadosJanete LimeiraAssistant Sales Agent
 BrazilSao PauloTradição HipermercadosAnabela DominguesSales Representative
 BrazilResendeWellington ImportadoraPaula ParenteSales Manager

Country: Canada
 CanadaTsawassenBottom-Dollar MarketsElizabeth LincolnAccounting Manager
 CanadaVancouverLaughing Bacchus Wine CellarsYoshi TannamuriMarketing Assistant
 CanadaMontréalMère PaillardeJean FresnièreMarketing Assistant

Country: Denmark (Showing 1 of 2 items. Group continues on the next page.)
 DenmarkKobenhavnSimons bistroJytte PetersenOwner

 

  • You can control where the grouping will be handled using the GroupLoadMode property of the GridTableView instance. There are two options:
    - Server-side - GridTableView.GroupLoadMode.Server - this is the default behavior. Groups are expanded after postback to the server for example:

    <MasterTableView GroupLoadMode="Server">

    - Client-side - GridTableView.GroupLoadMode.Client - Groups will be expanded client-side and no postback will be performed.

    <MasterTableView GroupLoadMode="Client">

    and set the ClientSettings -> AllowGroupExpandCollapse attribute to true:

    <ClientSettings AllowGroupExpandCollapse="True">

    This example demonstrates Outlook� - style grouping implemented with Telerik RadGrid client-side Expand/Collapse of groups.

Source Code

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

    <%@ 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"></telerik:HeadTag>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB"></telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <!-- content start -->
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" PageSize="20"
                AllowSorting="True" AllowPaging="True" ShowGroupPanel="True" AutoGenerateColumns="False"
                GridLines="None">
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <MasterTableView Width="100%" GroupLoadMode="Client" TableLayout="Fixed">
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="Country" FieldName="Country"></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="Country"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <telerik:GridBoundColumn SortExpression="Country" HeaderText="Country" HeaderButtonType="TextButton"
                            DataField="Country">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="City" HeaderText="City" HeaderButtonType="TextButton"
                            DataField="City">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company Name" HeaderButtonType="TextButton"
                            DataField="CompanyName">
                            <HeaderStyle Width="32%" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                            DataField="ContactName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="ContactTitle" HeaderText="Contact Title"
                            HeaderButtonType="TextButton" DataField="ContactTitle">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings AllowGroupExpandCollapse="True" ReorderColumnsOnClient="True" AllowDragToGroup="True"
                    AllowColumnsReorder="True">
                </ClientSettings>
                 <GroupingSettings ShowUnGroupButton="true" />
            </telerik:RadGrid>
            <br />
    <asp:Button ID="btnPostBack" CssClass="button" runat="server" Text="Refresh page"
    Width="120px"></asp:Button>&nbsp;
            <br />
            <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers"
                runat="server"></asp:SqlDataSource>
            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </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