Dynamically change dropDownVerticalAlignment:

[wsundetParticipant]

Your example show how to change dropDownVerticalAlignment using a Button Event.

$(“#bottomAlign”).on(‘checked’, function () {
$(“#jqxWidget”).jqxDropDownList({ dropDownVerticalAlignment: ‘bottom’ });
});
$(“#topAlign”).on(‘checked’, function () {
$(“#jqxWidget”).jqxDropDownList({ dropDownVerticalAlignment: ‘top’ });
});

I need to dynamically change dropDownVerticalAlignment.

I use jqxGrid and jqxDropdownList with the editor in some of the columns. If the grid entries fill the page, the dropdown list needs to change to (dropDownVerticalAlignment: top) so that the user can see the values. Otherwise they are displayed off the screen on the bottom.

initeditor: function (editedRow, cellvalue, editor) {
endRow = editedRow;
editor.jqxDropDownList({
source: drugAllergy,
placeHolder: “Choose:”,
autoOpen: true,
width: “70%”,
height: 50,
itemHeight: 50,
animationType: “slide”
});
editor.on(“select”, function (event) {
$(“#DrugAllergyInfo”).jqxGrid(“endcelledit”, endRow, “Drug”, false);
});
}
How can this be done?

Thank you,
Warren

[ivanpeevskiParticipant]

Hi Warren,

This functionality is not natively supported by the component, but it is possible to create this behavior with a custom function.
Please, have a look at the DynamicAlignment() function in the demo below. It should receive the id of the DropDownList element. The function is called every time the user scrolls the page.
https://stackblitz.com/edit/jquery-gnvuef?file=index.html
Please note that in the demo above, in some cases the list will still be off screen due to the site’s header and footer, which cannot be calculated. The function should work as intended inside your project.

If you have any other questions, please do not hesitate to contact us again.
Best Regards,
Ivan Peevski
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts