title: Loading dropdownlist on click of the dropdown's arrow/lazy loading of dropdown
body: <p>I have a situation where on a page there are 7-8 dropdowns, which have large amount of data to be bound. I have a radiobutton list having 2 choices and on selecting any of them, the I get the data from cache and bind all the dropdowns which takes about 6-7 seconds. But, I don't use all the dropdown every time as basic functionality is based on a date range. So I was thinking , if I could load the dropdown on demand, i.e. on click of dropdown arrow, I would bind the dropdown, the it would be better and user does not have to wait for those 6-7 seconds while switching between the radiobuttonlist choices. I tried calling a JS function on dropdown's onClick and from there firing one button's event. I am getting the data populated on dropdown's click but, the dropdown gets collapsed as soon as the data is bound, and user have to click again to select from dropdownlist items.I was just wondering if anyone can give me an idea so that the dropdown wont collapse and stays after binding, or else a full idea of lazy loading of the dropdown. I have also specified some of my code from my POC.</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-   transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script type="text/javascript" language="javascript"&gt;
    function load() {
          //debugger;
          var dropdown = document.getElementById('DropDownList1');
          var ln = dropdown.options.length;
          if (ln == 0) {
              var btn = document.getElementById('Button1');
              btn.click();
          }
          dropdown.click();
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"/&gt;
  &lt;div&gt;
  
      &lt;asp:DropDownList ID="DropDownList1" runat="server" onClick="javascript:load();"&gt;
      &lt;/asp:DropDownList&gt;
      &lt;asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" Style="display:   noone;"/&gt;
  
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  
  
  public partial class _Default : System.Web.UI.Page 
  {
   protected void Page_Load(object sender, EventArgs e)
   {
  
   }
   protected void Button1_Click(object sender, EventArgs e)
   {
      ArrayList arr = new ArrayList();
      arr.Add("Item1");
      arr.Add("Item2");
      arr.Add("Item3");
      DropDownList1.DataSource = arr;
      DropDownList1.DataBind();
   }
  }
  &lt;/html&gt;
  </code></pre>