jQuery UI Widgets Forums Lists DropDownList Dynamically change dropDownVerticalAlignment:

This topic contains 1 reply, has 2 voices, and was last updated by  ivanpeevski 12 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • wsundet
    Participant

    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


    ivanpeevski
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.