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

Basic grouping

Employees group
Contact Photo

Eduardo Saavedra
Contact Photo

André Fonseca
Contact Photo

Howard Snyder
Contact Photo

Mario Pontes
Employees group
Contact Photo

Carlos Hernández
Contact Photo

Yoshi Latimer
Contact Photo

Patricia McKenna
No Employee to display

This demo illustrates how you can achieve ListView-like grouping of items with RadListView. To display data in groups RadListView has the listed properties set:

  • GroupItemCount
  • GroupPlaceHolderID
  • ItemPlaceHolderID

And the following templates defined:

  • LayoutTemplate
  • GroupTemplate
  • GroupSeparatorTemplate
  • EmptyItemTemplate

The GroupItemCount property is set to the number of items displayed in each group. The GroupPlaceHolderID is the ID of the control which is used to hold all groups of the RadListView control. And the ItemPlaceHolderID is the ID of the control holding each RadListView item.

The LayoutTemplate defines how the groups should be displayed in the RadListView and the GroupTemplate defines the group structure and look. Additionally, you can declare the GroupSeparatorTemplate which is to be shown between the RadListView groups. The EmptyItemTemplate defines the 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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Grouping.BasicGrouping.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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="Fieldset" />
    <div class="demo-container">
        <telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" runat="server" RenderMode="Lightweight" 
            ItemPlaceholderID="EmployeesContainer" GroupPlaceholderID="GroupsEmployeesContainer"
            GroupItemCount="4">
            <LayoutTemplate>
                <asp:PlaceHolder ID="GroupsEmployeesContainer" runat="server"></asp:PlaceHolder>
            </LayoutTemplate>
            <GroupTemplate>
                <fieldset class="groupFieldset">
                    <legend>Employees group</legend>
                    <table>
                        <tr>
                            <td>
                                <asp:PlaceHolder ID="EmployeesContainer" runat="server"></asp:PlaceHolder>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </GroupTemplate>
              <EmptyItemTemplate>
                    <div class="employeeEmptyTemplateWrapper">
                        <img src="images/EmtpyItemImage.jpg" width="120px" height="150px" alt="No Employee to display" class="image"
                            title="No Employee to display"/>
                    </div>
                </EmptyItemTemplate>
            <ItemTemplate>
                <div class="employeeitemTemplateWrapper">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo" CssClass="image"
                                    ToolTip="Contact Photo" Width="120px" Height="150px" ResizeMode="Fit" DataValue='<%# Eval("Photo") == DBNull.Value? new System.Byte[0]: Eval("Photo") %>'></telerik:RadBinaryImage><br />
                                <br />
                                <span class="image"><%#Eval("ContactName")%><br /></span>
                                <br />
                            </td>
                        </tr>
                    </table>
                </div>
            </ItemTemplate>
        </telerik:RadListView>
        <div class="clearFix">
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT top 7 * FROM [CustomerPhotos]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance