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
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.
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