Appearance and styling

You can use two different approaches to define the output format of the UniView control:

•Item templates

•A hierarchical transformation assigned through the Transformations property in the API

You can define the following item templates within the UniView tags:

Template Name	Description	Sample Value
AlternatingItemTemplate	Template used for alternating items.	<font color="#999999"><%# HTMLHelper.HTMLEncode( Convert.ToString(Eval("NodeAliasPath"))) %> </font>
FirstItemTemplate	Template for the first item on every level in the hierarchy. Only applied to levels that contain more than one item.
FooterTemplate	Template rendered at the end of every level (after the last item on the level). Can be used to close encapsulating elements from the HeaderTemplate.	</li> </ul>
HeaderTemplate	Template rendered at the beginning of every level (before the first item on the level). Allows you to visually separate or style individual levels.	<ul> <li>
ItemTemplate	Template used for all standard items, that are not covered by a specialized template (e.g. alternating items, first items).	<%# HTMLHelper.HTMLEncode( Convert.ToString(Eval("NodeAliasPath"))) %>
LastItemTemplate	Template for the last item on every level in the hierarchy. Only applied to levels that contain more than one item.
SeparatorTemplate	Template rendered between items on the same level. The UniView does not place the separator between items on different hierarchy levels (i.e. between a parent item and its child).	</li> <li>
SingleItemTemplate	Template applied in cases where there is only one item on a level in the hierarchy.

Displaying data using hierarchical transformations

The following example demonstrates how to use hierarchical transformations with the UniView control. The sample scenario displays a hierarchy of forum posts from the Kentico CMS database, based on the forum thread structure. You can use the same approach for any type of hierarchical data.

InfoBox_Note

Tip

The CMSUniView and QueryUniView controls allow you to use hierarchical transformations without writing custom code. However, the CMS controls can only display documents or other hierarchical Kentico CMS data.

The approach described below is primarily intended for displaying:

•External hierarchical data

•Customized or composite Kentico CMS data sources

1. Create a new Web form in your web project.

2. Add the UniView control onto the form:

<cms:UniView ID="UniViewForumPosts" runat="server" />

3. Switch to the web form's code behind file and add the following references:

using System.Data;

using CMS.Forums;
using CMS.Controls;
using CMS.GlobalHelper;
using CMS.SettingsProvider;
using CMS.PortalEngine;

4. Set up the UniView control in the web form's Page_Load method:

protected void Page_Load(object sender, EventArgs e)
{
// Loads a DataSet containing all forum posts, ordered according to the PostLevel and PostTime
DataSet forumPosts = ForumPostInfoProvider.GetForumPosts("", "PostLevel, PostTime", -1, "PostID, PostForumID, PostParentID, PostIDPath, PostLevel, PostSubject, PostText, PostTime");

// Checks that the DataSet isn't empty
if (!DataHelper.DataSourceIsEmpty(forumPosts))
{
// Creates a GroupedDataSource from the forumPosts DataSet
GroupedDataSource groupedForumPosts = new GroupedDataSource(forumPosts, "PostParentID", "PostLevel");

// Assigns the grouped data source to the UniView
UniViewForumPosts.DataSource = groupedForumPosts;

// Sets the display mode of the UniView
UniViewForumPosts.HierarchicalDisplayMode = HierarchicalDisplayModeEnum.Inner;

// Specifies the column that the data uses as an identifier (to determine parent-child relationships)
UniViewForumPosts.RelationColumnID = "PostID";

// Gets the hierarchical transformation from the system
TransformationInfo ti = TransformationInfoProvider.GetTransformation("CMS.Root.ForumPosts");

// Checks that the transformation exists
if (ti != null)
{
// Checks that the transformation is hierarchical
if (ti.TransformationIsHierarchical)
{
// Stores the structure of the hierarchical transformation into a HierarchicalTransformations object
HierarchicalTransformations transformation = new HierarchicalTransformations("PostID");
transformation.LoadFromXML(ti.TransformationHierarchicalXMLDocument);

// Assigns the hierarchical transformation to the UniView control

UniViewForumPosts.Transformations = transformation;
}
}

// Binds the UniView's data
UniViewForumPosts.DataBind();
}
}

5. Save the changes to the web form and its code behind file.

6. Define the hierarchical transformation in Kentico CMS (named CMS.Root.ForumPosts).

a.Go to Site Manager -> Development -> Document types.

b.Edit the Root document type.

c.Add a hierarchical transformation named ForumPosts on the Transformations tab.

d.Add 4 sub-transformations:

•Transformation type: Item transformation

•Document types: All (empty)

•Level: 0

•ASCX transformation code:

•Transformation type: Item transformation

•Document types: All (empty)

•Level: 1

•ASCX transformation code:

•Transformation type: Header transformation

•Level: All (-1)

•ASCX transformation code:

•Transformation type: Footer transformation

•Level: All (-1)

•ASCX transformation code:

</div>

7. Return to Visual Studio, right-click the web form in the Solution explorer and select View in Browser.

The page displays the forum posts according to the hierarchical transformation:

controls_clip0069

Help URL: http://devnet.kentico.com/docs/7_0/controls/index.html?uniview_appearance_and_styling.htm