asp.net : an alternative to multi-column DropDownList Gridview within dropdownlist / combobox (using the Ajax DropDownExtender)

ListBox Within a dropdownlist Sample Code in C#.rar

Grid within a dropdownlist Sample Code in C# or vb.net.rar

Grid within a dropdownlist Sample Code in C# or vb.net.zip

Often, we need to put more info into the dropdownlist (multi-column). using the popupcontrol extender, a panel, and a gridview, we can have the effect of a gridview within a dropdownlist.

Here's a screen shot :

Before the dropdownextender, two solutions were available :

1. concatenation in the sql query or procedure (ex: Select FirstName + ' ' + LastName as FullName From Person) see this post for details on implementing a multi-column dropdownlist using techniques from SQL and the asp.net dropdownlist
http://forums.asp.net/p/1036228/1432282.aspx 

2. develop or purchase a custom dropdownlist, which is still a good option (Also some information about purchase is available on the post above. Of course, there are many third party component providers to choose from). (in our company we use Telerik components others use easy ListBox).

In one of the applications we developped lately, this method using the Ajax DropDownExtender along with the gridview (SelectedIndexChanged Event or the selection feature) was a great option, since the difficulty level is not that high.

Here's the code for the aspx file:

<asp:ScriptManager runat="server" ID="script1" />
      <asp:Label ID="Label1" runat="server" Text="To select a Client, Please Click here"></asp:Label>
      <ajaxToolkit:DropDownExtender runat="server" ID="popupdropdown" DropDownControlID="pnlGrid"
          TargetControlID="Label1" />

above, we can see how the dropdownextender refers to the label, as well as the panel which hosts the grid.

here's the code for the panel:

<asp:Panel runat="server" ID="pnlGrid" Style="display: none; visibility: hidden">
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    DataKeyNames="ClientID" DataSourceID="SqlSourceClientsGrid" GridLines="None"
                    OnRowCommand="GridView1_RowCommand">
                    <Columns>
                        <asp:BoundField DataField="ClientID" HeaderText="ClientID" InsertVisible="False"
                            ReadOnly="True" SortExpression="ClientID" />
                        <asp:BoundField DataField="FullName" HeaderText="FullName" SortExpression="FullName" />
                        <asp:BoundField DataField="IsValid" HeaderText="IsValid" SortExpression="IsValid" />
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton CommandName="Select" CommandArgument='<%# Eval("FullName") %>' ID="LinkButton1"
                                    runat="server">Select</asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </asp:Panel>
            <asp:SqlDataSource ID="SqlSourceClientsGrid" runat="server" ConnectionString="<%$ ConnectionStrings:ClientsConnectionString %>"
                DeleteCommand="spDeleteClients" DeleteCommandType="StoredProcedure" SelectCommand="spGetClients"
                SelectCommandType="StoredProcedure">
                <DeleteParameters>
                    <asp:Parameter Name="ClientID" Type="Int32" />
                </DeleteParameters>
            </asp:SqlDataSource>

notice the panel's visibility set to false intially, then the dropdown extender takes care of hiding and showing the "pnlGrid" control. I personnaly found this technique very useful in many cases.

 

This helps go one step beyond the regular dropdownlist for data entry forms and displaying choice lists to the user, in a flexible manner

Comments are always welcome