SiteMap allows you to add layouts to different node levels. There are two kinds of layouts:

• List: This layout allows you to display the nodes in columns. You can define the number of columns tha appear in a layout by changing the ListLayout.RepeatColumns property.
• Flow: This layout allows you to display the nodes in one single line, separated by a separator. You can change the separator by modifying the SeparatorText property.

This topic demonstrates how to change the layout of Level0 and Level1 nodes.

In the Designer

Complete the following steps to change the layout of Level0 ( Default Level ) in Design View.

1. Open SiteMap Tasks Menu and select Edit Nodes. This opens the C1SiteMap Designer Form.
2. In the C1SiteMap Designer Form, select C1SiteMap1 and set DefaultLevelSetting.Layout to List.
3. Set DefaultLevelSetting.ListLayout.RepeatColumns to 2.

Complete the following steps to change the layout of Level1 in Design View.

1. In the C1SiteMap Designer Form, click the ellipsis button (...) next to LevelSettings property to open the C1SiteMapLevelSettings Collection Editor.
2. Click the Add button to add a new level setting.
3. On the right hand side, set Level to 1, Layout to Flow and SeparatorText to ' , '.
4. Click OK to close the C1SiteMapLevelSettings Collection Editor and then click OK again to close the C1SiteMap Designer Form.

In Source View

Add the following markup within the <cc1:C1SiteMap></cc1:C1SiteMap> tags, to change the layout of Level0 ( Default Level ) in Source View.

<DefaultLevelSetting SeparatorText="||" Level="0" Layout="List">
        <ListLayout RepeatColumns="2" />
    </DefaultLevelSetting>

Add the following markup within the <cc1:C1SiteMap></cc1:C1SiteMap> tags, to change the layout of Level1 in Source View.

<LevelSettings>
                <cc1:C1SiteMapLevelSetting Layout="Flow" Level="1" SeparatorText=",">
        </cc1:C1SiteMapLevelSetting>
        </LevelSettings>

In Code

Add the following code to the Page_Load event, to change the layout of the Default Level in code.

To write code in C#

C1SiteMap1.DefaultLevelSetting.SeparatorText = ",";
C1SiteMap1.DefaultLevelSetting.Level = 0;
C1SiteMap1.DefaultLevelSetting.Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.List;
C1SiteMap1.DefaultLevelSetting.ListLayout.RepeatColumns = 2;

To write code in VB

C1SiteMap1.DefaultLevelSetting.SeparatorText = ","
C1SiteMap1.DefaultLevelSetting.Level = 0
C1SiteMap1.DefaultLevelSetting.Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.List
C1SiteMap1.DefaultLevelSetting.ListLayout.RepeatColumns = 2

Add the following code to the Page_Load event, to change the layout of Level1 in code.

To write code in C#

// Add a new LevelSetting
C1SiteMap1.LevelSettings.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapLevelSetting());
// Customize LevelSetting
C1SiteMap1.LevelSettings[0].Level = 1;
C1SiteMap1.LevelSettings[0].Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.Flow;
C1SiteMap1.LevelSettings[0].SeparatorText = ",";

To write code in VB

' Add a new LevelSetting
C1SiteMap1.LevelSettings.Add(New C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapLevelSetting())
' Customize LevelSetting
C1SiteMap1.LevelSettings(0).Level = 1
C1SiteMap1.LevelSettings(0).Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.Flow
C1SiteMap1.LevelSettings(0).SeparatorText = ","

What You've Accomplished

When you run the project, notice that the nodes at Level0 appear as a List, in two columns, whereas the nodes at Level1 appear in a Single Line (Flow), separated by a comma ' , ', as shown in the image below.