Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
645
How to close webdropdown if it remains open when user click outside the control
posted

Hi,

We have Visual Webpart which has tree inside webdropdown and you can select multiple items in from the tree.
Everything works fine but only issue is the drop down is not getting closed when user is clicking outside the control.

I have included the aspx code just in case.

function closeGlobalDropDown(sender, eventArgs) {
setTimeout("closeGlobalDropDownImpl();", 10);
}
function closeGlobalDropDownImpl() {
//ig_controls.ctlRegionCountryPicker_drpCountries._elements["Input"].focus();
$find('<%=drpGlobal.ClientID%>')._elements["Input"].focus();
}

function drpGlobal_DropDownClosed() {
updateCountryDropdown();
$get("<%=btnGlobal.ClientID%>").click();
}

function updateCountryDropdown() {
//get the checked tree items
}
</script>
<asp:UpdatePanel runat="server" ID="up" UpdateMode="Conditional" >
<ContentTemplate>
<table>
<tr>
<td>
<ig:WebDropDown runat="server" ID="drpGlobal" DisplayMode="ReadOnlyList" EnableClosingDropDownOnSelect="False"
ClientEvents-DropDownClosed="drpGlobal_DropDownClosed" DropDownAnimationDuration="0">
<Templates>
<ig:ItemTemplate TemplateID="template">
<Template>
<ig:WebDataTree ID="tree" runat="server" Enabled="True" Height="185px" CheckBoxMode="TriState"
OnLoad="tree_Load" AnimationDuration="0" InitialExpandDepth="1" SelectionType="None"
Width="290px">
<ClientEvents NodeClick="closeGlobalDropDown" NodeExpanded="closeGlobalDropDown"
NodeCollapsed="closeGlobalDropDown" NodeChecking="closeGlobalDropDown" />
</ig:WebDataTree>
</Template>
</ig:ItemTemplate>
</Templates>
<Items>
<ig:DropDownItem Value="Test" Selected="False" TemplateId="template" />
</Items>
</ig:WebDropDown>

</td>

</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

Please let me know if I'm missing something.


Thanks,
Sanjay