NavigationBar Item Expanding and Collapsing| KT.UI for ASP.NET AJAX

NavigationBar Item Expanding and Collapsing in ASP.NET AJAX

Home > How to > NavigationBar Expanding and Collapsing Items

KT.UI PerNavigationBar component collection is well developed to offer users the complete server side support for the operation of PerNavigationBar expanding and collapsing with perfect visualizing effect.

In this page, we will discuss with users on following topics of PerNavigationBar controls within ASP.NET application:

How to set the three expanding modes (including MultipleExpandedItems, SingleExpandedItem and FullExpandedItem) of PerNavigationBar library with ASPX sample codes
How to set the collapsing effect of PerNavigationBar controls by using online demo ASP.NET codes

ExpandMode Within ASP.NET Project

Technically speaking, the ExpandMode property of PerNavigationBar components has effects on the way the navigation bar responds when users click and select navigation items that have child items. And, ExpandMode has three supportable settings: MultipleExpandedItems (which is the default choice for expanding), SingleExpandedItem and FullExpandedItem.

How to Set MultipleExpandedItems with ASPX Codes

When users choose and set ExpandMode as "MultipleExpandedItems", you can expand more than one item at the same time. And the navigation bar displays the value of its overall height of all the level items of root items.

Please refer to following ASPX demo codes to set MultipleExpandedItems expanding mode within web ASP.NET AJAX project. Also, a sample image for this operation is appended for better interpretation.


<kettic:PerNavigationBar ID="PerNavigationBar1" runat="server" xpandMode=" MultipleExpandedItems" Height="300px">
</kettic:PerNavigationBar>

How to Set SingleExpandedItem with ASPX Codes

When users choose and define ExpandMode as "SingleExpandedItem", the navigation bar shows the one selected item at a time. The height of the navigation bar is the overall height of the level items of the selected root item.

Please use following ASPX sample codes to set SingleExpandedItem type within ASP.NET desktop application. And we give the screenshot for this expanding mode.


<kettic:PerNavigationBar ID="PerNavigationBar1" runat="server" xpandMode=" SingleExpandedItem" Height="300px">
</kettic:PerNavigationBar>

How to Set FullExpandedItem with ASPX Codes

When users choose and define ExpandMode as "FullExpandedItem", only one item can be expanded at a time just like "SingleExpandedItem" mentioned above. And in this expanding mode, the height of navigation bar is always decided and specified by its Height property.

Please check ASPX demo codes below for setting ExpandMode as "FullExpandedItem" within ASP.NET project. For better visualizing effect, see the sample screenshot.


<kettic:PerNavigationBar ID="PerNavigationBar1" runat="server" xpandMode=" FullExpandedItem" Height="300px">
</kettic:PerNavigationBar>

AllowCollapseAllItems within ASP.NET Project

Users can choose to collapse all the expanded items by selecting "CollapseAllItems" mode, no matter the the ExpandMode is set as SingleExpanded Item or FullExpandedItem.

ASPX demo codes for setting CollapseAllItems within ASP.NET application. And the corresponding sample screenshot is appended.


<kettic:PerNavigationBar ID="PerNavigationBar1" runat="server" xpandMode="FullExpandedItem" AllowCollapseAllItems="true"   Height="300px">
</kettic:PerNavigationBar>

How to Set Animation Within ASP.NET Project

The animation property of PerNavigationItem consists of ExpandAnimation and CollapseAnimation. And the animation can be specified by setting attributes: Type and Duration, by which users can set the animation effect and displaying time when collapse navigation bar. See following ASPX codes to set animation.


<kettic:PerNavigationBar ID="PerNavigationBar1" runat="server" ExpandMode="FullExpandedItem"Height="300px">
                <ExpandAnimation Duration="500" Type="InCubic" />
                <CollapseAnimation Duration="500" Type="OutQuint" />
</kettic:PerNavigationBar>

If you are developed and end users using C# programming language, please go to: how to set PerNavigationBar expanding and collapsing with C# codes.

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