Statistics
Visits: 105081
Page Visits: 139148
Active visitors (monthly): 5364
Feed Count: 45
Most visited page: Adding value as a technical analyst
Archive : Jun 2010

Problems with AJAX TabContainer

AJAX TabContainer has quite a few problems. This article gives a good idea of how to work around some of these problems. The most annoying problem is not able to set the styling of the TabContainer tabs. Here is a good link to overcome the problem by tinkering with the source code. The link examines the CSS emitted by the TabContainer and modifies the styles in the target page.

Another annoying feature of the TabContainer is the ActiveTabChanged event. If the TabIndex is changed by clicking on the tab, there is no AJAX styled postback. This prevents refreshing GridViews if grids are embedded within the TabContainer. Here is a good post of how to ensure that the server side ActiveTabChanged event is raised.

Permalink | No Comments | Leave your comment
 

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().

Permalink | 1 Comment | Leave your comment
 
Commented by sivaL at 23-Jul-2010 12:11 PM
Wow its nice Thanks Siva