Question

I have created a filter toolbar based on this example. I have an odd problem; this only works when I have firebug breakpoints set, otherwise, the dropdown only displays ‘All’. The grid is set with datatype:’json’, loadonce:true. One more point; this grid also has a sub grid. Any idea on how to get this working?

 grid = $("#dealsgrid"),
 getUniqueNames = function(columnName) {
       var texts = grid.jqGrid('getCol', columnName); 
       var uniqueTexts = [];
       var textsLength = grid.jqGrid('getGridParam','data');
       var text, textsMap = {}, i;
       for (i = 0; i < textsLength; i++) {
          text = texts[i];
          if (text !== undefined && textsMap[text] === undefined) {
            // to test whether the texts is unique we place it in the map.
            textsMap[text] = true;
            uniqueTexts.push(text);
          }
       }
       return uniqueTexts;
     }, 
 buildSearchSelect = function(uniqueNames) {
       var values = ":All";
       $.each(uniqueNames, function() {
          values += ";" + this + ":" + this;
       });
      return values;
   }, 
 setSearchSelect = function(columnName) {
      grid.jqGrid(
        'setColProp',
        columnName,
        {
            stype : 'select',
            searchoptions : {
                value : buildSearchSelect(getUniqueNames(columnName)),
                sopt : [ 'eq' ]
            }
        });
 };

I after declaring the grid, my column model looks like this:

    colModel:[ 
               {name:'CM',index:'CM', width:50,editable:false},
               {name:'DealNo',index:'DealNo',width:75,editable:false,editoptions:{readonly:true, size:10},search:true, stype:'text', searchoptions: { sopt: ['eq']}},
               {name:'KeyDate',index:'KeyDate',width:100, search:false, align:"right",formatter:'date'},
               {name:'VendorNo',index:'VendorNo', width:75,search:true},
               {name:'VendorName',index:'VendorName', width:100,search:true},
               {name:'ItemQty',index:'ItemQty', width:75,search:false},{name:'StartDate',index:'StartDate',width:100,align:"right",formatter:'date',search:false},
               {name:'EndDate',index:'EndDate',width:100, align:"right",formatter:'date',search:false},
               {name:'ActiveStartDate',index:'ActiveStartDate',width:100, align:"right",formatter:'date',search:false, sorttype:"date", editable:true,editoptions:{size:10}},                   {name:'ActiveEndDate',index:'ActiveEndDate',width:100,align:"right",formatter:'date',search:false, sorttype:"date",editable:true,editoptions:{size:10}},             
               {name:'DealType',index:'DealType', width:75,search:false}

           ],

and finally, my call to create the filterToolBar and populate the dropdown

        setSearchSelect('CM'); 
        grid.jqGrid('setColProp', 'Name', {
        searchoptions : {
            sopt : [ 'cn' ],
            dataInit : function(elem) {
               $(elem).autocomplete({
                  source : getUniqueNames('Name'),
                  delay : 0,
                  minLength : 0
               });
           }
        }

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

Any suggestions would be greatly appreciated.
Thanks

Answer 1

Removed my old answer now we know that your function is returning something (if you put a breakpoint on it). Could it be that your grid has not yet loaded the data before getUniqueNames is called? This explains that if you put a breakpoint on it, it has more time to load the data before the getUniqueNames is called.

So if you call the setSearchSelect in the gridComplete or maybe even the loadComplete it should be ok. Maybe you even have to set the async property of the grid to false. I would need to check that with my own code, so I could provide you with a example. I will do this first thing in the morning. In the mean time you could try it yourself by doing some adjustments based on the info above.

   $('#yourgrid').jqGrid({
    ...,
    async: false,
    loadComplete/gridComplete: function() { setSearchSelect('CM'); }
   });