Codwiz51's Wiki

RSS

Navigation







Quick Search
»
Advanced Search »

How To: AJAX Drop down extender used with GridView

RSS
Modified on 2011/08/31 13:21 by gharris Categorized as ASP_Net
I've been working with the AJAX drop down extender used with the GridView class. This article illustrates two ways to display drop down data for a Label in a GridView.

The first example illustrates a Label used with a Panel. The data is presented as a LinkButton. This method offers some flexibility if you want to perform an action based on the click event of the LinkButton. In order to use the AJAX extenders on a grid column edit control, you need to convert the column to a template field.

The ASP.Net page markup for the grid column:

<asp:TemplateField HeaderText="COLUMN 1" SortExpression="COLUMN 1">
	<EditItemTemplate>
		<asp:Panel ID="locPanel" runat="server" Style="display :none; visibility: hidden;">
			<asp:LinkButton ID="opt1" runat="server" onclick="opt_Click" >1</asp:LinkButton>
			<asp:LinkButton ID="opt2" runat="server" onclick="opt_Click" >2</asp:LinkButton>
			<asp:LinkButton ID="opt3" runat="server" onclick="opt_Click" >3</asp:LinkButton>
			<asp:LinkButton ID="opt4" runat="server" onclick="opt_Click" >4</asp:LinkButton>
		</asp:Panel>
		<asp:Label ID="lblLoc" runat="server" Height="16px" 
			Text='<%# Bind("COLUMN 1") %>' Width="56px" BorderColor="#BBBBBB" 
			BorderStyle="Solid" BorderWidth="1pt">
		</asp:Label>
		<ajax:DropDownExtender ID="lblLoc_DropDownExtender" runat="server" 
			DynamicServicePath="" Enabled="True" TargetControlID="lblLoc"
			DropDownControlID="locPanel">
		</ajax:DropDownExtender>
	</EditItemTemplate>
	<ItemTemplate>
		<asp:Label ID="Label1" runat="server" Text='<%# Bind("COLUMN 1") %>'></asp:Label>
	</ItemTemplate>
</asp:TemplateField>

The corresponding code behind for the opt_Click event handler:
protected void opt_Click(object sender, EventArgs e)
{
	GridViewRow gr = this.GridView1.Rows [GridView1.EditIndex];
	Label f = (Label) gr.FindControl("lblLoc");
	f.Text = ( ( LinkButton ) sender ).Text;
}

The next method uses a Label with a ListBox to display drop down data:

<asp:TemplateField HeaderText="COLUMN 2" SortExpression="COLUMN 2">
	<EditItemTemplate>
		<asp:ListBox ID="lstCol2" runat="server" AutoPostBack="True" 
			onselectedindexchanged="lstCol2_SelectedIndexChanged">
			<asp:ListItem Selected="True">ABC</asp:ListItem>
			<asp:ListItem>DEF</asp:ListItem>
			<asp:ListItem>GHI</asp:ListItem>
		</asp:ListBox>
		<asp:Label ID="lblCol2" runat="server" Height="16px" 
			Text='<%# Bind("COLUMN 2") %>' Width="56px" BorderColor="#BBBBBB" 
			BorderStyle="Solid" BorderWidth="1pt">
		</asp:Label>
		<ajax:DropDownExtender ID="lblCol2_DropDownExtender" runat="server" 
			DynamicServicePath="" Enabled="True" TargetControlID="lblCol2"
			DropDownControlID="lstCol2">
		</ajax:DropDownExtender>
	</EditItemTemplate>
	<ItemTemplate>
		<asp:Label ID="Label2" runat="server" Text='<%# Bind("COLUMN 2") %>'></asp:Label>
	</ItemTemplate>
</asp:TemplateField>

The corresponding code behind for the lstCol2_SelectedIndexChanged event handler:

protected void lstCol2_SelectedIndexChanged(object sender, EventArgs e)
{
	GridViewRow gr = this.GridView1.Rows [GridView1.EditIndex];
	Label f = ( Label ) gr.FindControl("lblCol2");
	f.Text = ( ( ListBox ) sender ).SelectedValue;
}

The key to using a drop down extender with the GridView class is to get a reference to the correct GridRow that is being edited. The EditIndex property lets the developer operate on the correct row and find the correct control in order to update data.

codewiz51, 2010/03/31 11:13 If I get some spare time, I'll put together a complete project with a simple SQL Server table to illustrate the entire process.

gharris, 2011/08/31 13:21 Updated to correct formatting errors

ScrewTurn Wiki version 3.0.5.600. Some of the icons created by FamFamFam.