Drop down not working in Filter toolbar for jqgrid 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; }}); });

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"});
});

Recommended topics

Hot tags