JQGrid Multiselect filter's scrollbar - how to set

Question

Currently I am facing issue with enabling a vertical scroll-bar for multiselect filters.

Below are the code where I am setting multiselect filter for "DemandId" like this:setSearchSelect("DemandId", jQuery("#listTable"));.

setSearchSelect = function (columnName, grid) {
            grid.jqGrid('setColProp', columnName,
                    {
                        searchoptions: {
                            clearSearch: false,
                            sopt: ['eq', 'ne'],
                            value: buildSearchSelect(getUniqueNames(columnName, grid)),
                            attr: { multiple: 'multiple', size: 3 },
                            dataInit: dataInitMultiselect
                        }
                    }
        );
dataInitMultiselect = function (elem) {
                    setTimeout(function () {
                        var $elem = $(elem), id = elem.id,
                            inToolbar = typeof id === "string" && id.substr(0, 3) === "gs_",
                            options = {
                                selectedList: 2,
                                height: "auto",
                                checkAllText: "all",
                                uncheckAllText: "no",
                                noneSelectedText: "Any",
                                open: function () {
                                    var $menu = $(".ui-multiselect-menu:visible");
                                    $menu.width("auto");
                                    return;
                                }
                            },
                            $options = $elem.find("option");
                        if ($options.length > 0 && $options[0].selected) {
                            $options[0].selected = false; // unselect the first selected option
                        }
                        if (inToolbar) {
                            options.minWidth = 'auto';
                        }
                        //$elem.multiselect(options);
                        $elem.multiselect(options).multiselectfilter({ placeholder: '' });
                        $elem.siblings('button.ui-multiselect').css({
                            width: inToolbar ? "98%" : "100%",
                            marginTop: "1px",
                            marginBottom: "1px",
                            paddingTop: "3px"
                        });
                    }, 50);

How can I enable vertical scroll bar in Multiselect filter of a JQGrid.

Any help is highly appreciated.

Answer 1

You use height: "auto" option of multiselect currently. Instead of that you can use elem.childElementCount or $elem.find("option").length to get the number of items. If you have too many items you can use some fixed number value for height parameter instead of height: "auto". Alternatively you can set max-height CSS property to <ul> which is direct child of $menu inside of open callback. For example try to use

open: function () {
    var $menu = $(".ui-multiselect-menu:visible");
    $menu.width("auto");
    $menu.find(">ul").css("maxHeight", "50px"); // some max-height value
    return;
}