jqGrid colModel dynamic Searchoptions

Question

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"]

                }
            });            
        }
    },

score 3 · Answer 1 · edited May 23 '17 at 10:27

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

edited May 23 '17 at 10:27

Community

1
1

answered Feb 12 '14 at 16:33

Oleg

220,925
34
403
798

thanks, I will try to explain what I need - its actually very simple and I am surprised there isn't an easier way of doing it. I have a Type column here. I need to have a drop down list in the filter that will only contain the values that occur in the dataset coming back. Because I already have the data, I would assume that I can simply do something like gridData.col['Type'].GetDistinct and shove this array into the filter. That's it. The above was pseudocode. Is there a concise short way of doing so? Your suggested answer seems a bit too complicated for something this simple. – sarsnake Feb 12 '14 at 16:50
Oleg, your example looks like it should wok, but it doesn't. In the onLoadComplete event the jqgrid tells me that I have 0 columns. Are you sure this event runs AFTER the data is loaded? Any help would be appreciated at this point. – sarsnake Feb 12 '14 at 17:14
sorry, I meant to say 0 types (not columns). – sarsnake Feb 12 '14 at 17:20
@sarsnake: I'm sure that you makes some errors in moving of the code from my old example in the code of `loadComplete` callback. You can post *the current* JavaScript code which you use. The callback `loadComplete` will be called after the data are loaded and placed in the grid. There are many ways to solve the problem. If you have problem in writing JavaScript code you can include the value with `gridData.col['Type'].GetDistinct` in the server response. See [the answer](http://stackoverflow.com/a/19427444/315935) and [this one](http://stackoverflow.com/a/17410568/315935) – Oleg Feb 12 '14 at 17:27
I managed to make it work, but I only see part of the data inside LoadComplete. So instead of 60 rows, it thinks I have 20. Is there any way to tap into the entire set of data inside LoadComplete? When the user scrolls, more rows are displayed, but LoadComplete doesn't fire anymore. Is this a bug in jqgrid? How do I work around it. – sarsnake Feb 12 '14 at 17:33
@sarsnake: I can just repeat: **You can post the current JavaScript code which you use**. One can access to the page of data or to the whole data of *local* grid. One can use `data` parameter (the first parameter) of `loadComplete: function (data) {...}` or one can get internal `data` and `_index` parameters of jqGrid (`$(this).jqGrid("getGridData", "data")`) etc. The the method `"getCol"`which I used in my old code get the data *from the current page* only. – Oleg Feb 12 '14 at 18:32
thanks for your help. Yes, data works. But there is another issue - filters can't be modified in the onloadcomplete event as you demonstrate. I put break points in the code and setColProp does get executed but no values load in the drop down Type. I will update the question with my code. – sarsnake Feb 12 '14 at 18:58
@sarsnake: Sorry, but I have to guess permanently what you do. The code which you posted is the copy of my code only. It don't contain *modified* codes of `getUniqueNames` or `buildSearchSelect`. Which "drop down" exactly you mean? Do you use Advanced Searching dialog, toolbar searching or some other? **When the corresponding method will be called?** The loading of data is *asynchronously*. So It could be that you calls some "searching method" of the grid **before** `setColProp` have modified `searchoptions.value`. I guess that you have the problem or some close one. – Oleg Feb 12 '14 at 19:22

score 0 · Accepted Answer · answered Feb 12 '14 at 21:08

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

jqGrid colModel dynamic Searchoptions

Edit

Edit 2

2 Answers2