BasicUniView

The BasicUniView control displays items from a data source based on specified templates. Provides support for displaying data in a hierarchical structure from grouped data sources.

You can use the BasicUniView with any bindable data source – not only Kentico data and objects.

Getting started

The following is a step-by-step tutorial that shows how to display all CMS.MenuItem pages from the sample Corporate Site in a hierarchical structure using the BasicUniView control:

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

2. Drag the BasicUniView control from the toolbox onto the form.

3. Add the following code marked by the BasicUniView templates comments between the <cms:BasicUniView> tags:

   Copy

   
   
   
    <cms:BasicUniView ID="BasicUniView1" runat="server">
   
        <%-- BasicUniView templates -------------------------------------------------------------- --%>    
   
        <ItemTemplate>
            <li>        
                <%# HTMLHelper.HTMLEncode(Convert.ToString(Eval("NodeName"))) %>
                <cms:SubLevelPlaceHolder runat="server" ID="plcSub" />
            </li>
        </ItemTemplate>
   
        <AlternatingItemTemplate>
            <li>    
                <font color="#999999">    
                    <%# HTMLHelper.HTMLEncode(Convert.ToString(Eval("NodeName"))) %>
                </font>
                <cms:SubLevelPlaceHolder runat="server" ID="plcSub" />    
            </li>        
        </AlternatingItemTemplate>
   
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
   
        <FooterTemplate>
            </ul>
        </FooterTemplate>
   
        <%-- BasicUniView templates -------------------------------------------------------------- --%>        
   
    </cms:BasicUniView> 
   
   
    

   This sets the templates used when displaying the menu items. The control uses inline code to insert the values of items into the template. This process is repeated for all records in the data source.

   The SubLevelPlaceHolder specifies where exactly the control inserts child levels in the output code. For items that have descendants in the hierarchy, the control renders the child level instead of the placeholder (including the header and footer template for the new level).

4. Switch to the web form’s code behind and add the following references:

   Copy

   
   
   
    using System.Data;
   
    using CMS.DocumentEngine;
    using CMS.Helpers;
    using CMS.Base;
   
   
    

5. Add the following code the Page_Load method:

   Copy

   
   
   
    // Creates a DataSet containing all menu item pages in the system
    DataSet ds = DocumentHelper.GetDocuments("CMS.MenuItem").Path("/", PathTypeEnum.Children).OrderBy("NodeLevel, NodeOrder");
   
    // Checks that the DataSet isn't empty
    if (!DataHelper.DataSourceIsEmpty(ds))
    {
        // Creates a GroupedDataSource from the ds DataSet
        GroupedDataSource gpd = new GroupedDataSource(ds, "NodeParentID", "NodeLevel");
   
        // Specifies the column that the data uses as an identifier (to determine parent-child relationships)
        this.BasicUniView1.RelationColumnID = "NodeID";
   
        // Binds the DataSet to the BasicUniView control
        this.BasicUniView1.DataSource = gpd;
        this.BasicUniView1.DataBind();
    }
   
   
    

   This code reads pages from the database, saves them in a DataSet and then groups them according to the NodeID of their parent page and determines their level in the hierarchy according to their NodeLevel. The grouped data source is then assigned to the BasicUniView control.

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

7. Right-click the web form in the Solution explorer and select View in Browser.

The resulting page displays a hierarchical list of pages.

Configuration

You can set the following properties for the BasicUniView control:

Appearance and styling

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

• Item templates (inherited from UniView)
• A hierarchical transformation assigned through the Transformations property in the API (see UniView - Displaying data using hierarchical transformations)

You can define the following templates:

<li>
<font color="#999999">
<%# Eval("NodeName") %>
</font>
<cms:SubLevelPlaceHolder runat="server" ID="plcSub" />
</li>

</ul>

<ul>

<li>
<%# Eval("NodeName") %>
<cms:SubLevelPlaceHolder runat="server" ID="plcSub" />
</li>

Setting the location of sublevels

When displaying hierarchical data, you can add a placeholder that specifies the position of sublevels inside the code of item templates:

<cms:SubLevelPlaceHolder runat="server" ID="plcSub" />

For items that have descendants in the hierarchy, the placeholder is replaced by the child level under the given item (including the header and footer for the new level). If you do not add the sublevel placeholder, the system automatically renders child levels after the code of parent items.

You can add the placeholder into any type of item template (Item, AlternatingItem, FirstItem, LastItem, SingleItem).

Note: To use the sublevel placeholder, the HierarchicalDisplayMode property of the control must be set to Inner (this is the default state).