Home > DeveloperSection > Beginner > Ajax Toolkit DropDownExtender in ASP.Net

Ajax Toolkit DropDownExtender in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 10969  View(s)
Rate this:

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;">

&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

AjaxControl Toolkit DropDownExtender in ASP.Net

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

 

AjaxControl Toolkit DropDownExtender in ASP.Net

When you click ok button then opened dropdown will close.

AjaxControl Toolkit DropDownExtender in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick