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

UI Grouping

RadListView supports ListView-like grouping for its items. You can easily achieve displaying of data in groups with RadListView by setting the properties listed:

  • GroupItemCount—the number of items you want to display in each group.
  • GroupPlaceHolderID—the ID of the control which is used to hold all groups of the RadListView control.
  • ItemPlaceHolderID—the ID of the control holding each RadListView item.

In addition you need to define the following Templates:

  • LayoutTemplate—the general ListView template that holds all groups and their items. You can add layout here (like begining/closing a table, headers, pagers).
  • GroupTemplate—the template around each set of items defined by GroupItemCount.
  • GroupSeparatorTemplate—the content that separates one UI group from the other.
  • EmptyItemTemplate—template for an empty item.

For grouping according to a field in the data source, see Data Grouping in RadListView.

Example with detailed descriptions

<telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" runat="server"
    ItemPlaceholderID="EmployeesContainer" GroupPlaceholderID="GroupsEmployeesContainer"

When item grouping is enabled for RadListView, the LayoutTemplate defines how the groups should be displayed in the RadListView. Note that here is the place of the group placeholder control.

                <asp:PlaceHolder ID="GroupsEmployeesContainer" runat="server" />

Create the group structure and look by defining the GroupTemplate. Note that here is the place for the item placeholder control.

                <fieldset style="float: left; width: 330px;">
                    <legend>Employees group</legend>
                                <asp:PlaceHolder ID="EmployeesContainer" runat="server" />

Additionally, you can declare the GroupSeparatorTemplate which is to be shown between the RadListView groups. It can be used to emphasize the division of the groups.

                <hr />

The EmptyItemTemplate defines a layout for the non-existing items of a group. It is displayed in case the group has less items than the GroupItemCount in the empty places left.

                <div style="float: left; width: 160px; height: 120px">
                    <img src="Img/EmtpyItemImage.jpg" width="120px" height="150px" alt="No Employee to display"
                        title="No Employee to display" />

See Also

In this article