jqxdropdownlist autoClose

[damcParticipant]

Hi,

Is it possible to set the drop-down(jqxDropDownList) is automatically closed when the mouse cursor is moved from the widget (it closes like with autoOpen property but opens on click)?

Thank you for your help.

[Peter StoevKeymaster]

Hi damc,

You can achieve that with a combination of the jqxDropDownList’s ‘open’, ‘close’ events and the ‘autoOpen’ property.

Example:

              $("#jqxWidget").bind('open', function () {
                    $("#jqxWidget").jqxDropDownList({ autoOpen: true });
                });
                $("#jqxWidget").bind('close', function () {
                    $("#jqxWidget").jqxDropDownList({ autoOpen: false });
                });

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[damcParticipant]

Hi,

Thanks. I will try.

I have multiple jqxdropdownlist on page and if user opens one and select another drop-down, first stays open (NOT OK). If user select input field it closes (OK). Is this normally that it works like I write it?

Thank you for your help.

[Peter StoevKeymaster]

Hi damc,

Do you initialize them from class or by id? The expected initialization is by Id.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[damcParticipant]

Hi Peter,

I initialize them by id.

[Peter StoevKeymaster]

Hi damc,

Do you use the latest version – jQWidgets 2.4.2? In addition, could you send us a sample which demonstrates the behavior to support@jqwidgets.com?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[damcParticipant]

Hi Peter,

I use jQWidgets 2.4.2.

My code:

jQuery('#jqxDropDownList1').jqxDropDownList({
	source			: dataAdapter,
	selectedIndex	: 1,
	animationType	: 'none',
	width			: '149',
	height			: '22',
	dropDownWidth	: '700',
	displayMember	: 'dis1',
	valueMember		: 'val',
	disabled		: false
});
source = {
	localdata	: self.myData.arrayA,
	datatype	: 'local'
};
dataAdapter = new jQuery.jqx.dataAdapter(source);
jQuery('#jqxDropDownList1').jqxDropDownList({
	source			: dataAdapter,
	selectedIndex	: 1,
	animationType	: 'none',
	width			: '149',
	height			: '22',
	dropDownWidth	: '700',
	displayMember	: 'dis1',
	valueMember		: 'val',
	disabled		: false
});
source = {
	localdata	: self.myData.arrayB,
	datatype	: 'local'
};
dataAdapter = new jQuery.jqx.dataAdapter(source);

[Peter StoevKeymaster]

Hi damc,

I don’t understand your code. You have 2 identical initializations for 1 DIV tag with id = jqxDropDownList1. If you want to create multiple DropDownLists, you need to add DIV tags with unique IDs to your web page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[damcParticipant]

Hi Peter,

Sorry. I mistyped.

My code:

jQuery('#jqxDropDownList1').jqxDropDownList({
	source			: dataAdapter,
	selectedIndex	: 1,
	animationType	: 'none',
	width			: '149',
	height			: '22',
	dropDownWidth	: '700',
	displayMember	: 'dis1',
	valueMember		: 'val',
	disabled		: false
});
source = {
	localdata	: self.myData.arrayA,
	datatype	: 'local'
};
dataAdapter = new jQuery.jqx.dataAdapter(source);
jQuery('#jqxDropDownList2').jqxDropDownList({
	source			: dataAdapter,
	selectedIndex	: 1,
	animationType	: 'none',
	width			: '149',
	height			: '22',
	dropDownWidth	: '700',
	displayMember	: 'dis1',
	valueMember		: 'val',
	disabled		: false
});
source = {
	localdata	: self.myData.arrayB,
	datatype	: 'local'
};
dataAdapter = new jQuery.jqx.dataAdapter(source);

Thank you.

[Peter StoevKeymaster]

Hi damc,

You will have to remove the animationType setting, because the reported issue is related to that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[damcParticipant]

Hi Peter,

If I remove animationType setting it works. Have you plan to solve this issue in next version?

Thank you.

[Peter StoevKeymaster]

Hi damc,

Yes, of course. The reported issue will be resolved in the next version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dlooParticipant]

This is still happening for me: the jqxdropdownlist stays open while I switch jqxTabs. I dont want to use autoOpen.

I am running jqwidgets 3.0.4

// Create a jqxDropDownList
$(‘#jqxDDDayListsd’).jqxDropDownList({ source: [“1 Day”,”2 Days”,”3 Days”, “4 Days”, “5 Days”, “6 Days”, “7 Days”],
theme: theme,
selectedIndex: 0,
width: ’70px’,
height: ’25px’,
dropDownHeight: 180 });

Thanks
David

[Peter StoevKeymaster]

Hi David,

Use the “close” method if you want to close the widget’s DropDown.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dlooParticipant]

How do I detect that my mouse has moved away from the widget in order for me to call the “close” method ?

Thanks
David

[Author]

Posts