Cascading Drop Down List fires OnSelected​IndexChang​ed event only once in two times....

See more:

C#

ASP.NET

Javascript

Ajax

Hi guys,

I have an ASP.NET AJAX Codeplex toolkit Cascading Dropdown list control in a user control called by a page. The problem is that after population of data into the drop down lists, the user selects an item from one of the drop down lists, but it fires it’s selected index changed event handler only once every two times. That means the code needed to be run in order to populate other controls based on the selected index of this drop down list only gets populated once every two times!

Here is how it’s defined:

User Control:
- Contains four drop down list controls initiated by a separate fifth primary drop down list control.
- The four cascading drop down list controls are each attached to an individual ASP.NET Codeplex AJAX Cascading Drop Down List Extender (AutoPostBack = false on all drop down lists attached to cascading drop down list extenders).
- The drop down lists are populated using a web service that’s tied to the Cascading Drop Down List Extender.
- The drop down lists and their respective extenders are wrapped in divs and spans, however, the problematic drop down list (the one I’m referring to in this post) although wrapped in divs and spans are also wrapped in a panel:

<asp:Panel id="rowProgram" Visible="false" runat="server" style="display: none">
                        <div class="ElementContainer" captureelement="true" runat="server">
                              <span class="LabelContainer">
                                    <asp:label id="lblProgram" runat="server" CssClass="Label" />
                              </span>
                              <span class="ControlContainer">
                                    <asp:dropdownlist id="lstProgram" runat="server" CssClass="DropDownList"/>
                                    <cc1:CascadingDropDown ID="lstProgram_CascadingDropDown"
                                      runat="server"
                                      ServicePath="~/WebServices/AjaxService.asmx"
                                      ServiceMethod="AJAXLoadPrograms"
                                      TargetControlID="lstProgram"
                                          ParentControlID="lstTransSubType3"
                                      Category="Program"
                                      UseContextKey="true" BehaviorID="lstProgram_Behaviour">
                    </cc1:CascadingDropDown>
                              </span>
                              <span class="InfoPopContainer">
                                    <exos:infopop id="popProgram" Width="300" Height="40" runat="server" />
                              </span>
                              <input id="inProgramDescription" type="hidden" value="" runat="server" />
                              <input id="inProgramValue" type="hidden" value="" runat="server" />
                        </div>
</asp:Panel>

ASPX Page:
- Embeds the user control into its markup and sets the selected index changed event handler for the user control’s drop down list in question.

What happens here is when the user control’s drop down list’s (I’ll call this ‘lstProgram’ from now on) OnSelectedIndexChanged event handler has been invoked, it always executes the first time, and never the second....it will execute the third time and not the fourth, and so on.

My workaround which doesn’t work!

I attempted a work around after reading many forums and implemented this, but it doesn’t work:

User Control:
- Created public event to be called by page

public event EventHandler OnProgramChange;

Changed “AutoPostBack = True” on the lstProgram drop down list control.

- Added this JavaScript function in the markup:

function callServer()
{
   setTimeout(function(){__doPostBack('ctl00$PageBody$EXOSTransTypeSubType$lstProgram','')}, 0);
}

- Added this logic within the Page_Load:

if (Page.IsPostBack && _doPostBackSection) 
            { 
                if (_programPostBack) ß This boolean flag is set to true when I want this dorp down list’s  
event handler to execute. 
                { 
                    if (lstProgram.Items.Count > 0) 
                    { 
                        lstProgram.Attributes.Add("onchange", "callServer()"); 
                    } 
                    else 
                    { 
                        Page.ClientScript.RegisterStartupScript(typeof(string), "progPB", "<script language=\"javascript\" type=\"text/javascript\">setTimeout(" + '"' + "callServer()" + '"' + ", 500);</script>"); 
                    } 
                }

- Added this line of code in the InitializeComponent() function and added code to lstProgram’s SelectedIndexChanged event handler:

this.lstProgram.SelectedIndexChanged += new EventHandler(lstProgram_SelectedIndexChanged);

protected void lstProgram_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (OnProgramChange != null)
            {
                OnProgramChange(sender, e);
            }
  }

ASPX Page:
- Added this line of code to InitalizeComponent and added code to the OnProgramChange event handler to execute when an event has been raised from the user control:

this.EXOSTransTypeSubType.OnProgramChange += new EventHandler(EXOSTransTypeSubType_OnProgramChange); 
  
void EXOSTransTypeSubType_OnProgramChange(object sender, EventArgs e) 
      { 
            // I want these two lines of code to execute in order to populate  
               other controls based on the drop down list selection. 
            _programID = EXOSTransTypeSubType.GetProgramID(); 
            loadProgramRelatedDropDowns();  
      }   

So, to wrap things up, the cascading drop down lists work fine; they populate the data accordingly, however the problem lies after population of data within the drop down lists and the user selects an item from lstProgram (after it has been populated). The “OnProgramChange” event gets fired only once every two times.

Please help!

Thanks,

Ben.