converting an ajax control to a drop down

Question

Situation--> there are two ajax controls used....

The first one

acts as a prompter, that is, the person types say a letter l in the textbox, and the options starting with l are diplayed for the user to click and select.

The second ajax control

also acts a prompter, that is, when you type a letter l in the second textbox, it displays al the options, but only restricted to the options available WITHIN the option selected in the first text box.

I want to convert the second ajax control into a drop down, that is, all the options should appear restricted to the options available WITHIN the option selected in the first text box, but as a drop down list, not a prompter. How can this be achieved?

Answer 1

I would place each of the 2 DropDownLists in their own individual UpdatePanels, and have the initial TextBox outside:

    <asp:TextBox ID="tbLetterChoice" MaxLength="1" runat="server" AutoPostBack="true" OnTextChanged="ShowDropDown1Options" />

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="tbLetterChoice" EventName="TextChanged" />
            </Triggers>
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ShowDropDown2Options" />
            </ContentTemplate>  
        </asp:UpdatePanel>

        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="DropDownList1" />
            </Triggers>
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DoSomething" />
            </ContentTemplate>
        </asp:UpdatePanel>

there would need to be two small methods in the codebehind to populate the DropDownLists:

protected void ShowDropDown1Options(object sender, EventArgs e){
    DropDownList1.Items.Clear();
    // populate DropDownList1 based on tbLetterChoice.Text
}

protected void ShowDropDown2Options(object sender, EventArgs e){
    DropDownList2.Items.Clear();
    // populate DropDownList2 based on DropDownList1.SelectedValue
}

protected void DoSomething(object sender, EventArgs e){
    // take action based on final choice from DropDownList2
}

So, user types a letter into 'tbLetterChoiceand' hits enter. This updates 'DropDownList1'. User chooses item from 'DropDownList1', and this populates 'DropDownList2'. User chooses item from 'DropDownList2', and program executes 'DoSomething()'.