articles

Ajax Toolkit DropDownExtender in ASP.Net

Pushpendra Singh18110 07-Dec-2010

The DropDown control in the AJAX Control Toolkit offers a simple way to create a drop down at client-side.

We use this control default syntax is added on the aspx page

<cc1:DropDownExtender ID="DropDownExtender1" runat="server">
</cc1:DropDownExtender>

DropDownExtender Properties:

  •  TargetControl ID - The ID of the control which needs a drop down.·   
  •   DropDownControl ID – The ID of the control which will be displayed as the dropdown.

Code:

 <%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages and use drpdown extender--%>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
 
<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="LinkButton1" DropDownControlID="Panel1">
</cc1:DropDownExtender>
 
<%--DropDownExtender focus on the linkbutton1 and panel1 and use the table which show the data when selected from the dropdown list--%>
 
<asp:LinkButton ID="LinkButton1" runat="server">show job id</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" Style="display: none"Width="668px">
<div>
<p style="text-align: center">
<table width="100%">
<tr>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> JobID</td>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> Requirement</td>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> Location</td>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> Experience</td>
<td style="width: 100px; font-size: 10pt; font-family: Verdana; background-color: silver;font-weight: bold;"> Salary</td>
</tr>
<tr>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
1
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
ASP.NET
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
Mumbai
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
1 Year
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
&nbsp;260000 P.A.
</td>
</tr>
<tr>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
2</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
JAVA</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
Kolkata
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
Fresher
</td>
<td style="width: 100px; font-size: 9pt; font-family: Verdana;">
&nbsp;100000 P.A.
</td>
</tr>
</table>
<asp:Button ID="OkButton" runat="server" Text="OK" />
</p>
</div>
</asp:Panel>

Description:

<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="LinkButton1" DropDownControlID="Panel1">
 </cc1:DropDownExtender>

 

Here TargetControlID is "LinkButton1" in which DropDown is needed(this control will work as DropDown).DropDownControlID is "Panel1" which will be display as the dropdown.

Run the project

Ajax Toolkit DropDownExtender in ASP.Net

When you click on the show job id LinkButton then Panel1 will display as dropdown.

 

Ajax Toolkit DropDownExtender in ASP.Net

When you click ok button then opened dropdown will close.

Ajax Toolkit DropDownExtender in ASP.Net


Updated 04-Mar-2020

Leave Comment

Comments

Liked By