ASP.Net Dynamic AJAX Dropdown Menu Extender Control

by top54u.com 01 Jun, 2008
Spotlight.....

The AJAX Dropdown Menu extender control works like a context menu that can be attached to any type of ASP.Net 2.0 server control. AJAX Dropdown Control uses two controls, one control works as a target control and other as a Dropdown menu. When user clicks on Target control it produces a dropdown menu at the specified position.

 

In the sample of AJAX Dropdown extender control you will learn how to use the ASP.Net repeater control for generating the dynamic Link Buttons as menu items for Dropdown extender. You can place the repeater control inside a Panel control that can be attached to AJAX Dropdown Extender control.

 

 

AJAX Dropdown Menu Extender Control Properties

 

TargetControlID: ID of the control to attach the dropdown menu extender with it.

 

DropdownControlID: ID of the Control that will appear as the dropdown menu.

 

DropArrowBackColor: Sets the background color of the arrow that appears on mouse over on Target Control.

 

DropArrowImageUrl: image path of drop arrow.

 

DropArrowWidth: To set width of drop arrow image.

 

HighlightBackColor: Background color of the Target control for on mouse over action.

 

HighlightBorderColor: Border color of the Target Control for on mouse over action.

 

 

Sample Code for AJAX Dropdown Extender Control

 

HTML code:

 <form id="form1" runat="server">


 <div>


 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>


<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">


<ContentTemplate>


<ajaxToolkit:DropDownExtender ID="DropDownExtender1"
runat="server"
TargetControlID="drdLabel"
DropDownControlID="menuPanel">
</ajaxToolkit:DropDownExtender>
     
<asp:Label ID="drdLabel" runat="server" Text="Select Your Category" style="padding:3px; width:200px; padding-right:10px;display:block"></asp:Label>


<asp:Panel ID="menuPanel" runat="server" style="display:none; visibility:hidden" CssClass="ContextMenuPanel">


<asp:Repeater ID="rpCategories" runat="server" OnItemCommand="rpCategories_ItemCommand">


<ItemTemplate>


<div style="float: left;">


<asp:LinkButton ID="lnkCategory" style="width:100px; display:block" runat="server" CssClass="ContextMenuItem" CommandName="select" Text='<%#DataBinder.Eval(Container.DataItem,"categoryName") %>'></asp:LinkButton>


</div>


<div style="clear: both"></div>


</ItemTemplate>


</asp:Repeater>
</asp:Panel>


<br />
<br />


<asp:Label ID="lblMessage" runat="server"></asp:Label>


</ContentTemplate>
</asp:UpdatePanel>
   


</div>


</form>

 

In sample code Northwind database is used to bind the categories with repeater control to generate dropdown menu items.

 

You can download the sample code for AJAX Dropdown Menu extender control here...

ajax dropdown menu.zip (3.24 kb)

Spotlight.....

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , , , ,

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

8/23/2008 8:53:41 PM

OUR SPONSORS[+ advertise here]
related videos.....
recent posts.....
top54u ezines.....