Telerik blogs
Coming with the Q3 2013 release of RadControls for ASP.NET AJAX we are glad to present you with a new optimized data grouping feature for the Telerik’s ASP.NET ListView.  Its versatile set of configurations allows you to present your data in well-defined, customizable groups.  In a few easy steps you can define the layout and shape your data in endless variations to amaze your users. The great options for defining layout do not fall behind the rich set of features accompanying the data grouping - you can have nested groups, sorting, paging and even custom aggregates providing you with all the tools needed to create a flexible data-oriented application.

Keep reading this blog post to find out how to harness the full power of the data grouping feature of the ListView control.

Defining the layout

The layout of the groups as any other part of RadListView is defined via templates, in this case – the DataGroupTemplate. Below we’ll start with a simple scenario with one level grouping and gradually build up a more complex structure demonstrating the full capabilities of the Data Grouping.

One-level grouping

The main element of the structure is the ListViewDataGroup which represents a single level of grouping in the control. The most important setting of each ListViewDataGroup is its DataGroupTemplate, which basically defines the layout and content within the group. The DataGroups collection holds all the groups in the ListView. We’ll start with one level grouping and a single data group that can be defined like that:
<DataGroups>
    <telerik:ListViewDataGroup GroupField="FirstName"       DataGroupPlaceholderID="DataGroupPlaceHolder1">
        <DataGroupTemplate>
            <asp:Panel runat="server" ID="ItemPlaceHolder1"></asp:Panel>
        </DataGroupTemplate>
    </telerik:ListViewDataGroup>
</DataGroups>

Note two important elements of the above configuration:
  1. The DataGroupPlaceholderID property that specifies where exactly the data group will be rendered in the whole LayoutTemplate of the control;
  2. The innermost panel with ID ItemPlaceHolder1 which is basically the place holder where the actual data items of the control will be rendered.
Thus the whole configuration of one level grouping in the RadListView control would look like the following:

<telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="ItemPlaceHolder1" OnNeedDataSource="RadListView1_NeedDataSource">
<LayoutTemplate>
   <asp:Panel runat="server" ID="Panel1" GroupingText="Layout Template" Width="600px">
              <asp:Panel runat="server"
                  
ID="DataGroupPlaceHolder1">
     </asp:Panel>
   </asp:Panel>
</LayoutTemplate>
<DataGroups>
 <telerik:ListViewDataGroup                                  GroupField="FirstName"                    DataGroupPlaceholderID="DataGroupPlaceHolder1">
   <DataGroupTemplate>
    <asp:Pane runat="server"              ID="Panel2" GroupingText="First Group Level">
    <asp:Panel runat="server"
                        ID="ItemPlaceHolder1">
                </
asp:Panel>
    </asp:Panel>
   </DataGroupTemplate>
 </telerik:ListViewDataGroup>
</DataGroups>
<ItemTemplate>
   <p>
     <%#Eval("FirstName")%>
   </p>
</ItemTemplate>
</telerik:RadListView>

Multi-level grouping

The multi-level grouping definition is similar to the single level with the exception that the placeholders for the inner data groups are defined in the DataGroupTemplates of their parent groups, thus defining the whole hierarchical structure. Below is a short example with three-level grouping with highlighted connecting placeholder elements:
<telerik:RadListView ID="RadListView1" runat="server"
 ItemPlaceholderID="ItemPlaceHolder1"                        OnNeedDataSource="RadListView1_NeedDataSource">
    <LayoutTemplate>
        <asp:Panel runat="server" ID="Panel1"
             GroupingText="Layout Template" Width="600px">
            <asp:Panel runat="server"
                  ID="DataGroupPlaceHolder1">
                </
asp:Panel>
        </asp:Panel>
    </LayoutTemplate>
    <DataGroups>
        <telerik:ListViewDataGroup 
            GroupField="FirstName"       
           DataGroupPlaceholderID="DataGroupPlaceHolder1">
            <DataGroupTemplate>
                <asp:Panel runat="server" ID="DataGroupPlaceHolder2"></asp:Panel>
            </DataGroupTemplate>
        </telerik:ListViewDataGroup>
        <telerik:ListViewDataGroup GroupField="Title" DataGroupPlaceholderID="DataGroupPlaceHolder2">
            <DataGroupTemplate>
                <asp:Panel runat="server" ID="DataGroupPlaceHolder3"></asp:Panel>
            </DataGroupTemplate>
        </telerik:ListViewDataGroup>
        <telerik:ListViewDataGroup GroupField="City" DataGroupPlaceholderID="DataGroupPlaceHolder3">
            <DataGroupTemplate>
                <asp:Panel runat="server" ID="ItemPlaceHolder1"></asp:Panel>
            </DataGroupTemplate>
        </telerik:ListViewDataGroup>
    </DataGroups>
    <ItemTemplate>
        <p>
            <%#Eval("FirstName")%>
        </p>
    </ItemTemplate>
</telerik:RadListView>

Note that in this case only the uppermost group has a DataGroupPlaceHolder in the layout template of the control, while the innermost one holds the ItemPlaceHolder where the data items will be rendered. This effectively defines the whole three-level hierarchy.


Server-side API and important properties

  • DataGroupKey property containing the value of the data field for the current group, so for example if you are grouping by the Category field and the first category is “Beverages” you can access this value through the DataGroupKey property.
  • FieldName the name of the field we are grouping by – in the current example “Category”
  • AggregateValues - dictionary collection which we saw in the previous section.
The ListView also gained some new properties and improvements:
  • GroupAggregatesScope - property specifying the scope of data items on which the aggregates will be calculated, thus you can choose to have the aggregated results for all the items in the datasource or only for the items on the current page
  • InsertItemPosition - this property has two new options: BeforeDataGroups and AfterDataGroups – specifying respectively the new positions where the insert item will be rendered.

Performance optimizations

At the end we come to the one of the biggest concerns when working with large volumes of data – performance. And yet here the grouping also stands up to the highest expectations with greatly optimized internal logic for handling large amounts of data without slowdown. The whole grouping is heavily based on dynamic LINQ queries giving it the capabilities to work fast and efficiently with thousands of records.

This concludes the main presentation of the data grouping feature of RadListView. Do not hesitate to check out our online demo and help topic for further information. We’re looking forward to hearing your feedback on this new feature in the comments below or our Feedback Portal.

Telerik ASP.Net AJAX Controls - Download a trial version


About the Author

Marin Georgiev

is a software developer in one of Telerik's ASP.NET AJAX Teams. Since he joined the company in 2010 he's been working on different client-side features and extending the mobile support of the controls. His interests include mobile and web development as well as integration with Sharepoint 2010.

Comments

Comments are disabled in preview mode.