Search code examples
javascriptjquerysearchjqgrid

jqGrid colModel dynamic Searchoptions


Is it possible to have a dynamic (not hard coded) search filter values for the jqGrid column?

So in the example such as:

 $('#my-grid').jqGrid({
            datatype: 'json',
            loadonce: true,
            jsonReader: common.jqgrid.jsonReader('Workorder'),
            mtype: 'POST',
            colNames: ['Project', 'PO Number', 'Type', 'Folder'],
            colModel: [
                { name: 'Project', index: 'Project', width: 80, sortable: false, search:false},
                { name: 'PONumber', index: 'PONumber', width: 60, sortable: false, search: true },
                { name: 'Type', index: 'Type', width: 60, sortable: false, search: true},
                { name: 'Folder', index: 'Folder', width: 60, sortable: false, search: false },
                           ],
            scroll: true,
                   });

I would like the type to have a drop down filter with values that are array of distinct values from the data subset coming back.

How would I achieve this?

Edit

Is the jqGrid data accessible directly? I am looking for something like Data.Cols[2].Distinct that will give me the distinct array of values from column 3(in this case). Is this possible?

Edit 2

This is the code:

onLoadComplete: function (data) {
        var $this = $('#gridReport');

        if ($this.jqGrid("getGridParam", "datatype") === "json") {
           
            // first loading from the server
            // one can construct now DISTINCT for 'Type' column and
            // set searchoptions.value
            $this.jqGrid("setColProp", "Type", {
                stype: "select",
                searchoptions: {
                    value: buildSearchSelect(getUniqueNames("Type")),
                    sopt: ["eq", "ne"]

                }
            });            
        }
    },

Solution

  • This is how I ended up doing it, I ended up using jquery to populate the drop down directly, as jqgrid filters were not available at any point (if they are, I would love to see a documented example):

     onLoadComplete: function (data) {
    
            if ($('#mygrid').jqGrid("getGridParam", "datatype") === "json") {
    
                //get the distinct types from the data set coming back
                var length = data.length;
                var types = [];
    
                for (var i = 0; i < length; i++) {
                    types.push(data[i]['Type']);
                }
    
                var uniqueTypes = getUnique(types);
    
                $('#gridId select[name="Type"]').empty().html('<option value="">All</option>');
    
                for (var i = 0; i < uniqueTypes.length; i++) {
                      $('#gridId select[name="Type"]').append($('<option value="' + uniqueTypes[i] + '">' + uniqueTypes[i] + '</option>'));
                }
            }