dropdown not being populated in filter toolbar in jquery grid

Question

I have referred this link and also this one link Both are Oleg's solutions to the problem. I used the same solution but the drop down doesn't populate with the values except for 'All' I placed the code in load complete and I see the values when you call the 'setSearchSelect' function but only 'All' shows up in the dropdown. Here's the code-

setupGrid: function (grid, pager) {
            $(grid).jqGrid({
                datatype: 'local', // set datatype to local to not inital load data
                mtype: 'GET',
                url: swUrl + ptSearchDashboardUrl,
                colNames: colNames,
                colModel: colModel,
                altRows: false,
                pager: $(pager),
                loadonce: true,
                sortable: true,
                multiselect: true,
                viewrecords: true,
                loadComplete: function (data) {
                        //setSearchSelect.call($grid, 'RequestType');
                    //setSearchSelect.call($grid, 'Country');
                },
                onSelectRow: function() {
                    var checkedIDs = $(this).jqGrid('getGridParam', 'selarrrow');
                    if (checkedIDs.length > 0)
                        $("#ReassignBtn").show();
                    else
                        $("#ReassignBtn").hide();
                }
            }).navGrid(pager, { add: false, edit: false, del: false }).trigger('reloadGrid', [{ current: true }]);

            setSearchSelect.call($grid, 'RequestType');
            setSearchSelect.call($grid, 'Country');
            $grid.jqGrid("setColProp", "Name", {
                searchoptions: {
                    sopt: ["cn"],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source: getUniqueNames.call($(this), "Name"),
                            delay: 0,
                            minLength: 0,
                            select: function(event, ui) {
                                var $myGrid, grid;
                                $(elem).val(ui.item.value);
                                if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
                                    $myGrid = $(elem).closest("div.ui-jqgrid-hdiv").next("div.ui-jqgrid-bdiv").find("table.ui-jqgrid-btable").first();
                                    if ($myGrid.length > 0) {
                                        grid = $myGrid[0];
                                        if ($.isFunction(grid.triggerToolbar)) {
                                            grid.triggerToolbar();
                                        }
                                    }
                                } else {
                                    // to refresh the filter
                                    $(elem).trigger("change");
                                }
                            }
                        });
                    }
                }
            });

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

This is from the UI - I can only see one option value even though there are many.

<td class="ui-search-input">
    <select name="RequestType" id="gs_RequestType" style="width: 100%;">
        <option value="">All</option>
    </select>
</td>

score 1 · Accepted Answer · answered Dec 24 '15 at 22:13

1

The code which you use getUniqueNames which uses .jqGrid("getCol", columnName) to get the data from the column. On the other side you use datatype: 'local' to create empty grid. The calls setSearchSelect.call($grid, 'RequestType');, setSearchSelect.call($grid, 'Country'); and getUniqueNames.call($(this), "Name") will be made before the grid will be filled with data. Thus you fill set empty set of select elements.

I suppose that you change later the datatype to "json" or "xml" and reload the grid. Only after your get response from the server you will ba able to fill the select values. I would suggest you to use beforeProcessing, which will be called after loading the data from the server, but before processing of the data. You can modify getUniqueNames and setSearchSelect so that it get the data from the input data directly and calls setColProp. Finally you should call destroyFilterToolbar and call filterToolbar once more to create the filter toolbar with the current data.

answered Dec 24 '15 at 22:13

Oleg

220,925
34
403
798

Yes, you are right. on loadComplete the calls are made before and after the grid gets loaded. after reloading, dropdowns still show just 'All' option. Data type is always local. i will use beforeProcessing and will let you know. Thanks for ur quick response. – HappyLee Dec 25 '15 at 06:27
1

@HappyLee: You ca't use `beforeProcessing` if the `datatype` is **always** `"local"`. It will be never called. I supposed that you change the `datatype` *later* to `"json"` (or `"xml"`) and `.trigger("reloadGrid")` because you `url` option of jqGrid. It `datatype` is really **always** `"local"` then you should include the code fragment which shows how you fill the grid with the data. – Oleg Dec 25 '15 at 07:58
initially the datatype is 'json' . Anyway,calling the methods 'setSearchSelect', 'getUniqueNames' in beforeProcessing event, fixed the problem. It works perfectly now. You are a person with tremendous knowledge. thanks for all you do here :) – HappyLee Dec 28 '15 at 22:39
I also used this link for reference which is again @Oleg's answer- http://stackoverflow.com/questions/17407378/jqgrid-using-beforeprocessing-to-populate-filtertoolbar-selection-boxes – HappyLee Dec 28 '15 at 22:40

dropdown not being populated in filter toolbar in jquery grid

1 Answers1

Linked