Search This Blog

2009-04-20

Handling Dropdownlist Event within a Gridview

Two Dropdownlist within a Gridview with autopostback /how to get selectedindexchanged event of dropdown in a gridview


In many cases,we need more than one dropdownlist in a same row of gridview and on changing the values in on dropdown changes the values of other dropdown.
We can solve the problem using NamingContainer in the OnSelectedIndexChanged event of the first dropdown.
In the following example I have taken two dropdown and one label in a gridview.Changing in the first dropdownlist of the gridview changes the values of second dropdownlist.

Step 1.In the aspx page create a gridview with two dropdownlist and one label.For the first dropdownlist create an event OnSelectedIndexChanged and set AutoPostBack to true
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="dropdownlist1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="dropdownlist1_SelectedIndexChanged">
<asp:ListItem Text="A" Value="A"></asp:ListItem>
<asp:ListItem Text="B" Value="B"></asp:ListItem>
<asp:ListItem Text="C" Value="C"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="dropdownlist2" runat="server">
<asp:ListItem Text="A" Value="A"></asp:ListItem>
<asp:ListItem Text="B" Value="B"></asp:ListItem>
<asp:ListItem Text="C" Value="C"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Name")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Step2.In the server side code write a method that within if (!IsPostBack)
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
getData();
}

}
Step 3.Define the method getdata()

private void getData()
{
DataTable objDataTable = new DataTable("GridDetails");
DataSet objDataSet = new DataSet();
DataRow objDR;
objDataSet.Tables.Add(objDataTable);
objDataTable.Columns.Add("Name", typeof(string));
objDR = objDataTable.NewRow();
objDR["Name"] = "Example";
objDataTable.Rows.Add(objDR);
objDR = objDataTable.NewRow();
objDR["Name"] = "Of";
objDataTable.Rows.Add(objDR);
objDR = objDataTable.NewRow();
objDR["Name"] = "Dropdownlist";
objDataTable.Rows.Add(objDR);
objDR = objDataTable.NewRow();
objDR["Name"] = "Inside";
objDataTable.Rows.Add(objDR);
objDR = objDataTable.NewRow();
objDR["Name"] = "Gridview";
objDataTable.Rows.Add(objDR);
objDR = objDataTable.NewRow();
objDR["Name"] = "With";
objDataTable.Rows.Add(objDR);
objDR = objDataTable.NewRow();
objDR["Name"] = "Autopostback";
objDataTable.Rows.Add(objDR);
Gridview1.DataSource = objDataSet;
Gridview1.DataBind();
}
Step 4.In the dropdownlist1_SelectedIndexChanged event write the following code
protected void dropdownlist1_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow gvr = (GridViewRow)(((Control)sender).NamingContainer);

// Get the reference of the first DropDownlist that will generate this SelectedIndexChanged event
DropDownList dropdownlist1 = (DropDownList)gvr.FindControl("dropdownlist1");

// Get the reference of second DropDownlist in the same row.
DropDownList ddlParagraph = (DropDownList)gvr.FindControl("dropdownlist2");
ddlParagraph.ClearSelection();
ddlParagraph.Items.FindByText(dropdownlist1.SelectedItem.Value.ToString()).Selected = true;

}

Step5.Now run your application by pressing F5
Step 6.When changing the selection of your firts dropdown ,If you get this error as follows
"Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> ...."
Make the EnableEventValidation="false" in the Page dirctive like

<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="DropdownInGridview.aspx.cs" Inherits="DropdownInGridview" %>

NB.Please do not copy paste the whole line of the above code,please only copy EnableEventValidation="false" and paste it to the page directive

Step7.Now run your application and now you can see the following output and on changing the values of first dropdownlist will changes the values of second dropdownlist in the gridview

4 comments:

Anonymous said...

Eggcellent. Good work.

Asha said...

It is really good Manab.
Everyone can easily understand this.

Anonymous said...

Thanks dude for sharing this kind of information.

It really solve my problem.

SANNY

Manab Ranjan Basu said...

Thanks Sanny