Question

I’ve used the example from this post and it works great to create a unique drop list in the search tool bar based on the column data. However, if I have more than one page of data then the drop list is only populated from the first page. I’m new to jquery and jqgrid and have not been able to find a solution to this. Any idea’s?

Thanks.

Here is the code copied from the post linked above.

var mydata = [
    {id:"1", Name:"Miroslav Klose",     Category:"sport",   Subcategory:"football"},
    {id:"2", Name:"Michael Schumacher", Category:"sport",   Subcategory:"formula 1"},
    {id:"3", Name:"Albert Einstein",    Category:"science", Subcategory:"physics"},
    {id:"4", Name:"Blaise Pascal",      Category:"science", Subcategory:"mathematics"}
],
grid = $("#list"),
getUniqueNames = function(columnName) {
    var texts = grid.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) {
    grid.jqGrid('setColProp', columnName,
                {
                    stype: 'select',
                    searchoptions: {
                        value:buildSearchSelect(getUniqueNames(columnName)),
                        sopt:['eq']
                    }
                }
    );
};
grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name:'Name', index:'Name', width:200 },
        { name:'Category', index:'Category', width:200 },
        { name:'Subcategory', index:'Subcategory', width:200 }
    ],
    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('Category');
setSearchSelect('Subcategory');

grid.jqGrid('setColProp', 'Name',
            {
                searchoptions: {
                    sopt:['cn'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:getUniqueNames('Name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });

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

Answer 1

If you use the datatype: 'local' you have the information which you need already in mydata. Alternative you can use var gridData = grid[0].p.data or which is the same var gridData = grid.jqGrid('getGridParam','data') to get the grid contain of all grid pages. So instead of textsLength and texts[i] in the getUniqueNames function you could use gridData.length and gridData[columnName] or String(gridData[columnName]).