Ajax Toolkit DropDownExtender in ASP.Net
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;">
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;">
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
When you click on the show job id LinkButton then Panel1 will
display as dropdown.
When you click ok button then opened dropdown will close.
|