Dropdowns inside updatepanel flash on postback.

I have 2 dropdown controls inside an updatepanel. One is disabled or enabled dependent on the selection of the other dropdown. The disabled one has its autopostback property set to false. The other one has autopostback=true. When I make selection in dropdown 1, both dropdowns flash. Is there a way to prevent the redrawing of the controls and just have the data in them update?

Thanks,

John

Put the both the DropDownlist control in to its own UpdatePanel.And make the second updatepanel Updatemode ="Conditional" and when you want to second DDL to be enable do it in the code and call the update() method in the UpdatePanel two ..

refer the following link for more information

http://asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx

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 SelectedIndexChanged event not firing

I have a dropdown list that has many items in it - so in order to reduce viewstate size I have shut off viewstate for that control. But since doing so - the selectedindexchanged event is not firing (I guess because without view state the control does not know if there was a change in the selected value so it can't determine if it should fire the changed event.

Is there any way I can detect this change on the client and fire the selectedindexchanged event on the server?

thanks
Michael

May be you can try to bind the dropdown list in the Page_Init event handler.. Then you do not have to worry about viewstate.. Give it a try..

I tried that but that means everytime there is a postback (async or sync) it has to hit the db to re-populate that list.

I tried keeping track of the previously selected value in viewstate manually to detect a change and it detected the change correctly but I get an event validation error.

thanks
Michael

ok. I guess we are missing the pieces of information here... So you do not care about re-populating the list again? so what is going to be in the list.. after the postback is finished?

What event validation error you are talking about? Do you even care about the SelectIndexChanged event? Or you can simply explain more about what exactly you are trying to do?

I have a drop down list with autopostback = true and when an item is selected an update panel will refresh based on the selected item in the dropdown list. So I don't need to reload the dropdown list once it is loaded initially.

I actually solved the issue by looking at the event source in the forms collection and if it is the dropdown list - I know that the selected item was changed because the dropdown list won't do a postback unless the selected item was changed. I couldn't use the selecteditemchanged event because with the viewstate disabled - the server side does not know if the selected item changed.

I thought I had to store the previously selected item in viewstate to detect if a new item was selected but it turns out that a postback only occurs when the selected item is changed - which makes sense - the browser know that the item was changed - even though the server does not.

thanks
Michael

DropDownList in an AJAX modal popup window

We've developed a multicolumn dropdown listbox that works great on a standard Web form, but it's been giving me a lot of grief trying to get it to work in an AJAX modal popup window. For some reason, either the dropdownlist or the popup window's height ends up getting set to -2px, which causes the program to come to a screeching halt.

I don't have any such problem if I use a standard dropdown listbox, but I need to show both a code and a description in the dropdown and a standard dropdown comes with its own set of problems in that circumstance. To separate the description from the code and to evenly align the description, I modified the DataText property by setting it equal to the code plus a tab character plus the description thusly, ddList.DataText = "Code" + Chrw$(9) + "Description". Once it's rendered on the screen, I view the source and it shows all the codes and descriptions with the tab between them allowing the descriptions to be aligned properly. But the browser strips out the tab character and replaces it with a space.

I'm about to give up on this and was wondering if anyone has had any luck doing the same thing?

Allen A.

There is no tab in html. It will be replaced by (or non breaking space). You can add a definite number of non breaking space to format your listitems. Sorry not able to give simple solution.

dropdownlist in a tabpanel to display data from previous tabpanel

Hello All,

I have a DropDownList in one of my tab panels. The data to this dropdown is provided by a datasource. The data to this datasource is filled in one of the other tab panels. Since the contents of the other tab panel are inside an update panel, a full postback doesnt take place and hence my dropdown does not show any data that was added in the previous tab(unless you do a refresh on the page). Can anyone help me solve this issue with any suggestions? (I tried using the OnPreRender of the dropdownlist to bind the datasource but still it wouldnt display the most recently added data)

Any help will be greatly appreciated.

Thanks,

Nicky

Hi Nicky, Can you provide a small sample to illustrate it?

Raymond Wen - MSFT:

Hi Nicky, Can you provide a small sample to illustrate it?

Hello Raymond,

Sure. Here are the two Tab Panels that I amtalking about. The 'DetailsView' with ID "SpecializationCodeView1" onthe first tab panel inserts data and the 'DropDown' with ID"DropDownList2" on the second tab panel should display the inserteddata.

I could not use the same DataSourceID for these twocontrols since I am using "<%# Bind("specializationCode") %>" forthe dropdown andby doing so it gives me an error "Functions like Eval(), Bind() etc. can be used only with databound objects" while inserting data.

Can you please help?

Thanks,

Nicky

<ajaxToolkit:TabPanel ID="TabPanel4" runat="server">
<HeaderTemplate>Specializations</HeaderTemplate>
<ContentTemplate>
<asp:UpdatePanel ID="SpecializationGridUpdatePanel" runat="server">
<ContentTemplate>
<asp:GridView ID="SpecializationGrid" runat="server"DataKeyNames="id" DataSourceID="SpecializationDataSource2"
GridLines="Horizontal" Width="314px">
<Columns>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
<asp:BoundField DataField="code" HeaderText="code" SortExpression="code" />
<asp:BoundField DataField="description" HeaderText="description" SortExpression="description" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SpecializationCodeView1" EventName="ModeChanged" />
</Triggers>
</asp:UpdatePanel>
<br />
<asp:UpdatePanel ID="SpecializationViewUpdatePanel" runat="server">
<ContentTemplate>
<asp:DetailsView ID="SpecializationCodeView1" runat="server" AutoGenerateRows="False"
CellPadding="3" DataKeyNames="id" DataSourceID="SpecializationDataSource2" DefaultMode="Insert">
<Fields>
<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True"
SortExpression="id" />
<asp:BoundField DataField="code" HeaderText="code" SortExpression="code" />
<asp:BoundField DataField="description" HeaderText="description" SortExpression="description" />
<asp:CommandField ShowInsertButton="True" />
</Fields>
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel ID="TabPanel5" runat="server" >
<HeaderTemplate>
Sub Specializations
</HeaderTemplate>
<ContentTemplate>
<br />
<asp:UpdatePanel ID="SubSpecializationGridUpdatePanel" runat="server">
<ContentTemplate>
<asp:GridView ID="SubSpecializationGrid"runat="server" DataKeyNames="id"DataSourceID="SubSpecializationDataSource"
GridLines="Horizontal">
<Columns>
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True"
SortExpression="id" Visible="False" />
<asp:BoundField DataField="code" HeaderText="code" SortExpression="code" />
<asp:BoundField DataField="description" HeaderText="description" SortExpression="description" />
<asp:BoundFieldDataField="specializationCode" HeaderText="specializationCode"SortExpression="specializationCode" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SubSpecializationsView" EventName="ModeChanged" />
</Triggers>
</asp:UpdatePanel>
<br />
<asp:UpdatePanel ID="SubSpecializationInsertUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="SubSpecializationsView" runat="server" AutoGenerateRows="False"
DataKeyNames="id" DataSourceID="SubSpecializationDataSource"
DefaultMode="Insert" GridLines="Horizontal" Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True"
SortExpression="id" />
<asp:BoundField DataField="code" HeaderText="code" SortExpression="code" />
<asp:BoundField DataField="description" HeaderText="description" SortExpression="description" />
<asp:TemplateField HeaderText="specializationCode" SortExpression="specializationCode">
<EditItemTemplate>
<asp:Label ID="Label1"runat="server" Text='<%# Eval("specializationCode")%>'></asp:Label>
</EditItemTemplate>
<InsertItemTemplate>
<asp:DropDownList ID="DropDownList2" runat="server" DataSourceID="SpecializationDataSource"
DataTextField="description"DataValueField="code" SelectedValue='<%# Bind("specializationCode")%>'>
</asp:DropDownList>
</InsertItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1"runat="server" Text='<%# Bind("specializationCode")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowInsertButton="True" />
</Fields>
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>

</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

I can't run the code directly.

But may be you can try to force the updatePanel that contains the DDL update in the ItemInserted event of the DetailsView?

protected void SpecializationCodeView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
{
UpdatePanel up = tabContainer1.Tabs[1].Controls[0].FindControl("SubSpecializationInsertUpdatePanel") as UpdatePanel;
up.Update();
}

bvc xvbvx xvbcvcbcv cvb
bvc xvbvx xvbcvcbcv cvb

DropDownList Flicker, Rendering and Slow

I keep noticing a flicker on a dropdown with only three items in it. These three items don't change between postbacks, so why is the UpdatePannel rendering them again?

Also, there is a similar problem with listboxes:

UpdatePanel PartialRendering large ListBoxes
http://forums.asp.net/thread/1363249.aspx

and it looks like large listboxes and dropdowns are both taking a long time for the callback to complete. Any ideas?

Try setting the UpdatePanel's

Mode="Conditional"

to fix the UpdatePanel always rendering issue. As to flickering, not sure on that one. I haven't seen it personally, but it may be browser specific. Have you tried this in different browsers to see what the effect is?

Hi,

as Glav suggested, the DropDownList flickering is specific to IE6. It is an issue in how the browser renders boxed elements, and I think it has been fixed in IE7beta.
Regarding the rendering delay, it may be related to dynamic DOM manipulation (for a DropDownList inside an UpdatePanel, recall that it will be rendered and dynamically populated on every partial postback) thus this is not an Atlas-specific issue and also you may experience it on almost all browsers (but maybe IE will be slower than others).

Thanks Paul.

That works for a lot of things. The trouble is I have a robust, windows like UI with a lot of controls in a browser with various master-detail-detail-detail style panels, so:

In the simple case, having several conditional UpdatePanels handle several Controls each, the Triggers aren't too bad between UpdatePanels, but DropDownLists and ListBoxes within the same UpdatePanel still get re-rendered.

Thanks Garbin, that's good to know

I'm not manipulating the DropDownList at all. Even an empty list exhibits this behavior, but it does appear that Atlas is unnecessarily manipulating the DOM for DropDownLists and ListBoxes, so I would need to argue that this is anAtlas-specific issue.

I think DropDownList and ListBoxes still need a lot of work and hopefully it will at least get looked at for the Atlas August CTP, because right now they are ridiculously slow.

See my other post:

UpdatePanel PartialRendering large ListBoxes
http://forums.asp.net/thread/1363249.aspx

From my vantage, it's a big enough of an issue where I wouldn't even consider deploying any sites done with Atlas until this improves. Maxing out the CPU on a client for any length time is just not acceptable.

Best Regards,

Dan

Hi,

dbDan:

I'm not manipulating the DropDownList at all. Even an empty listexhibits this behavior, but it does appear that Atlas is unnecessarilymanipulating the DOM for DropDownLists and ListBoxes, so I would needto argue that this is anAtlas-specific issue.

are you referring to the flickering issue or the slow rendering? The first one is IE-specific, while I can't think of the second one as an Atlas-specific issue, since dynamically adding 5000 items to a ListBox using pure JavaScript (no Atlas) is slowing down IE, FireFox, Opera (I didn't test it on other browsers).

Hi Garbin,

I'm sure you're right about the flickering, but I haven't had a chance to check out IE 7 yet.

This post was intended to be more about "unnecessary" rendering which causes "slow" rendering to occur more often. I guess I'm looking for some way to tell the ScriptManager that certain triggers are to hide/unhide the entire panel or maybe even just one control only, so it could be a little smarter about things.

In any case, it doesn't matter if you create a ListBox with static HTML, with JavaScript or as a Databound ListBox. It originally renders fine. But if it's in an UpdatePanel with PartialRendering enabled, the callback has some serious problems.

This post is just part of the issue, what I consider the real problem is described better in my other post.

http://forums.asp.net/thread/1363249.aspx

It got a low priority. I should have called it the "Atlas Callback CPU Loop Hog" bug or something, to see if that would at least get a semi-low priority :)

So that leaves me wondering if there is a way to get this issue/problem escalated to the point where someone will at least look at to see if its a simple fix or not.

Thanks,

Dan

I have a little more info on this one. I did a release to a Windows 2003 staging server. Although the delay is still obvious, it isn't nearly as bad.

Changing from Debug to Release mode doesn't seem to improve these ListBox and DropDownList delays on my Windows XP development machine.

Hopefully this makes it easier to duplicate or narrow down the problem(s), but I'm not so sure they are entirely on the client side anymore.

I just did some conditional pop-up dialogs based on the data, so I have a temporary workaround demonstration purposes, so I'm moving on to other things.

Does anybody know if this is the best forum to be reporting Atlas bugs?

Thanks,

Dan

Hi,

you can report bugs in these forums or also in theMicrosoft Connect website.

Thanks Garbin

I added these two posts toMicrosoft Connect as:

Atlas PartialRender CPU Bound/Slow with ListBoxes and DropDownLists

https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=178704

Atlas UpdatePanel Trigger for Visible/Hidden Controls

https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=178708

BTW - Like theAtlas Weblog a lot.

Best Regards,

Dan

DropDownExtender Visual Question

When you hover over the dropdown element it gets a really nice khaki background, blue border, and a down image. More or less it looks like a drop down after you hover over the text.

Is there a way to get this style to be the default style? The dropdown extender is kind of misleading in that you wont know its a drop down menu till you hover over the text and expose the style that then displays it as a menu.

Any ideas?

It really depends on what you're trying to put the dropdown extender on - but generally, for something like a label, you could create an image, that looked very much like the dropdown extenders outside - and set it as the background to an appropriatly sized Div. Put the label inside the div, and apply the extender to the label.