Wednesday, March 21, 2012

A <select> box with 10000 options inside UpdatePanel brings async postback to a craw

I have a databound FormView control inside an UpdatePanel. Also in the UpdatePanel is a <select> box with 10000 options. (The <select> box is not in the FormView.) When I make a change to the FormView and click "Update" it takes close totwo minutes to complete the update. If I move the <select> box and the FormView outside of the UpdatePanel and repeat the same steps, the update is immediate! Can anyone help me solve this? I don't understand why it's taking so long to post back when it's in the UpdatePanel. But I need the update to occur in the UpdatePanel for the Async Postback and I also need the <select> box inside the UpdatePanel as well. Thanks in advance! -figz

I gotta ask. Where did you find a user willing to choose among 10,000 options?

Jeff


Great question! My users are our accountants; need I say more? :-) They have to choose from our entire Chart of Accounts when filling out the form.

i agree with jeff. come on, be real. your accountants must be dead after clicking 10,000 options. it's not only clicking but they have to read first before clicking.

there's no solution to your question. that's how Updatepanel works. or you can split the 10,000 to several pages. geeze, i would rather die than working for your company =)


...not sure what you mean by "clicking 10000 options." It's a dropdownlist sorted by account number. Even though there are 10000 choices, it's easy to find the one you want quickly.


Anyway, I tried moving the dropdownlist outside of the updatepanel, but then it doesn't get databound. So I moved it into another UpdatePanel but it's still slow. I think I what I need is for the second UpdatePanel to have UpdateMode=Always so that the DropDownList gets Databound, but also UpdateMode=Conditional so that it doesn't get posted back when my FormView does. Any suggestions for how to accomplish that? Thanks!


LOL, my bad.

still i don't want to work for you company. =)
10,000 options in a dropdown list is also slow; there is too much data.

would a search form work? how about autocomplete extender? or list A,B,C,D to ... Z ... when he/she clicks a letter, then display all the options under that letter, like a dictionary... will it do?


I appreciate the suggestion, but from a UI standpoint, the accountants are used to choosing from a big list in Excel so they like the 10000 item dropdownlist. I'm sure there is a way to make this work since it works fine when it's not in an UpdatePanel. I managed to fix it partially but I still need help. Here's what I did:

I moved the DropDownList into its own UpdatePanel with UpdateMode=Conditional. When the FormView databinds, it also binds the DropDownList to the 10000 items and calls Update() on that new UpdatePanel so that it shows up. I'm able to then save my FormView and it works very quickly. HOWEVER, all subsequent saves are still slow. Why does it work quickly the first time, but slow every other time? Thanks in advance for your help. -figz


Upon further research... I found this thread: http://forums.asp.net/p/1089566/1629936.aspx

What is happening is that the server side is happening very quick but IE's javascript rendering is very slow to render those 10000 options. (Incidentally, the page renders in about 1/16th the time in Firefox). So the first time the page loads, the 10000 options are being generated server side, but the subsequent times, they are being done async by javascript which is very slow.

My only option it seems is to move the DropDownList outside of any UpdatePanel and generate the list on PageLoad. The problem is that the list is dependent on items chosen inside the UpdatePanel which means that if they change, I have no way of refreshing the DropDownList because items in an UpdatePanel can't talk to items outside of the UpdatePanel. Any other ideas? Thanks! -figz


Since your users want the luxury of having 10,000 items in the List Box, how about you sacrifice your luxury and replace the UpdatePanel with WebService Call (Client Centric Development Model)?


I'm new to AJAX so I'll have to research that. In the meantime, can you provide an overview of what this means and how it will help my issue? Thanks! -figz


You might want to read the following thread and the side threads. Although not exactly the same, you will get a great deal of insight into the problem. In fact what you want to do can probably be done almost instantaneously by combining some client side Javascript with the knowledge of exactly what it is that you need to accomplish.

http://forums.asp.net/p/1065352/1540804.aspx#1540804

Once you have read that, take a good look at the PageRequestManager and the examples involving it. You will find a lot of power to execute the operations far faster and realize the UpdatePanel is not always the best choice. Updating only exactly what you need to and without the catch-all client-side code of the UpdatePanel is the answer.


Just for completeness, this link is also helpful.
http://forums.asp.net/p/1158591/1910791.aspx

No comments:

Post a Comment