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

Grouping Client-Side API

Enter a value in the RadAutoCompleteBox which is populated with all the data from the grid in order to expand only the selected items by using the RadGrid Grouping Client-Side API.


Country  City  ContactName  
CountryCityContact NameContact Title
Country: Argentina
City: Buenos Aires
ContactName: Patricio Simpson
   ArgentinaBuenos AiresPatricio SimpsonSales Agent
ContactName: Sergio Gutiérrez
   ArgentinaBuenos AiresSergio GutiérrezSales Representative
ContactName: Yvonne Moncada
   ArgentinaBuenos AiresYvonne MoncadaSales Agent
Country: Austria
City: Graz
ContactName: Roland Mendel
   AustriaGrazRoland MendelSales Manager
City: Salzburg
ContactName: Georg Pipps
   AustriaSalzburgGeorg PippsSales Manager
Country: Belgium
City: Bruxelles
ContactName: Catherine Dewey
   BelgiumBruxellesCatherine DeweySales Agent
City: Charleroi
ContactName: Pascale Cartrain
   BelgiumCharleroiPascale CartrainAccounting Manager
Country: Brazil (Showing 8 of 9 items. Group continues on the next page.)
City: Campinas
ContactName: André Fonseca
   BrazilCampinasAndré FonsecaSales Associate
City: Resende
ContactName: Paula Parente
   BrazilResendePaula ParenteSales Manager
City: Rio de Janeiro
ContactName: Bernardo Batista
   BrazilRio de JaneiroBernardo BatistaAccounting Manager
ContactName: Janete Limeira
   BrazilRio de JaneiroJanete LimeiraAssistant Sales Agent
ContactName: Mario Pontes
   BrazilRio de JaneiroMario PontesAccounting Manager
City: Sao Paulo (Showing 3 of 4 items. Group continues on the next page.)
ContactName: Anabela Domingues
   BrazilSao PauloAnabela DominguesSales Representative
ContactName: Aria Cruz
   BrazilSao PauloAria CruzMarketing Assistant
ContactName: Lúcia Carvalho
   BrazilSao PauloLúcia CarvalhoMarketing Assistant

RadGrid exposes a grouping Client-Side API which could allow users to programatically expand or collapse certain items or entire levels. All available functions in the grouping API are listed below:

  • expandGroup(rowElement) - expands a group by specified row element
  • collapseGroup(rowElement) - collapses a group by specified row element
  • toggleGroup(rowElement) - switches the current state of a group item, either expands or collapses
  • expandAllGroups() - expands all groups expandAllGroups(level) - expands all groups at a certain level
  • collapseAllGroups() - collapses all groups collapseAllGroups(level) - collapses all groups at a certain level
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Functionality.Grouping.GroupingClientSideAPI.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <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" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <qsf:MessageBox runat="server" Type="Info" Icon="Info" Style="line-height: 36px;">
        Enter a value in the <b>RadAutoCompleteBox</b> which is populated with all the data from the grid in order
        to expand only the selected items by using the <b>RadGrid Grouping Client-Side API</b>.
    </qsf:MessageBox>
    <div class="demo-container">
        <telerik:RadAutoCompleteBox RenderMode="Lightweight" ID="RadAutoCompleteBox1" runat="server"
            EmptyMessage="Enter a value to search in the grid. Example: 'Sales Agent'"
            DataTextField="Text"
            OnClientLoad="demo.AutoCompleteLoaded"
            OnClientEntryAdded="demo.EntryAdded"
            OnClientEntryRemoved="demo.EntryRemoved" Width="400px">
        </telerik:RadAutoCompleteBox>
        <br />
        <br />
        <telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server"
                AllowSorting="True" AllowPaging="True" PageSize="15" ShowGroupPanel="True" AutoGenerateColumns="true"
                GridLines="None">
                <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>
                <PagerStyle Visible="false"></PagerStyle>
                <MasterTableView GroupLoadMode="Client" TableLayout="Fixed" EnableGroupsExpandAll="true">
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="Country" FieldName="Country"></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="Country"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="City" FieldName="City"></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="City"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="ContactName" FieldName="ContactName"></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="ContactName"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                </MasterTableView>
                <ClientSettings AllowDragToGroup="True">
                    <ClientEvents OnGridCreated="demo.GridCreated" />
                </ClientSettings>
                <GroupingSettings ShowUnGroupButton="true" />
            </telerik:RadGrid>
        </telerik:RadAjaxPanel>
        <br />
        <telerik:RadButton RenderMode="Lightweight" ID="btnPostBack" runat="server" Text="Refresh page" Width="120px"></telerik:RadButton>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT Country, City, ContactName, ContactTitle FROM Customers ORDER BY Country"
        runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance