NavigationBar Elements in ASP.NET AJAX NavigationBar Structure for ASP.NET AJAX
KT.UI NavigationBar control consists of a hierarchy of items, which means it displays in the mode of top root items and childe items. The items on child level will be exposed as long as the root item on the previous level is expanded. Here, we give the brief introductions to these two items.
- Root Items: Root Items mean the items at the top level, and these items are always visible on web page. We can set root items by using Items property of the navigation bar.
- Level Items: Each root item may have a set of child items, which can be called level items and child items. The children of the root items are always considered level 1 items. Children items can be set and added by using the Items property of the root item (PerNavigationBar.Items). Child items may have their own sets of child items. And children of level 1 items are considered level 2 items; thus, logically speaking, children of level 2 items are considered level 3 items; and so on.
Item properties for NavigationBar ASP.NET AJAX
We give a list below that contains the items and properties of NavigationBar. As long as users read carefully, you can be well informed of all of these important properties within web ASP.NET application.
- Enabled: this item offer the choices for enabling item or disabling item.
- Expanded: users can use this property to specify whether the item is expanded.
- PreventCollapse: users can use this item to define whether collapse the item once it is expanded.
- Selected: this can be used to customize whether the item is selected.
- IsSeparator: when set this property as true, users can add a line below the Item.
- ImageUrl: use this property to specify the image on the Item, when click by using mouse or when the item is collapsed or expanded, users can set different image.
- ImagePosition: use this attribute to set and change the position of the image in the navigation bar.
- Text: use this property to set and defined the text displaying on Item.
Sample ASPX Codes for Setting NavigationBar Properties
Please refer to following demo ASPX codes for set navigation bar root items and child items within ASP.NET programming project by using KT.UI Navigation Controls. For C# users, please link to: use C# codes to set NavigationBar properties.
<kettic:PerNavigationBar runat="server" ID="PerNavigationBar1" >
<Items>
<kettic:PerNavigationItem ImageUrl="../../../../Images/NavigationBar/Spring.jpg" Text="Spring"
Expanded="True">
<Items>
<kettic:PerNavigationItem runat="server" Text="Apricots" ImageUrl="../../../../Images/NavigationBar/Apricots.jpg" />
<kettic:PerNavigationItem runat="server" Text="Plums" ImageUrl="../../../../Images/NavigationBar/Plums.jpg" />
<kettic:PerNavigationItem runat="server" Text="Strawberries" ImageUrl="../../../../Images/NavigationBar/Strawberries.jpg" />
</Items>
</kettic:PerNavigationItem>
<kettic:PerNavigationItem ImageUrl="../../../../Images/NavigationBar/Summer.jpg" Text="Summer" >
<Items>
<kettic:PerNavigationItem runat="server" Text="Cantaloupe"
ImageUrl="../../../../Images/NavigationBar/Cantaloupe.jpg" />
<kettic:PerNavigationItem runat="server" Text="Mango"
ImageUrl="../../../../Images/NavigationBar/Mango.jpg" />
<kettic:PerNavigationItem runat="server" Text="Papaya"
ImageUrl="../../../../Images/NavigationBar/Papaya.jpg" />
</Items>
</kettic:PerNavigationItem>
<kettic:PerNavigationItem ImageUrl="../../../../Images/NavigationBar/Autumn.jpg" Text="Autumn" >
<Items>
<kettic:PerNavigationItem runat="server" Text="Apple"
ImageUrl="../../../../Images/NavigationBar/Apple.jpg" />
<kettic:PerNavigationItem runat="server" Text="Grapes" ImageUrl="../../../../Images/NavigationBar/Grapes.jpg" />
</Items>
</kettic:PerNavigationItem>
<kettic:PerNavigationItem Text="Winter" ImageUrl="../../../../Images/NavigationBar/Winter.jpg">
<Items>
<kettic:PerNavigationItem ImageUrl="../../../../Images/NavigationBar/Cane.jpg" Text="Cane" />
<kettic:PerNavigationItem ImageUrl="../../../../Images/NavigationBar/Citrus.jpg" Text="Citrus" />
<kettic:PerNavigationItem ImageUrl="../../../../Images/NavigationBar/Grapefruit.jpg" Text="Grapefruit" />
</Items>
</kettic:PerNavigationItem>
</Items>
</kettic:PerNavigationBar>
Following is the demo screenshot for setting NavigationBar.  | 
