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: mon.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 ing 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"]

                }
            });            
        }
    },

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: mon.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 ing 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"]

                }
            });            
        }
    },

• javascript
• jquery
• search
• jqgrid

Share Improve this question Follow edited May 30, 2021 at 9:41 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Feb 11, 2014 at 22:36 sarsnakesarsnake 27.8k6262 gold badges185185 silver badges295295 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I'm not sure that I understand you correctly. Probably you want to use advanced searching dialog with dropdown (stype: 'select') with different values of the 3-d column of the grid? I would remend you to read the answer which shows the main idea how one can set searchoptions.value dynamically. You use loadonce: true. So you can call setColProp inside of loadComplete at the first loading of data from the server. You can include additional testing for the value of datatype. At the loading from the server the value is "json". Later it will be changed to "local". So the code could be about the following:

loadComplete: function () {
    var $this = $(this);

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

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