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.
<
DataGroups
>
<
telerik:ListViewDataGroup
GroupField
=
"FirstName"
DataGroupPlaceholderID
=
"DataGroupPlaceHolder1"
>
<
DataGroupTemplate
>
<
asp:Panel
runat
=
"server"
ID
=
"ItemPlaceHolder1"
></
asp:Panel
>
</
DataGroupTemplate
>
</
telerik:ListViewDataGroup
>
</
DataGroups
>
<
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
>
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.
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.