latest Post

ASP.net Navigation Controls Basics

(1) Menu
The ASP.NET menu control allows you to develop both statically and dynamically displayed menus for your ASP.NET Web pages. You can configure the contents of the Menu control directly in the control, or you can specify the contents by binding the control to a data source.
Without writing any code, you can control the appearance, orientation, and content of an ASP.NET Menu control. In addition to the visual properties exposed by the control, the control supports ASP.NET control skins and themes.

Static Display and Dynamic Display
The Menu control has two modes of display: static and dynamic. Static display means that the Menu control is fully expanded all the time. The entire structure is visible, and a user can click on any part. In a dynamically displayed menu, only the portions you specify are static, while their child menu items are displayed when the user holds the mouse pointer over the parent node.

i)Static Display Behavior:
You can control static display behavior by using the StaticDisplayLevel property of the Menu control. The StaticDisplayLevels property indicates how many levels to display statically from the root of the menu. For example, if StaticDisplayLevels is set to 3, your menu will be expanded to statically display its first three levels. The minimum static display level is 1, and the control will throw an exception if the value is set to 0 or a negative number.

ii)Dynamic Display Behavior
The MaximumDynamicDisplayLevels property specifies how many levels of dynamically appearing menu nodes should be displayed after the static display level. For example, if your menu has a static level of 3 and a dynamic level of 2, the first three levels of your menu would be statically displayed, while the next two levels would be dynamic.

If MaximumDynamicDisplayLevels is set to 0, no menu nodes will be dynamically displayed. If the
MaximumDynamicDisplayLevels is set to a negative number, an exception is thrown.

Defining Menu Content
You can define content for the Menu control in two ways: by adding individual MenuItem objects
(declaratively or programmatically), and by data binding the control to an XML data source.

Adding Menu Items Manually
You can add individual menu items to the control by specifying them in the Items property. The Items property is a collection of MenuItem objects. The following example shows the declarative markup for a Menu control with three items, each of which has two child items:
<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="3">

<Items>
<asp:MenuItem Text="File" Value="File">
<asp:MenuItem Text="New" Value="New"></asp:MenuItem>
<asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Edit" Value="Edit">
<asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
<asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="View" Value="View">
<asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
<asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
< /asp:MenuItem>
</Items>
</asp:Menu>

(2) Sitemap Path Control
The Sitemap Path control is used to add a site map (breadcrumbs) to the website. A site map is a way to present all folders and pages of the website.
Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of <span/> tag. Generally current page reference is not rendered as a link, however, it can be made clickable by setting RenderCurrentNodeAsLink=true.

Following are some important properties that are very useful.
PathSeparator --Gets or sets Path separator text. (By default it is >.)
NodeStyle --Sets the style of all nodes that will be displayed.
CurrentNodeStyle --Sets the style on node that represent the current page.
RootNodeStyle --Sets the style on the absoulte root node.
PathSeparatorStyle --Sets the style of path separator.

Example of Sitemap Path:
Home >> About >> About Company

(3) Tree View Control
The TreeView control is an object model in ASP.Net which allows creation of nodes dynamically. It will have the Root, Parent and Leaf.
The TreeView control has properties and events. It has some characteristics.
TreeView node can navigate to some other pages 
The images and properties can be set to the nodes
It can have the lines, checkbox and images
It can set dynamically expand/collapse
The nodes can be created on demand
The sample treeview code.

<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode Value="Child1" PopulateOnDemand="true" ShowCheckBox="true" Expanded="True" Text="1">
<asp:TreeNode Value="Grandchild1" Text="A" />
<asp:TreeNode Value="Grandchild2" Text="B" />
</asp:TreeNode>
<asp:TreeNode Value="Child2" Text="2" />
<asp:TreeNode Value="Child3" Expanded="True" Text="3">
<asp:TreeNode Value="Grandchild1" Text="A" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
There are some properties that are useful for defining the behavior of the TreeView. These properties are Boolean value based.
1. PopulateOnDemand - It will populate the node under another node on the demand. It will help to increase the performance; it would not create and render at the time of initial loading.
2. ShowCheckBox - This property used to set the check-box is required or not.
3. Expand - It accepts Boolean property to set the node has to be expanded or collapsed at the time of rendering.
4. ShowLines - This is used to show the flow of the nodes in the lines.

About Mallikarjun A

Mallikarjun A
Recommended Posts × +

0 comments:

Post a Comment