free-jqGrid 4.13.4 multiselect toolbar filter not

Question

I have looked at all of the Q & A about the use of the Multiselect widget in the filter toolbar of jqGrid. I have noticed that in almost all the solutions, the jqGrid versions and the jquery versions are not current ones. I am using the most current versions of both jqGrid (4.13.4) and jquery (3.1.1) and jqueryUI (1.12.1).

I have tried the sample code from here in my javascript. It loads fine, but when I try to choose any of the values from the multiselect, the grid clears and remains cleared even when deselecting the values from the multiselect.

I just want to make sure that this solution works with the most current versions of free-jqGrid, jquery, and jqueryUI that I am using.

Answer 1

Here's the fix for the "Any" option in the drop down to return all the options in the select control.

Modify this section of the code:

modifySearchingFilter = function (separator) {
var i, l, rules, rule, parts, j, group, str,
    filters = $.parseJSON(this.p.postData.filters);
console.log(filters);
rules = filters.rules;
console.log(rules.length)
for (i = 0; i < rules.length; i++) {
    rule = rules[i];
    if (rule.data == "") {
        rule.op = "ne"; //this will return anything not equal to ""
    }
}
console.log("after splicing: " + JSON.stringify(filters))
this.p.postData.filters = JSON.stringify(filters);},

The important part if to add the check of the rules and return a not equal ("ne") for the operator. This will create a rule that filters out all options that are not equal to an empty string. This should return all the select options, in other words, reset the select to it's initial state which shows all the options in the select and it will return all the records in the grid. Hope this helps in the future.

Answer 2

I posted an example of the usage of Multiselect widget in free jqGrid in the old answer. The later versions of free jqGrid suports "in" operation, which is very practical in case of usage Multiselect widget.

I created the new demo for you, which looks like on the picture below.

It loads the input data from testJsonData.json, find all unique values for ship_via column inside of beforeProcessing and set the searchoptions.value built based on the values. The demo uses the latest code of free jqGrid from GitHub (it's more recent as 4.13.4). I plan to publish soon the curent code from GitHub as 4.13.5 or 4.14.0. the demo uses the current v1.17 version of Multiselect widget creates by Eric Hyndse. The code of the demo is

var getUniqueNames = function (columnName, mydata) {
        var texts = $.map(mydata, function (item) {
            return item[columnName];
        }),
          uniqueTexts = [], textsLength = texts.length, text, textsMap = {}, i;

        for (i = 0; i < textsLength; i++) {
            text = texts[i];
            if (text !== undefined && textsMap[text] === undefined) {
                // to test whether the texts is unique we place it in the map.
                textsMap[text] = true;
                uniqueTexts.push(text);
            }
        }
        return uniqueTexts;
    },
    buildSearchSelect = function (uniqueNames) {
        var values = "";
        $.each(uniqueNames, function () {
            values += this + ":" + this + ";";
        });
        return values.slice(0, -1);
    },
    initMultiselect = function (searchOptions) {
        var $elem = $(searchOptions.elem),
        options = {
            selectedList: 2,
            height: "auto",
            checkAllText: "all",
            uncheckAllText: "no",
            noneSelectedText: "Any",
            open: function () {
                var $menu = $(".ui-multiselect-menu:visible");
                $menu.addClass("ui-jqdialog").width("auto");
                $menu.find(">ul").css("maxHeight", "200px");
            }
        };
        if (searchOptions.mode === "filter") {
            options.minWidth = "auto";
        }
        $elem.multiselect(options);
        $elem.siblings("button.ui-multiselect").css({
            width: "100%",
            margin: "1px 0",
            paddingTop: ".3em",
            paddingBottom: "0"
        });
    },
    setSearchSelect = function (columnName, data) {
        var values = buildSearchSelect(getUniqueNames.call(this, columnName, data));
        $(this).jqGrid("setColProp", columnName, {
            stype: "select",
            searchoptions: {
                value: values,
                sopt: ["in"],
                attr: {
                    multiple: "multiple",
                    size: 4
                },
                selectFilled: initMultiselect
            }
        });
    },
    myDefaultSearch = "cn",
    beforeProcessingHandler1 = function (data) {
        var $this = $(this), p = $this.jqGrid("getGridParam");
        // !!! it will be called only after loading from the server
        // datatype is always "json" here
        setSearchSelect.call(this, "ship_via", data);

        if (this.ftoolbar === true) {
            // if the filter toolbar is not already created
            $("#gs_" + this.id + "ship_via").multiselect("destroy");
            $this.jqGrid('destroyFilterToolbar');
        }

        if (p.postData.filters) {
            p.search = true;
        }

        $this.jqGrid("filterToolbar", {
            //stringResult: true,
            defaultSearch: myDefaultSearch,
            beforeClear: function () {
                $(this.grid.hDiv)
                .find(".ui-search-toolbar button.ui-multiselect")
                .each(function () {
                    $(this).prev("select[multiple]").multiselect("refresh");
                });
            }
        });
    };

$("#list").jqGrid({
    url: "testJsonData.json",
    datatype: "json",
    colNames: ["Client", "Amount", "Tax", "Total", "Shipped via", "Notes"],
    colModel: [
        { name: "name", width: 65 },
        { name: "amount", width: 75, template: "number" },
        { name: "tax", width: 52, template: "number" },
        { name: "total", width: 65, template: "number" },
        { name: "ship_via", width: 85, align: "center" },
        { name: "note", width: 100, sortable: false }
    ],
    rowNum: 5,
    sortname: "name",
    iconSet: "fontAwesome",
    autoencode: true,
    loadonce: true,
    forceClientSorting: true, // local sorting and filtering data loaded from the server
    beforeProcessing: beforeProcessingHandler1,
    rowList: [5, 10, 20, 30, 100],
    pager: true,
    pagerRightWidth: 120, // fix wrapping or right part of the pager
    viewrecords: true,
    sortable: true
}).jqGrid("navGrid", { add: false, edit: false, del: false, search: false });