CODEWITHSUNDEEP
javascriptjqueryjqgrid
HappyLee
HappyLee

Reputation: 455

dropdown not being populated in filter toolbar in jquery grid

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>

Upvotes: 0

Views: 740

Answers (1)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 1

Related Questions