Categories
General (9)
General ASP.Net (6)
Javascript (6)
ASP.Net WebForms (6)
GridView Controls (7)
ASP.Net AJAX (2)
ASP.Net MVC (1)
 
 
Archive
Aug 2010 (1)
Jul 2010 (1)
Jun 2010 (1)
May 2010 (1)
Apr 2010 (1)
Mar 2010 (1)
Feb 2010 (2)
Jan 2010 (1)
Dec 2009 (2)
Nov 2009 (5)
Oct 2009 (10)
Sep 2009 (6)
Aug 2009 (2)
 
 
7607 Visits
 
Jun 2010

Handling events of nested controls within GridView

A GridView contains two dropdownlists. The first dropdownlist is a simple Yes / No. On selecting Yes, the second dropdownlist should be enabled. How do I implement this?

The GridView contains three columns: First Name, Alien DropDownList (Yes/No), Country DropDownList. The DropDownList is present in the TemplateColumn. Depending on the selection in the first DropDownList, the second DropDownList is enabled or disabled. The HTML Layout of the GridView looks like this:

<asp:Gridview ID="GridView1" runat="server" DataSourceID="NameXml" AutoGenerateColumns="false" OnRowDataBound = "GridView1_RowDataBound" > <Columns> <asp:BoundField DataField="FirstName" /> <asp:TemplateField> <ItemTemplate> <asp:DropDownList ID="AlienList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="AlienList_SelectedIndexChanged" > <asp:ListItem Text="Yes" Value="Y"></asp:ListItem> <asp:ListItem Text="No" Value="N"></asp:ListItem> </asp:DropDownList> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <ItemTemplate> <asp:DropDownList ID="CountryList" runat="server"> <asp:ListItem Text="" Value=""></asp:ListItem> <asp:ListItem Text="USA" Value="USA"></asp:ListItem> <asp:ListItem Text="UK" Value="UK"></asp:ListItem> </asp:DropDownList> </ItemTemplate> </asp:TemplateField> </Columns> </asp:Gridview> <asp:XmlDataSource ID="NameXml" runat="server" DataFile="Names.xml"></asp:XmlDataSource>

There are two event handlers that need to be written. GridView1_RowDataBound and AlienList_SelectedIndexChanged. The code for GridView1_RowDataBound is below:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        DropDownList lstAlien = e.Row.FindControl("AlienList") as DropDownList;

        // XmlDataSourceNodeDescriptor
        // DataItem is a XmlDataSourceNodeDescriptor
        // To get attribute, use XPathBinder
        lstAlien.SelectedValue = XPathBinder.Eval(e.Row.DataItem, "@Alien").ToString();

        DropDownList lstCountry = e.Row.FindControl("CountryList") as DropDownList;
        if (lstAlien.SelectedValue == "Y")
        {
            lstCountry.Enabled = true;
            lstCountry.SelectedValue = XPathBinder.Eval(e.Row.DataItem, "@Country").ToString();
        }
        else
        {
            lstCountry.Enabled = false;
        }
    }    
}

In the above event handler, the GridViewRow is got by e.Row. To get the XmlNode attributes, use the XPathBinder. This is because we are using XmlDataSource. Each item in XmlDataSource is a XmlDataSourceNodeDescriptor. This exposes an interface that can be used by XPathBinder. The code for the other event handler (AlienList_SelectedIndexChanged) is below:


protected void AlienList_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList lstAlien = (DropDownList)sender;
    GridViewRow row = lstAlien.NamingContainer as GridViewRow;
    DropDownList lstCountry = row.FindControl("CountryList") as DropDownList;
    if (lstAlien.SelectedValue == "Y")
    {
        lstCountry.Enabled = true;
    }
    else
    {
        lstCountry.SelectedValue = "";
        lstCountry.Enabled = false;
    }
}

The above event handler code is very similar. To get GridViewRow, use the DropDownList.NamingContainer. The NamingContainer has the parent control. Once the GridViewRow is got, it is easy to find the second DropDownList using FindControl().

1 Comment(s), Your comments?