ListView - DataGrouping

Car Image
Model: 147
Classification: Hatchback
Year: 2006
Fuel Type: Diesel
Booking Price: 55.91
Model: 147
Classification: Hatchback
Year: 2007
Fuel Type: Gasoline
Booking Price: 56.22
Model: 147
Classification: Hatchback
Year: 2011
Fuel Type: Gasoline
Booking Price: 63.79
Lower booking price: 55.91
Car Image
Model: A3
Classification: Hatchback
Year: 2003
Fuel Type: Gasoline
Booking Price: 51.05
Model: A3
Classification: Hatchback
Year: 2010
Fuel Type: Diesel
Booking Price: 64.16
Model: A4
Classification: Sedan
Year: 2008
Fuel Type: Diesel
Booking Price: 77.09
Model: Q7
Classification: SUV
Year: 2007
Fuel Type: Diesel
Booking Price: 85.14
Model: Q7
Classification: SUV
Year: 2012
Fuel Type: Diesel
Booking Price: 93.04
Lower booking price: 51.05
Car Image
Model: 535d
Classification: Sedan
Year: 2012
Fuel Type: Diesel
Booking Price: 82.35
Model: 320d
Classification: Sedan
Year: 2005
Fuel Type: Diesel
Booking Price: 65.21
Model: X3
Classification: SUV
Year: 2006
Fuel Type: Gasoline
Booking Price: 82.05
Model: 535d
Classification: Sedan
Year: 2010
Fuel Type: Diesel
Booking Price: 78.74
Model: 320d
Classification: Sedan
Year: 2007
Fuel Type: Diesel
Booking Price: 66.01
Lower booking price: 65.21
Car Image
Model: Evasion
Classification: MPV
Year: 2007
Fuel Type: Diesel
Booking Price: 70.74
Model: Evasion
Classification: MPV
Year: 2008
Fuel Type: Diesel
Booking Price: 77.25
Lower booking price: 70.74

Demo Configurator

Insert Box Position


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Using the DataGrouping with the RadListView, you could group the data source of the control according to one or more specified data fields.

In order to define the layout for each group in the control you should set separate data group templates in the DataGroupTemplate tag under each ListViewDataGroup. Option to access the calculated aggregates according to a predefined function is also available.

The RadListView DataGrouping functionality provides not only a way to arrange the items in a grouped way (as the basic grouping available) but render grouped items form the DataSource or in another words native DataSource grouping as the other data-bound controls like RadGrid provides.

You could take advantage of the following features of the DataGrouping functionality listed below:

  • Collection of data groups in the markup
  • Data field to group by for each data group
  • Optional aggregates by field and aggregate function
  • Nesting and hierarchical structures of the data groups and data items of the RadListView

Several new properties have been exposed for the DataGrouping functionality. One of them is the updated InsertItemPosition which provides extended enumaration and the isert item could be set BeforeDataGroups and AfterDataGroups

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Grouping.DataGrouping.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></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-container">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnResponseEnd="OnResponseEnd">
            <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" ID="rdf1" DecoratedControls="RadioButtons, Buttons, Textbox"
                DecorationZoneID="form1" Skin="Silk" EnableRoundedCorners="false" />
            <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" ItemPlaceholderID="DataGroupPlaceHolder3"
                InsertItemPosition="BeforeDataGroups" DataSourceID="SqlDataSource1" AllowMultiFieldSorting="True"
                AllowPaging="True" GroupAggregatesScope="AllItems" DataKeyNames="Classification">
                <ItemTemplate>
                    <div class="rlvI">
                        <div class="category model">
                            <span class="bold_text">Model: </span>
                            <%#Eval("Model")%>
                        </div>
                        <div class="category">
                            <span class="bold_text">Classification: </span>
                            <%#Eval("Classification")%>
                        </div>
                        <div class="category">
                            <span class="bold_text">Year: </span>
                            <%#Eval("Year")%>
                        </div>
                        <div class="category">
                            <span class="bold_text">Fuel Type: </span>
                            <%#Eval("Fuel")%>
                        </div>
                        <div class="category">
                            <span class="bold_text">Booking Price: </span>
                            <%#Eval("Price")%>
                        </div>
                        <div class="clearfix">
                        </div>
                    </div>
                </ItemTemplate>
                <LayoutTemplate>
                    <div class="insetButton">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnInitInsert" runat="server" Text="Insert Item" OnClick="btnInitInsert_Click"></telerik:RadButton>
                    </div>
                    <asp:Panel ID="DataGroupPlaceHolder2" runat="server">
                    </asp:Panel>
                    <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
                        Skin="Silk" PageSize="15" class="clearfix">
                        <Fields>
                            <telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev"></telerik:RadDataPagerButtonField>
                            <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="10"></telerik:RadDataPagerButtonField>
                            <telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last"></telerik:RadDataPagerButtonField>
                        </Fields>
                    </telerik:RadDataPager>
                </LayoutTemplate>
                <GroupSeparatorTemplate>
                </GroupSeparatorTemplate>
                <InsertItemTemplate>
                    <asp:Panel runat="server" ID="Panel1" DefaultButton="Button1">
                        <fieldset class="insert_form">
                            <table class="inser_table">
                                <colgroup>
                                    <col width="100px" />
                                    <col width="300px" />
                                </colgroup>
                                <tr>
                                    <td>BrandName:
                                    </td>
                                    <td class="inserInfo">
                                        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox3" runat="server" Width="215px" DataSourceID="SqlDataSource2"
                                            DataValueField="BrandName" SelectedValue='<%# Bind("BrandName") %>' DataTextField="BrandName">
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Model:
                                    </td>
                                    <td class="inserInfo">
                                        <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox11" runat="server" Text='<%# Bind("Model") %>' Width="215px"
                                            ValidationGroup="ProductGroupInsert">
                                        </telerik:RadTextBox>
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="TextBox11"
                                            ValidationGroup="ProductGroupInsert" ForeColor="Red" Text="*Enter Model"
                                            runat="server" Display="Dynamic">
                                        </asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Fuel:
                                    </td>
                                    <td class="inserInfo">
                                        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Width="215px" DataSourceID="SqlDataSource4"
                                            DataValueField="Fuel" SelectedValue='<%# Bind("Fuel") %>' DataTextField="Fuel">
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Classification:
                                    </td>
                                    <td class="inserInfo">
                                        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox2" runat="server" Width="215px" DataSourceID="SqlDataSource3"
                                            DataValueField="Classification" SelectedValue='<%# Bind("Classification") %>'
                                            DataTextField="Classification">
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Booking Price:
                                    </td>
                                    <td class="inserInfo">
                                        <telerik:RadNumericTextBox RenderMode="Lightweight" ID="TextBox3" runat="server" Skin="Silk" Text='<%# Bind("Price") %>'
                                            Width="90px">
                                        </telerik:RadNumericTextBox>
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" ControlToValidate="TextBox3"
                                            ValidationGroup="ProductGroupInsert" ForeColor="Red" Text="*Enter Price"
                                            runat="server" Display="Dynamic">
                                        </asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Year:
                                    </td>
                                    <td class="inserInfo">
                                        <telerik:RadNumericTextBox RenderMode="Lightweight" ID="TextBox4" runat="server" Skin="Silk" Text='<%# Bind("Year") %>'
                                            Width="90px" MinValue="1900" MaxValue="2020">
                                            <NumberFormat DecimalDigits="0" GroupSeparator="" />
                                        </telerik:RadNumericTextBox>
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" ControlToValidate="TextBox4"
                                            ValidationGroup="ProductGroupInsert" ForeColor="Red" Text="*Enter Year"
                                            runat="server" Display="Dynamic">
                                        </asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td class="inserInfo_last">
                                        <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" CommandName="PerformInsert" ValidationGroup="ProductGroupInsert"
                                            Text="Insert">
                                        </telerik:RadButton>
                                        <telerik:RadButton RenderMode="Lightweight" ID="Button2" runat="server" CommandName="Cancel" Text="Cancel"></telerik:RadButton>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </asp:Panel>
                </InsertItemTemplate>
                <DataGroups>
                    <telerik:ListViewDataGroup GroupField="BrandName" DataGroupPlaceholderID="DataGroupPlaceHolder2"
                        SortOrder="Ascending">
                        <DataGroupTemplate>
                            <asp:Panel runat="server" ID="Panel3" CssClass="dataGroup" GroupingText='<%# (Container as RadListViewDataGroupItem).DataGroupKey %>'>
                                <asp:Image ID="CarImage" runat="server" AlternateText="Car Image" CssClass="car_brand_img" ImageUrl='<%# "images/" + (Container as RadListViewDataGroupItem).DataGroupKey + ".png" %>' />
                                <asp:PlaceHolder runat="server" ID="DataGroupPlaceHolder3"></asp:PlaceHolder>
                                <asp:Label runat="server" ID="Label39" CssClass="groupFooter clearfix" Text='<%# "Lower booking price: " + (Container as RadListViewDataGroupItem).AggregatesValues["Price"].ToString() %>'>
                                </asp:Label>
                            </asp:Panel>
                        </DataGroupTemplate>
                        <GroupAggregates>
                            <telerik:ListViewDataGroupAggregate Aggregate="Min" DataField="Price" />
                        </GroupAggregates>
                    </telerik:ListViewDataGroup>
                </DataGroups>
            </telerik:RadListView>
        </telerik:RadAjaxPanel>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT [BrandName], [Model], [Classification], [Year], [Fuel], [Price] FROM [Cars]"
            InsertCommand="INSERT INTO [Cars] ([BrandName], [Model], [Classification], [Year], [Fuel], [Price], [RentedCount], [Doors], [Transmission]) VALUES (@BrandName, @Model, @Classification, @Year, @Fuel, @Price, @RentedCount, @Doors, @Transmission)">
            <InsertParameters>
                <asp:Parameter Name="BrandName" Type="String" />
                <asp:Parameter Name="Model" Type="String" />
                <asp:Parameter Name="Classification" Type="String" />
                <asp:Parameter Name="Year" Type="Int32" />
                <asp:Parameter Name="Fuel" Type="String" />
                <asp:Parameter Name="Price" Type="Double" />
                <asp:Parameter Name="RentedCount" Type="Int32" DefaultValue="1" />
                <asp:Parameter Name="Doors" Type="Int32" DefaultValue="4" />
                <asp:Parameter Name="Transmission" Type="String" DefaultValue="Manual" />
            </InsertParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT DISTINCT [BrandName] FROM [Cars]"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT DISTINCT [Classification] FROM [Cars]"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT DISTINCT [Fuel] FROM [Cars]"></asp:SqlDataSource>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList runat="server" ID="RadioButtonList1" Label="Insert Box Position " AutoPostBack="true"
                    OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                    <asp:ListItem Text="Before data groups" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="After data groups"></asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?