NavigationBar Templates| UI Control for ASP.NET AJAX, C#, VB.NET

NavigationBar Templates in ASP.NET

Home > How to > NavigationBar Template

KT.UI Navigation Controls for ASP.NET AJAX are extremely easy to use and simple to configure. If you want to set navigation skin, you can customize the navigation appearance objects by adding custom images, using CSS classes, or creating custom skins. However, if you want to embed other HTML controls, such as HTML markup, ASP.NET server controls as well as other third-party controls, you must use NavigationBar templates.

To be specific, at design time, NavigationBar components support three basic types of item templates: HeaderTemplate, ItemTemplate, and ContentTemplate.

Here, we list the quick navigation of NavigationBar templates in this tutorial page:

How to use ASP.NET codes to set HeaderTemplate by using NavigationBar controls
How to use ASP.NET codes to set ItemTemplate with the support of NavigationBar components
How to use ASP.NET demo codes to set ContentTemplate by using NavigationBar library

What Is HeaderTemplate of Navgiation Control

For HeaderTemplate, the content appears in the navigation item immediately in the header.

What Is ItemTemplate of Navgiation Control

For ItemTemplat, the content appears in the navigation item immediately below its text. The item cannot be merged nor expanded. Users should know that if the item does not have any text, then the contents of the Item Template become the item itself.

We offer two types of Item Templates: global NavigationBar template that can affect the appearance of all items and individual item templates that can affect the appearance of a single navigation item.

What Is ContentTemplate of Navgiation Library

As to ContentTemplate, the content renders as a sub-group of the target navigation item. Unlike ItemTemplate, the item can be expanded and collapsed as if it had sub navigation items. Also, if the item does not have any text content, the contents of the Content Template will become the item itself and cannot be expanded/collapsed. If you have the global template and content template on some item at the same time, the content template will be used with preference.

How to Set HeaderTemplate for ASP.NET AJAX

Users can refer to following demo ASPX codes to access the control for HeaderTemplate, ItemTemplate and ContentTemplate of a NavigationBar control.


<kettic:PerNavigationBar runat="server" ID="PerPanelBar1" Width="750" Height="240"
        Skin="Forest" ExpandMode="SingleExpandedItem">
        <Items>
            <kettic:PerNavigationItem Expanded="True" CssClass="top-offers">
               <ItemTemplate>
               </ItemTemplate>
                <HeaderTemplate>
                    <div class="special-offer">
                        <label>
                            Sping</label><input style="float: right" type="button" id="btnOne" value="watch"
                                onclick="WatchSourceImage(this,null);" />
                    </div>
                </HeaderTemplate>
                <ContentTemplate>
                    <p>
                        <img src="../../../../Images/NavigationBar/Spring_Big.jpg" alt="Spring" style="margin: 0 auto" width="100"  height="100" /><br/>
                       Spring is the first quarter of the year
                       
                    </p>
                </ContentTemplate>
            </kettic:PerNavigationItem>
            <kettic:PerNavigationItem Expanded="false">
                <HeaderTemplate>
                    <div class="special-offer">
                        <label>
                            Summer</label><input style="float: right;" type="button" value="watch" id="btnTwo"
                                onclick="WatchSourceImage(this,null);" />
                    </div>
                </HeaderTemplate>
                <ContentTemplate>
                    <p>
                        <img src="../../../../Images/NavigationBar/Summer_Big.jpg" alt="Summer" style="margin: 0 auto" width="100" height="100" /><br/>
                        Summer is the second quarter of the year                       
                    </p>
                    
                </ContentTemplate>
            </kettic:PerNavigationItem>
            <kettic:PerNavigationItem Expanded="false">
                <HeaderTemplate>
                    <div class="special-offer">
                        <label>
                            Autumn</label><input style="float: right;" type="button" value="watch" id="btnThree"
                                onclick="WatchSourceImage(this,null);" />
                    </div>
                </HeaderTemplate>
                <ContentTemplate>
                    <p>
                        <img src="../../../../Images/NavigationBar/Autumn_Big.jpg" alt="Autumn" style="margin: 0 auto" width="100" height="100" /><br/>
                        Autumn is the third quarter of the year  
                    </p>
                
                </ContentTemplate>
            </kettic:PerNavigationItem>
             <kettic:PerNavigationItem Expanded="false">
                <HeaderTemplate>
                    <div class="special-offer">
                        
                            <label>Winter</label><input style="float: right;" type="button" value="watch" id="btnFour"  onclick="WatchSourceImage(this,null);" />
                               
                    </div>
                </HeaderTemplate>
                <ContentTemplate>
                    <img src="../../../../Images/NavigationBar/Winter_Big.jpg" alt="Winter" style="margin: 0 auto" width="100" height="100" /><br/>
                      Winter is the third quarter of the year 
                        
                </ContentTemplate>
            </kettic:PerNavigationItem>
        </Items>
    </kettic:PerNavigationBar>

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control

ASP.NET AJAX NavigationBar UI Control

Overview Getting Started Elements

Templates

Features

Data Binding

ObjectDataSource Data Database Data XML Data

Client Prpgramming

Item Event

Server Programming