ListView - Basic grouping

Employees group
Contact Photo

Ana Trujillo

Contact Photo

Antonio Moreno

Contact Photo

Thomas Hardy

Contact Photo

Christina Berglund

Employees group
Contact Photo

Hanna Moos

Contact Photo

Frédérique Citeaux

Contact Photo

Martín Sommer

No Employee to display
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <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"
                <asp:PlaceHolder ID="GroupsEmployeesContainer" runat="server"></asp:PlaceHolder>
                <fieldset class="groupFieldset">
                    <legend>Employees group</legend>
                                <asp:PlaceHolder ID="EmployeesContainer" runat="server"></asp:PlaceHolder>
                    <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 class="employeeitemTemplateWrapper">
                    <table cellpadding="0" cellspacing="0">
                                <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 />
        <div class="clearFix">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT top 7 * FROM [CustomerPhotos]"></asp:SqlDataSource>

Find Assistance

Help Us Improve

Was this example helpful?