I have three WebDropDown controls (WDDL1, WDDL2, WDDL3) on my page. The first two are cascading. After selecting a value in WDDL1, the values in WDDL2 are properly filtered. WDDL3 is independent, and not tied to the first two. I am able to use the auto suggest feature with WDDL2. I would like to be able to use the auto suggest feature with WDDL1 and WDDL3, but as soon as I type in a character, the "WDDLChanged" javascript function is fired. I prefer to have the "WDDLChanged" javascript function fire AFTER a selection is made in the drop down list. This is the markup for WDDL1, WDDL2, WDDL3 on the page:
<ig:WebDropDown ID="WDDL1" runat="server" AutoPostBack="false" EnablePaging="false" PageSize="10" EnableRenderingAnchors="false" ForeColor="Black" DataSourceID="WDDL1SqlDataSource" Visible="true" Width="375" selectedValue='<%# Bind("dept_cd") %>' OnPreRender="WDDL1_OnPreRender" OnDataBound="WDDL1_OnDataBound" OnSelectionChanged="WDDL1_OnSelectionChanged" > <ClientEvents SelectionChanged="WDDL1Changed" /> <DropDownItemBinding TextField="dept_desc" ValueField="dept_code" /></ig:WebDropDown> <asp:SqlDataSource ID="WDDL1SqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:PDMConnectionString %>" OnDataBinding="WDDL1SqlDataSource_OnDataBinding" SelectCommandType="StoredProcedure" SelectCommand="SELECT_MASTER_PRACTICE_LIST" ></asp:SqlDataSource>***********************************This is the Javascript function that is called in WDDL1's SelectionChanged ClientEvent:function WDDL1Changed(sender, e) { var ddlWDDL2 = $find(WDDL2_id); var newSelection = e.getNewSelection()[0].get_value(); --get reference to hidden field that stores selected value from WDDL1 var hdnPPval = document.getElementById(hdnPPval_id); hdnPPval.value = newSelection; ddlWDDL2.loadItems(newSelection);}***********************************<ig:WebDropDown ID="WDDL2" runat="server" EnablePaging="false" PageSize="10" DataSourceID="WDDL2SqlDataSource4" Width="375" OnItemsRequested="WDDL2_OnItemsRequested" OnDataBound="WDDL2_OnDataBound" selectedValue='<%#DataBinder.Eval(Container.DataItem,"nom") %>' OnPreRender="WDDL2_PreRender" OnSelectionChanged="WDDL2_OnSelectionChanged" EnableRenderingAnchors="false" ForeColor="Black" > <DropDownItemBinding TextField="label" ValueField="nom_cd" /></ig:WebDropDown><asp:SqlDataSource ID="WDDL2SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:PDMConnectionString %>" OnDataBinding="WDDL2SqlDataSource4_OnDataBinding" SelectCommand = "select ' ' dept_cd, '%' nom_cd, '---PDM NOM GROUPING---' label, 'AA' desc2, 'AAA' sort_order union select pn.dept_cd dept_cd,pn.nom nom_cd, m.nature_desc + ' (' + pn.nom + ')' label, m.nature_desc desc2,'AAB' sort_order from TABLE1 pn, TABLE2 m where pn.nom = m.nature_cd and pn.dept_cd like @dept_cd and len(m.nature_cd) = 3 union select ' ' dept_cd, '%' nom_cd, '---MASTER LIST OF NOMS---' label, 'BB' desc2, 'BBB' sort_order union select ' ' dept_cd, nature_cd nom_cd, m.nature_desc + ' (' + m.nature_cd + ')' label, m.nature_desc desc2, 'BBC' sort_order from TABLE3 m where len(m.nature_cd) = 3 order by sort_order, desc2 "><SelectParameters><asp:Parameter Name="dept_cd" DbType="String" DefaultValue="%" /></SelectParameters> </asp:SqlDataSource><ig:WebDropDown ID="WDDL3" runat="server" selectedValue='<%# Eval("lsc") %>' DataSourceID="WDDL3SqlDataSource" Width="375px" EnablePaging="false" PageSize="10" EnableRenderingAnchors="false" ForeColor="Black" OnPreRender="WDDL3_OnPreRender" OnDataBound="WDDL3_OnDataBound" > <DropDownItemBinding TextField="ud_desc" ValueField="udvalue" /> </ig:WebDropDown><asp:SqlDataSource ID="WDDL3SqlDataSource" runat="server" OnDataBinding="WDDL3SqlDataSource_OnDataBinding" ConnectionString="<%$ ConnectionStrings:PDMConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="SELECT_MASTER_LSC" ></asp:SqlDataSource>Is there a way to retain this functionality and fire ClientEvents ONLY after the selection is made in WDDL2 and WDDL3?Thank you,Chris
Hi Chris,
I'm glad you solved your issue. Let me know if you have any other questions.
Thank you for your reply. I was able to resolve this by changing the ClientEvent to use<ClientEvents DropDownClosed="primPracDropDownClosed" />My Javascript function is called after the selection is made, and is able to grab the newly selected value using "sender.get_selectedItem().get_value();".
Thank you,
Chris
Hello cpalko,
I made some research and it seems that the SelectionChanged client-side event is fired every time the value in the input is changed, because basically this is modifying the value of selected item. However I would suggest you to try setting the EnableAutoFiltering=”Server” and using AutoFilterTimeoutMs property which defines a timeout before a filtering request is sent to the server, so that a request is not made on every keystroke.
If you have any other questions regarding this, please feel free to contact me.