can jqgrid support dropdowns in the toolbar filter fields

Question

i am using jqgrid and the toolbar filter. by default its just gives you a textbox to enter data into. Does it support a dropdown select combobox where i can give it a list of values to choose from to them filter on ??

Answer 1

There are some common rules for all types of sorting in jqGrid

{
    name: 'Category', index: 'Category', width: 200, formatter:'select', 
    stype: 'select', searchoptions:{ sopt:['eq'], value: categoriesStr }
}

where categoriesStr are defined as

var categoriesStr = ":All;1:sport;2:science";

Here additionally to the standard "1:sport;2:science" values are inserted ":All" string which allow you don't filter the the column. You can of course use ":" or ":Select..." and so on.

On the demo prepared for the answer you can see the close results.

UPDATED: I find your question interesting and made the demo. It shows how one can build the select comboboxes which can be used in the search toolbar or in the advanced searching dialog based on the text contain of the corresponding column. For one column I use additionally jQuery UI autocomplete. You can modify the code to use more different powerful options of the autocomplete. Here is the code of the code:

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

Is this what you want?

UPDATED: One more option could be the usage of select2 plugin which combines the advantages of dropdown and comfortable searching by Autocomplete. See the answer and this one (see the demo) for demos (this one and this one) and code examples.

UPDATED 2: The answer contains the modification of above code to work with jqGrid 4.6/4.7 or with free jqGrid 4.8.

Answer 2

I had a similar situation. Thanks to Oleg's excellent example above, it almost solved the problem. There was one slight improvement I needed. My grid is a loadonce grid that had around 40 rows, 10 per page. getCol method used above only returned the current page's column values. But I wanted to populate the filter with unique values across the entire dataset. So here's a slight modification to the function getUniqueNames:

var getUniqueNames = function(columnName) {

// Maybe this line could be moved outside the function           
// If the data is really huge then the entire segregation could
// be done in a single loop storing each unique column
// in a map of columnNames -> unique values
var data = grid.jqGrid('getGridParam', 'data');
var uniqueTexts = [], text, textsMap = {}, i;

for (i = 0; i < data.length; i++) {

                 text = data[i][columnName];

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

         // Object.keys(textsMap); Does not work with IE8: 
             return uniqueTexts;
}

Answer 3

I just did this myself. It felt a little bit like a hack, but it works!

1. Created a new "navButtonAdd" and for the "caption", added html code for a dropdown.
2. The onclickButton function contains nothing.

3. Then I created an onchange function to handle the grid's reload when it's value changed.

       $('#myGrid').jqGrid('navButtonAdd', '#myGrid_toppager', {
           caption: "<select id='gridFilter' onchange='ChangeGridView()'><option>Inbox</option><option>Sent Messages</option></select>",
           title: "Apply Filter",
           onClickButton: function () {                 
           }
       });
   
       function ChangeGridView() {
           var gridViewFilter = $("#gridFilter").val();
           $('#myGrid').setGridParam({ datatype: 'json', url: '../../Controller/ActionJSON', postData: { msgFilter: gridViewFilter } });
           $('#myGrid').trigger("reloadGrid"); 
       }; 
   

   Hope this helps!

Answer 4

category is column name.

loadComplete: function () {
    $("#" + TableNames).setColProp('Category', {
        formatter: 'select', edittype: "select",
        editoptions: { value: "0:MALE;1:FEMALE;2:other;" }
    });
},