Dynamic Cascading DropDownLists

Hi All,

Thx, for your help in advance. I have 2 update panels, UpdatePanel1 and UpdatePanel2 respectively.

UpdatePanel1 has 'n' dynamically generated DropDownLists with their CascadingDropDown extender.

UpdatePanel2 has a TextBox and a Button.

When the last dynamically generated dropdownlist is clicked (a selectedIndexChanged event is fired) where I clear the TextBox. Since they are dynamically generated, I always add the dynamic dropdownlists (and extenders) on the OnInit event of the page. My problem is that when the Button is clicked, the DropDownLists may be still loading their values (some default selected values, selected via cascadingDropDown.SelectedValue property), so on postback the SelectedIndexChanged event is fired, before the OnClick event of the button takes place. This causes the following scenario:

1. DropDownLists Dynamically Added

2. User Enters Text (DropDownLists StillLoading their default values)

3. User Clicks Button (DropDownLists StillLoading their default values)

4. SelectedIndexChanged Fired (this clears the textbox , so I can't read the value in step 2)

5. Button's OnClick Fired

6. When I try to read the TextBox text, it has been cleared in step 4.

Am I doing something rong? Why both events(SelectedIndexChanged and OnClick) are fired when I'm expecting only the OnClick event to happen. Any thoughts of how to avoid this?

Thx

Hi Maxdmvp,

First, we suggest that you should set your UpdatePanel's UpdateMode="Conditional". This will avoid that one UpdatePanel cause to another UpdatePanel's refreshment.

maxdmvp:

4. SelectedIndexChanged Fired (this clears the textbox , so I can't read the value in step 2)

5. Button's OnClick Fired

You should use a debugging tool such as Web Development Helper and FireBug to find out the reason.

Best regards,

Jonathan

Thx for your response Jonathan...

The problem that I describe rises when you try to edit. Imagine this scenario: The dropDownList's (updatePanel1) are properties of a product, when you finish selecting you have assembled a product model number. When you enter the page to edit how many items of this product you want in your cart (textBox and button in UpdatePanel2), you already know the product's properties (you preselect the values in the dropDownList's), but while these are loading it is posible for you to enter a number in the textBox and click the "add" button in UpdatePanel2. In this scenario the "SelectedIndexChanged" is fired before the "OnClick" of the button, when I just expect the "OnClick" to be fired. As you can see it doesn't matter, in this case, if the UpdateMode="Conditional".

Also thx for your advice on user FireBug, I use it often but I'm not sure how can it help me debug this problem... could you please provide a further advice?

Thx

Hi Maxdmvp,

I'm not clear enough now, so would you please give me a sample now? Please do me a favor that remove all the unnecessary part before you post it. Thanks.

Best regards,

Jonathan.

DropDownLists OnSelectedIndexChanged wont fire

Here what I do

<atlas:UpdatePanel ID="mypanel" mode="always" runat="server">
<ContentTemplate>
<asp:DropDownList ID="mylist" runat="server"
DataSource="mydatasource"
DataTextField="mytext"
DataValueField="myvalue"
OnSelectedIndexChanged="mylist_SelectedIndexChanged" />
<asp:Label ID="mylabel" runat="server" />
<asp:TextBox ID="mytextbox" runat="server" />
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger controlID="mylist"
event="SelectedIndexChanged" />
</Triggers>
</atlas:UpdatePanel>

the logic is simple, when the selected item inside the DropDownList changed, it will change the value of the textbox. inside mylist_SelectedIndexChanged method in the codebehind file is just simple putting a value using mytextbox.Text = "something";

But unfortunatelly, when I click on the DropDownList, change it's selected item, nothing happend. The value of the textbox also didn't change.

Do I do something wrong here? or miss something? Please advise.

Thanks,

Lok

As far as I can see all you need to do is set theAutoPostBack="true"in the DropDownList. Works just fine for me that way.

Greetz,
Zentral

Hi Zentral,

Thanks for the reply.

But, it's true, that giving AutoPostBack="true" will not makes all the page portion refreshed? not just only the UpdatePanel portion?

Or because of the control inside an UpdatePanel, so all the postback action happened only affected particular UpdatePanel.

Regards,

Lok

Hey Lok,

That's correct, due to the fact that the DropDownList is nested within an UpdatePanel, only the data within the panel will be considered for the postback. In this case you can look at the UpdatePanel as a "page scope limiter". Thus only the content within the UpdatePanel will be re-rendered.

You can test this easily for example by placing a label inside the UpdatePanel and placing a different label outside the UpdatePanel. Place your DropDownList inside the UpdatePanel and set the AutoPostBack="true", implement the server event and within that event set both labels (the one inside the updatepanel and the one outside) to the same value. You will notice that only the label inside the UpdatePanel will have its value updated while the one outside will remain unchanged.

Greetz!
Zentral

DropDownLists in 2 separate updatepanels only work once, then dont.

Hey, i have 2 dropdownlists, both databound to my sql server, the first one simply selects anything from the "catagories" database. Autopostback is enabled. The next one is a select to the subcatagories database, with an inner join to catagories on the catagory_id column..

The idea here was to make an ajax enabled cascading databound dropdownlist, and it DOES work... but only once. i tried making the trigger the indexChanged event of the 1st dropdown list, but i have the same results. If i change catagories more than once, i will not get a subcatagory change..

Any ideas?

So not sure why DropDownList1 is in an UpdatePanel, but DropDownList2 is the issue here eh and is in a panel, and has a dependant control, being the first drop down list.

So the second one, add a Trigger like this;

<asp:AsyncPostbackTriggerControlID="DropDownList1"EventName="SelectedIndexChanged"/>

Is that any help? Post a snippet of your page here.

Cheers,

Steve

You should use the Cascading Dropdown of Ajax Control Toolkit, it is specially developed for this purpose. Checkout the live demo of it:
http://www.asp.net/AJAX/Control-Toolkit/Live/CascadingDropDown/CascadingDropDown.aspx

It says AsyncPostbackTrigger was a unknown element... Here's my code:

Catagory:<BR /><asp:DropDownList id="DropDownList1" runat="server" DataValueField="Catagory_ID" DataTextField="Catagory" DataSourceID="SqlDataSource2" AutoPostBack="True"></asp:DropDownList><asp:UpdatePanel id="UpdatePanel1" runat="server" >
 <contenttemplate>
SubCatagory:<BR /><asp:DropDownList id="ddlSubCat" runat="server" DataValueField="SubCatagory_ID" DataTextField="SubCatagory" DataSourceID="ddlsubCatagory"></asp:DropDownList>

<asp:SqlDataSource id="SqlDataSource2" runat="server" SelectCommand="SELECT [Catagory], [Catagory_ID] FROM [db_Catagories]" ConnectionString="<%$ ConnectionStrings:floofieConnectionString %>"></asp:SqlDataSource><BR /><asp:SqlDataSource id="ddlsubCatagory" runat="server" SelectCommand="SELECT db_SubCatagories.SubCatagory, db_SubCatagories.SubCatagory_ID FROM db_Catagories INNER JOIN db_SubCatagories ON db_Catagories.Catagory_ID = db_SubCatagories.Catagory_ID WHERE (db_Catagories.Catagory_ID = @.catid)" ConnectionString="<%$ ConnectionStrings:floofieConnectionString %>"><SelectParameters>

<asp:ControlParameter PropertyName="SelectedValue" Name="catid" ControlID="DropDownList1"></asp:ControlParameter>
</SelectParameters>
</asp:SqlDataSource>
</contenttemplate>

KaziManzurRashid:

You should use the Cascading Dropdown of Ajax Control Toolkit, it is specially developed for this purpose. Checkout the live demo of it:
http://www.asp.net/AJAX/Control-Toolkit/Live/CascadingDropDown/CascadingDropDown.aspx

That looks really nice, is there any way of getting the web service code for vb.net?

Can you post the complete markup of UpdatePanel. If any of your dropdown is outsite the update panel set its AutoPostback=true and create AsyncPostbackTrigger in Update Panel which points to that dropdownlist.

KaziManzurRashid:

Can you post the complete markup of UpdatePanel. If any of your dropdown is outsite the update panel set its AutoPostback=true and create AsyncPostbackTrigger in Update Panel which points to that dropdownlist.

Sorry bout that, thought i had it all.

Catagory:<BR /><asp:DropDownList id="DropDownList1" runat="server" DataValueField="Catagory_ID" DataTextField="Catagory" DataSourceID="SqlDataSource2" AutoPostBack="True"></asp:DropDownList><asp:UpdatePanel id="UpdatePanel1" runat="server"> <contenttemplate>SubCatagory:<BR /><asp:DropDownList id="ddlSubCat" runat="server" DataValueField="SubCatagory_ID" DataTextField="SubCatagory" DataSourceID="ddlsubCatagory"></asp:DropDownList> <BR /><asp:SqlDataSource id="SqlDataSource2" runat="server" SelectCommand="SELECT [Catagory], [Catagory_ID] FROM [db_Catagories]" ConnectionString="<%$ ConnectionStrings:floofieConnectionString%>"></asp:SqlDataSource><BR /><asp:SqlDataSource id="ddlsubCatagory" runat="server" SelectCommand="SELECT db_SubCatagories.SubCatagory, db_SubCatagories.SubCatagory_ID FROM db_Catagories INNER JOIN db_SubCatagories ON db_Catagories.Catagory_ID = db_SubCatagories.Catagory_ID WHERE (db_Catagories.Catagory_ID = @.catid)" ConnectionString="<%$ ConnectionStrings:floofieConnectionString%>"><SelectParameters><asp:ControlParameter PropertyName="SelectedValue" Name="catid" ControlID="DropDownList1"></asp:ControlParameter></SelectParameters></asp:SqlDataSource></contenttemplate> <triggers><asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged"></asp:AsyncPostBackTrigger></triggers> </asp:UpdatePanel>

I acctually fixed it... the problem was, there was 3 other updatepanels, and they all need to be set to conditional.

I cant beleive i didnt see that in the first place.

Dropdownlist showing through Autocomplete in IE 6

Has anyone found a solution for preventing dropdownlists from showing through the Autocomplete dropdown in IE 6?

This is a well documented issue in IE5 and IE6. It was fixed finally fixed in IE7. In short, there is no way to fix it. You must redesign your page so they do not try to use the same area. I don't have the article handy, but it is due tothe fact the DDL is rendered by IE above the page itself.

Here is a link to read further about this:

http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=1653209&SiteID=1

Thanks, unfortunately I will not be able to redesign the page. I just hope people stop using ie6 real soon

DropdownList OnSelectedIndexChanged event within ModalPopupExtender

I have aModalPopupExtender with two DropdownLists. I want to populate the second dropdownlist dynamically base on the user selection in the first dropdownlist. Once user selects values from both dropdown lists, then I want to postback the entire page.

But the OnSelectedIndexChanged event of the dropdownlist is not firing whenever the selection is changed.

Is this possible withinModalPopupExtender? Appreciate your help.

You may want AutoPostBack="true" and an UpdatePanel.

DropDownList flicker problem

Environment: VS 2005 with Atlas

Problem: I have some textboxes and dropdownlists on a page. When I click on any link to do a postback; all the dropdownlists disappear for few milliseconds and then reappear.

Note: I am not populating the dropdownlist again.

I want to avoid this flicker of dropdownlists.

If anyone has some across suck an issue, please help.

-Jagdish Yadav

Hi there,

Just wonder if you have a code snippet showing this problem.

Regards

Hi,

This is not related to any code. It happens on anyone's page.

If you have a dropdownlist on a page. And to avoid flicker of the page during postback you have applied atlas solution. Then if you do a postback, all the controls on the page remain as they are. But the dropdownlist will flicker (i.e.: it will disappear for a second and come back again). Even though we are not repopulating the dropdownlist on postback.

Please help...

Hi,

does it happen on any browsers?

Hi!

I have just tried this and it flickers in internet explorer but not in mozilla.
Can anybody tell me why this is′nt working?

I am experiencing the same problem. My scenario uses a drop down list in a usercontrol, which is in an update panel.

Anotherthread with the same issuehas not been resolved, however the individual noticed that using Internet Explorer 7 Beta 2 eliminates the problem. Of course this doesn't help those who would like to fix this problem for IE 6.

Has anyone found a fix yet?

Billy

Hi there,

I can confirm the issue even with the June CTP. The flicker happens for dropdownlists in IE6, not in IE7 Beta nor FireFox.

BTW: FireFox is in almost all cases more "ATLAS" aware and enabled, as the IE is... Very strange.

Regards

Hi,

this is not an issue of the Atlas framework. It is an issue in the way IE6 renders this type of boxed list.

DropDownList controls doesnt show the data after postback.

I am using a FormView and ajaxToolkit:CollapsiblePanelExtender. My DropDownLists show the data the first time, but after I press a button and it does a post back, the DropDownLists does not show the data even though I can debug and see that I am adding the items in the code-behind. Please help.

<asp:FormViewID="FormView1"runat="server"DataKeyNames="ID"DataSourceID="CslaDataSource1"DefaultMode="Insert"Width="95%">

<InsertItemTemplate>

<tableborder="0"width="100%">

<tr>

<tdalign="left">

<asp:PanelID="description_HeaderPanel"runat="server"style="cursor: pointer;">

<div>

<asp:ImageButtonID="Description_ToggleImage"runat="server"ImageUrl="~/Image/plus.gif"AlternateText="collapse"/> Search

</div>

</asp:Panel>

<asp:Panelid="description_ContentPanel"runat="server"style="overflow:hidden;">

<tableborder="0">

<tr>

<tdcolspan="6"> </td>

</tr>

<tr>

<tdalign="right">Alert ID:</td>

<td><asp:TextBoxID="txtID"runat="server"Text='<%# Bind("ID") %>'/></td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<tdalign="right"style="width:16.5%">Server:</td>

<tdstyle="width:16.5%"><asp:TextBoxID="txtServer"runat="server"Text='<%# Bind("Server") %>'/></td>

<tdalign="right"style="width:16.5%">Source:</td>

<tdstyle="width:16.5%">

<asp:DropDownListID="ddlSource"runat="server"SelectedValue='<%# Bind("Source") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

<tdalign="right"style="width:16.5%">Manager:</td>

<td>

<asp:DropDownListID="ddlManager"runat="server"SelectedValue='<%# Bind("Manager") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

</tr>

<tr>

<tdalign="right">Type:</td>

<td>

<asp:DropDownListID="ddlType"runat="server"SelectedValue='<%# Bind("Type") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

<tdalign="right">Severity:</td>

<td>

<asp:DropDownListID="ddlSeverity"runat="server"SelectedValue='<%# Bind("Severity") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

<tdalign="right">Detail:</td>

<td><asp:TextBoxID="txtDetail"runat="server"Text='<%# Bind("Detail") %>'/></td>

</tr>

<tr>

<tdalign="right">From:</td>

<td>

<asp:TextBoxID="txtFrom"runat="server"/> <asp:ImageButtonrunat="Server"ID="Image1"ImageUrl="~\Image\Calendar.png"AlternateText="Click to show calendar"/>

<ajaxToolkit:CalendarExtenderID="ajaxCalendar1"runat="server"TargetControlID="txtFrom"PopupButtonID="Image1"/>

</td>

<tdalign="right">To:</td>

<td>

<asp:TextBoxID="txtTo"runat="server"/> <asp:ImageButtonrunat="Server"ID="Image2"ImageUrl="~\Image\Calendar.png"AlternateText="Click to show calendar"/>

<ajaxToolkit:CalendarExtenderID="ajaxCalendar2"runat="server"TargetControlID="txtTo"PopupButtonID="Image2"/>

</td>

<td> </td>

<td> </td>

</tr>

<tr>

<tdalign="right">Status:</td>

<td>

<asp:DropDownListID="ddlStatus"runat="server"SelectedValue='<%# Bind("Status") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

<tdalign="right">Ticket ID:</td>

<td><asp:TextBoxID="txtTicketID"runat="server"Text='<%# Bind("Ticket") %>'/></td>

<td> </td>

<td> </td>

</tr>

<tr>

<tdcolspan="6"> </td>

</tr>

<tr>

<tdalign="center"colspan="6"><asp:ButtonID="btnSubmit"runat="server"Text="Submit"CausesValidation="false"CommandName="Insert"/></td>

</tr>

<tr>

<tdcolspan="6"> </td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

<ajaxToolkit:CollapsiblePanelExtenderID="cpeSearch"runat="Server"TargetControlID="description_ContentPanel"ExpandControlID="description_HeaderPanel"CollapseControlID="description_HeaderPanel"Collapsed="true"ImageControlID="description_ToggleImage"ExpandedText="(Hide Details...)"CollapsedText="(Show Details...)"ExpandedImage="~/Image/minus.gif"CollapsedImage="~/Image/plus.gif"/>

</InsertItemTemplate>

</asp:FormView>

Hi, ensure your dropdownlistbox are only loaded on page load - try something like this:

Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.LoadIf Not IsPostBackThen'Load the DropdownListbox with number 1 to 10Dim aAs Int16For a = 1To 10 DrpLstTest.Items.Add(a)Next aEnd If End Sub

Thanks.

That was the first thing I tried. It didn't solve the problem.

I think the problem has to do with FormView, AJAX's CollapsiblePanelExtender, and ASP.NET.

Please help!

DropDownList and AutoPostBack - Cannot Get the Actual Selected Value

Hello,

I have an update Panel that contains 2 DropDownLists, one of which has an AutoPostBack that eventually populates the other. The problem is that, although it works (the autopostback), i am always getting the last value added to the dropdown list by binding. THat is, i do not get the value that was selected when the event was fired. What could be wrong?

Can I see the code that you are using?. It seems to me that the selected value is being lost somewhere.

German Afanador

dropdownlist

Hello All,

I have three dropdownlists and a textbox on my web page. The dropdownlists display the Day/Month/Year respectively.

I set the dropdownlists to display today's date when the page loads and the textbox displays the values from the dropdownlists as a single string value.

How can i dynamically change the dates in the dropdownlist for example ( instead of december 2007 to december 2008)and have the new changes displayed in the textbox?

The easiest way is to put your textbox inside an update panel like this:

 
<asp:UpdatePanelID="updPanel"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBoxID="txtDate"runat="server"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="DropDownList"EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
 
Now in the SelectedIndexChanged event handler, just set the textbox to the new text. That's it!
 

Thanks oswaldorb,

It works but not as i want it to.

I would like the default date to be the current date for example 13/12/2007 when the page loads initially.

But when i try to do change the default date, i get an error

Please help!