Grid

Controls

SharePoint Web Parts

Editor
Grid
ListView
Scheduler

Support Resources

Integration Examples

Q2 2013 released 06/11/2013
next demo
view source rate / review silk skin
get trial buy now
All Controls

Grid

Rate this demo

Thank you for your post!
See also: Skin Exchange Portal Visual Style Builder

Grid - Outlook-style Grouping
Received  
  ReceivedFromFolder nameSize
Data pager
123
 Item 1 to 20 of 52
Page:of 3 Page size:

Received from date: Sunday, March 28, 2010
  3/28/2010EWarner@web.comDrafts2
  3/28/2010NBullard@web.comDeleted Items8
  3/28/2010TSholl@web.comDeleted Items9
  3/28/2010SWard@web.comDeleted Items65
  3/28/2010GTomlinson@web.comDrafts6

Received from date: Saturday, March 27, 2010
  3/27/2010FDuncan@web.comDeleted Items54
  3/27/2010KAnn@web.comDrafts2
  3/27/2010LSanborn@web.comDrafts87
  3/27/2010SBonner@web.comDeleted Items4378
  3/27/2010JGreenawalt@web.comJunk E-mail5678
  3/27/2010CCox@web.comJunk E-mail234
  3/27/2010EOmara@web.comJunk E-mail5

Received from date: Friday, March 26, 2010
  3/26/2010ARodacker@web.comInbox856
  3/26/2010FHeckendora@web.comJunk E-mail3
  3/26/2010ACatherina@web.comInbox3
  3/26/2010ISaline@web.comInbox23
  3/26/2010BAtkinson@web.comOutbox5
  3/26/2010JQueer@web.comSent Items89
  3/26/2010CPeters@web.comInbox23
  3/26/2010BNehling@web.comOutbox645

This example represents Outlook® -style grouping implemented with Telerik RadGrid.
  • Using the set of properties, which control group-by behavior and appearance (like RadGrid.ShowGroupHeader)
  • Controlling the style of GroupHeaderItem, which visually divides the rows by groups
  • Setting the style of GroupPanel and its Items, which display the currently grouped fields and can change the sorting-order of the grouped columns
Note that grouping is not supported with simple data-binding (calling DataBind()). See the Simple data binding demo from the Populating with data section for more info about the limitations of this binding mode.
C# VB
Show code in new window Demo isolation steps 
<%@ Page Language="c#"  %>

<%@ 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>
    <title>Outlook-style grouping in ASP.NET AJAX GridView | RadGrid demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" PageSize="20"
        AllowSorting="True" AllowMultiRowSelection="True" AllowPaging="True" ShowGroupPanel="True"
        AutoGenerateColumns="False" GridLines="none">
        <PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>
        <MasterTableView Width="100%">
            <GroupByExpressions>
                <telerik:GridGroupByExpression>
                    <SelectFields>
                        <telerik:GridGroupByField FieldAlias="Received" FieldName="Received" FormatString="{0:D}"
                            HeaderValueSeparator=" from date: "></telerik:GridGroupByField>
                    </SelectFields>
                    <GroupByFields>
                        <telerik:GridGroupByField FieldName="Received" SortOrder="Descending"></telerik:GridGroupByField>
                    </GroupByFields>
                </telerik:GridGroupByExpression>
            </GroupByExpressions>
            <Columns>
                <telerik:GridBoundColumn SortExpression="Received" HeaderText="Received" HeaderButtonType="TextButton"
                    DataField="Received" DataFormatString="{0:d}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="From" HeaderText="From" HeaderButtonType="TextButton"
                    DataField="From">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="FolderName" HeaderText="Folder name" HeaderButtonType="TextButton"
                    DataField="FolderName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="Size" HeaderText="Size" HeaderButtonType="TextButton"
                    DataField="Size">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True">
            <Selecting AllowRowSelect="True"></Selecting>
            <Resizing AllowRowResize="True" AllowColumnResize="True" EnableRealTimeResize="True"
                ResizeGridOnColumnResize="False"></Resizing>
        </ClientSettings>
        <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>
    </telerik:RadGrid>
    <br />
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Mails" runat="server">
    </asp:SqlDataSource>
    </form>
</body>
</html>

Get Started Easily Explore our help resources to get up to speed with the RadControls faster.

See Pricing Check out the offers. Purchase an individual suite or treat yourself to one of our bundles.

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