Wednesday, December 12, 2007

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 :

imageimage

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

11 comments:

Anonymous said...

http://forums.asp.net/p/1036228/1432282.aspx

. said...

Update to this post. thanks for the info.

Kristin said...

Nice post, post technically and aesthically (good to see some craftsmanship on UI design).

Say, were you able to update your label based a selection in the gridview? I'm doing a similar control using a databound listbox and the dropdownextender. However, the ListBox loses all of it's state, including SelectedValue, on PostBack (AutoPostBack=true). I'm catching the listbox's DataBound event and that's firing with the selection ... So that's the problem but I don't know how to stop the rebinding. Any suggestions would be most appreciated as my head is hurting over this one. I've whittled this down to a simple example of the problem and can share if it's not already obvious what might be wrong. Thanks!

oudinia said...

Hello Kristin,

I have add a download link to a listbox version of the example. take at the code see if it helps (it's on the top). What I did is replace the GridView with a ListBox. For the ListBox, I used the same sqldatasource as a source, and also used the selectedindexchanged to respond to clicks on the listbox (autopostback of course :) ).
I hope this responds.
Are you binding with a datasource control (objectdatasource or SQLDataSource)?
In fact, they do some binding logic for us, if you are binding manually through C#, then it's just a little more delicate to have to rebind, and reselect.

oooussama@gmail.com

oudinia said...

Hello Kristin,
don't mind the missing words and mistakes, I can't edit the comments. thanks for the compliments on the post.

I like to post tricks I get to do under stress in a project :) and especially when others find it useful too.

Kristin said...

Thanks for your example using ListBox. After I got it to compile (missing designer.cs file), it worked well. Comparing it to my own code I found little difference. Turns out my code was fine. Instead the custom control that contained it was the problem. I thought I had already tested my dropdown control independently but guess I hadn't. Anyway, your example clarified the situation. Thanks so much. Btw, I found and fixed the problem with the container so all is well ... until the next issue. :)

oudinia said...

glad you got it solved. That's the real pleasure of blogging and sharing, until next issue

Anonymous said...

Can't find any vb source code on your links. Has the link changed?

Yisman said...

im trying your wonderful idea, but your post doesnt show the images. as well as the download link for the zip doesnt work
what im really miising is the .net code for the GridView1_RowCommand sub
thanks

srik said...

Hi,
Very useful post. Helped me in designing my custom control. Could you please correct the broken links for the download. That would really help.

Thanks
Srik

RAMZI Sanaa said...

can I have an autograph, please ? :))

Regards,

Sanaa