How to implement nested DropDownLists insid a GridView in asp.NET?

Question

I have two nested DropDownLists (the value selected in the 1st ddl will limit the content of the 2nd ddl).

The example attached here runs fine outside of a GridView. As soon as I try to insert this into a GridView, I get an error because I cannot identify the ControlID to use in the ControlParameter.

The code outside of the GridView looks like this:

<asp:DropDownList ID="ACTION1_DROPDOWNLIST"
    AutoPostBack="true" ToolTip="Dropdown List" runat="server" CssClass="Select" 
    DataSourceID="SqlDataSource1" DataTextField="Description" DataValueField="ID" >
    <asp:ListItem Value=""></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ACTION1_DROPDOWNLIST2" 
    ToolTip="Dropdown List" runat="server" CssClass="Select" 
    DataSourceID="SqlDataSource2" DataTextField="Description" DataValueField="ID" >
    <asp:ListItem Value=""></asp:ListItem>
</asp:DropDownList>

And the DataSources look like this:

<asp:Panel ID="HiddenFields" runat="server">
    <asp:TextBox ID="DRAFT" runat="server" Visible="false"></asp:TextBox>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:MyDataBase %>" 
        ProviderName="<%$ ConnectionStrings:MyDataBase.ProviderName %>" 
        SelectCommand="SELECT [ID], [Description] FROM [Items]">
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:MyDataBase %>" 
        ProviderName="<%$ ConnectionStrings:MyDataBase.ProviderName %>" 
        SelectCommand="SELECT [ID], [Description] FROM [SubItems] WHERE [itemId]=:v_ItemId">
        <SelectParameters>
            <asp:ControlParameter Name="v_ItemId" ControlID="ACTION1_DROPDOWNLIST" PropertyName="SelectedValue" />
        </SelectParameters>
    </asp:SqlDataSource>
</asp:Panel>

Thanks!

Answer 1

The actual id's are build based on where they are, so you will see something like $GridView1 inserted in the id's. To solve this you can set ClientIDMode="Static" on your page properties (first line of your .aspx file). Or use "javascript:var a = document.getElementById('" + ACTION1_DROPDOWNLIST.ClientID + "');

Answer 2

I have tried something similar and it works fine. I can't tell from your post whether the data sources are together with the dropdowns inside the ItemTemplate of the GridView. At least the second one should be inside the ItemTemplate so that you will have a data source for each line in the grid.

I have posted my page below. It's using different tables, but it's the same idea.

<form id="form1" runat="server">
<div>
    <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:DropDownList ID="ACTION1_DROPDOWNLIST" 
                        AutoPostBack="true" ToolTip="Dropdown List" runat="server" CssClass="Select"  
                        DataSourceID="SqlDataSource1" DataTextField="Surname" DataValueField="FamilyID" > 
                        <asp:ListItem Value=""></asp:ListItem> 
                    </asp:DropDownList> 
                    <asp:DropDownList ID="ACTION1_DROPDOWNLIST2"  
                        ToolTip="Dropdown List" runat="server" CssClass="Select"  
                        DataSourceID="SqlDataSource2" DataTextField="Name" DataValueField="PersonID" > 
                        <asp:ListItem Value=""></asp:ListItem> 
                    </asp:DropDownList>
                    <asp:Panel ID="HiddenFields" runat="server"> 
                        <asp:TextBox ID="DRAFT" runat="server" Visible="false"></asp:TextBox> 
                        <asp:SqlDataSource ID="SqlDataSource2" runat="server"  
                            ConnectionString="<%$ ConnectionStrings:tunedinConnectionString %>"  
                            ProviderName="<%$ ConnectionStrings:TunedInConnectionString2.ProviderName %>"  
                            SelectCommand="SELECT * FROM [Person] WHERE ([FamilyId] = @FamilyId)"> 
                            <SelectParameters> 
                                <asp:ControlParameter Name="FamilyId" ControlID="ACTION1_DROPDOWNLIST" 
                                    PropertyName="SelectedValue" Type="Int32" /> 
                            </SelectParameters> 
                        </asp:SqlDataSource> 
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:LinqDataSource ID="LinqDataSource1" runat="server">
    </asp:LinqDataSource>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"  
    ConnectionString="<%$ ConnectionStrings:tunedinConnectionString %>"  
    ProviderName="<%$ ConnectionStrings:TunedInConnectionString2.ProviderName %>"  
    SelectCommand="SELECT * FROM [Family]"> 
</asp:SqlDataSource> 
</form>