Drop down not working in Filter toolbar for jqgrid 4.6.0 version?

Question

I want support for drop-downs in the toolbar filter fields as Filter toolbar drop-down not working in jqgrid 4.6.0 version. But it is working in 3.8 .version

I have referred the link for 3.8.

Please help me to fix in 4.6.0 version.

jQuery(document).ready(function() {
            var categories = ["All", "sport", "science"];
            var categoriesStr = ":All;1:sport;2:science";
            var subcategories = ["All", "football", "formel 1", "physics", "mathematics"];
            var subcategoriesStr =":All;1:football;2:formel 1;3:physics;4:mathematics";
            var mydata = [
                {id:0, Name:"Lukas Podolski",     Category:1, Subcategory:1},
                {id:1, Name:"Michael Schumacher", Category:1, Subcategory:2},
                {id:2, Name:"Albert Einstein",    Category:2, Subcategory:3},
                {id:3, Name:"Blaise Pascal",      Category:2, Subcategory:4}
            ];

            var grid = jQuery("#list").jqGrid({
                data: mydata,
                datatype: 'local',
                colModel: [
                    { name: 'Name', index: 'Name', width: 200},
                    { name: 'Category', index: 'Category', width: 200, formatter:'select', stype: 'select',
                      sorttype: function(cell) {return categories[cell];},
                      edittype:'select', editoptions: { value: categoriesStr },
                      searchoptions:{ sopt:['eq'] }
                    },
                    { name: 'Subcategory', index: 'Subcategory', width: 200, formatter:'select', stype: 'select',
                      sorttype: function(cell) {return categories[cell];},
                      edittype:'select', editoptions: { value: subcategoriesStr},
                      searchoptions:{ sopt:['eq'] }
                    }
                ],
                sortname: 'Name',
                viewrecords: true,
                rownumbers: true,
                sortorder: "desc",
                ignoreCase: true,
                pager: '#pager',
                caption: "Setting filter in the filter toolbar"
            }).jqGrid('navGrid','#pager', { edit: false, add: false, del: false, search: false, refresh:false });
            grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch : "cn", beforeSearch: function() {
                //alert("verifying the data");
                var postData = grid.jqGrid('getGridParam','postData');
                // we use `stringResult: true` so decoding of the search parameters are a little complex
                var searchData = jQuery.parseJSON(postData.filters);
                for (var iRule=0; iRule<searchData.rules.length; iRule++) {
                    if (searchData.rules[iRule].field === "Name") {
                        var valueToSearch = searchData.rules[iRule].data;
                        if (valueToSearch.length != 5) {
                            alert ("The search string MUST de 5 charachters length!");
                            return true;    // error
                        }
                    }
                }
                return false;
            }});
        });

I have attached 4.6.0 version screen shot.

Answer 1

My demo, which you reference in your question, is really old. I created it for the answer.

I updated the demo the the following which uses jqGrid 4.6.0. It uses the following code

$(function () {
    "use strict";
    var mydata = [
            {id: "10", Name: "Miroslav Klose",     Category: "Sport",   Subcategory: "Football"},
            {id: "20", Name: "Michael Schumacher", Category: "Sport",   Subcategory: "Formula 1"},
            {id: "30", Name: "Albert Einstein",    Category: "Science", Subcategory: "Physics"},
            {id: "40", Name: "Blaise Pascal",      Category: "Science", Subcategory: "Mathematics"}
        ],
        $grid = $("#list"),
        getUniqueNames = function (columnName) {
            var texts = this.jqGrid("getCol", 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 = ":All";
            $.each(uniqueNames, function () {
                values += ";" + this + ":" + this;
            });
            return values;
        },
        setSearchSelect = function (columnName) {
            this.jqGrid("setColProp", columnName, {
                stype: "select",
                searchoptions: {
                    value: buildSearchSelect(getUniqueNames.call(this, columnName)),
                    sopt: ["eq"]
                }
            });
        };

    $grid.jqGrid({
        data: mydata,
        datatype: "local",
        colModel: [
            {name: "Name"},
            {name: "Category"},
            {name: "Subcategory"}
        ],
        cmTemplate: {width: 200},
        gridview: true,
        autoencode: true,
        sortname: "Name",
        viewrecords: true,
        rownumbers: true,
        sortorder: "desc",
        ignoreCase: true,
        pager: "#pager",
        height: "auto",
        caption: "How to use filterToolbar better locally"
    }).jqGrid("navGrid", "#pager",
        {edit: false, add: false, del: false, search: false, refresh: false});

    setSearchSelect.call($grid, "Category");
    setSearchSelect.call($grid, "Subcategory");

    $grid.jqGrid("setColProp", "Name", {
        searchoptions: {
            sopt: ["cn"],
            dataInit: function (elem) {
                $(elem).autocomplete({
                    source: getUniqueNames.call($(this), "Name"),
                    delay: 0,
                    minLength: 0,
                    select: function (event, ui) {
                        var $myGrid, grid;
                        $(elem).val(ui.item.value);
                        if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
                            $myGrid = $(elem).closest("div.ui-jqgrid-hdiv").next("div.ui-jqgrid-bdiv").find("table.ui-jqgrid-btable").first();
                            if ($myGrid.length > 0) {
                                grid = $myGrid[0];
                                if ($.isFunction(grid.triggerToolbar)) {
                                    grid.triggerToolbar();
                                }
                            }
                        } else {
                            // to refresh the filter
                            $(elem).trigger("change");
                        }
                    }
                });
            }
        }
    });

    $grid.jqGrid("filterToolbar",
        {stringResult: true, searchOnEnter: true, defaultSearch: "cn"});
});