Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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:
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
<%@ 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> <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>