While upgrading from jqrid4.6 to 4.13.5 facing issue in creating a dynamic dropdown with Unique values.dropdown layout get disturbed

Question

Trying to create a demo to show dynamic dropdown for Field-source, client but data is returning null.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
 var columnNameArrayForColumnFilter=["source","name"];
    $(function () {
        "use strict";
        var mydata = [
               {id:"1", invdate:"720:0:0",name:"test",  source:"note1",  amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"2", invdate:"34:09:0",name:"test2", source:"note2", amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3", invdate:"0:0:0",name:"test3", source:"note1", amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"4", invdate:"90:08:8",name:"test4", source:"note2", amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"5", invdate:"09:34:2",name:"test4", source:"note3", amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6", invdate:"80:12:02",name:"test6", source:"note3", amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"7", invdate:"80:12:01",name:"test7", source:"note2", amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"8", invdate:"112:23:6",name:"test2", source:"note2", amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"9", invdate:"80:12:1 ",name:"test9", source:"note1", amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"112:34:2",name:"test1",source:"note3",amount:"500.00",tax:"30.00",total:"530.00"},
                {id:"11",invdate:"114:23:2",name:"test11",source:"note2",amount:"500.00",tax:"30.00",total:"530.00"},
    {id:"13",invdate:"80:12:4 ",name:"test11",source:"note2",amount:"500.00",tax:"30.00",total:"530.00"},
    {id:"14",invdate:"0:1:0",name:"test11",source:"note12",amount:"500.00",tax:"30.00",total:"530.00"} ,
    {id:"15",invdate:"80:12:3",name:"test11",source:"note12",amount:"500.00",tax:"30.00",total:"530.00"}
            ];
           
    
        $("#grid").jqGrid({
            data: mydata,
            colNames:['Inv No','Duration', 'Client', 'Amount','Tax','Total','source'],
                colModel:[
                    {name:'id',index:'id', search:false,width:65, sorttype: 'int'},
                    {name:'invdate',index:'invdate', width:120, align:'center', sorttype:'datetime', datefmt:'H:i:s',searchoptions:  { sopt:['inbetween','eq','lt','le','gt','ge'] }},
                    {name:'name',index:'name', width:90,search:true,},
                    {name:'amount',index:'amount', width:70, formatter:'number', align:"right",search:false,},
                    {name:'tax',index:'tax', width:60, formatter:'number', align:"right",search:false,},
                    {name:'total',index:'total', width:60, formatter:'number',align:"right",search:false,},
                    {name:'source',index:'source', width:100, search:true,}
                ],
            pager: true,
            autoencode: true,
            viewrecords: true,
            rowNum: 10,
            rowList: [5, 10, 20, "10000:All" ],
            caption: "Demonstration custom searching operation (Duration Range)",
            customSortOperations: {
               
                inbetween: {
                    operand: "inbetween",       
                    text: "in between",  
                    filter: function (options) {
                    }
                }
            }
         
        }).jqGrid("filterToolbar",
            {stringResult: true, searchOnEnter: true, searchOperators : true});
 applyColumnFilterOnGrid(columnNameArrayForColumnFilter,'grid');
    });

function applyColumnFilterOnGrid(columnNameArrayForColumnFilterInGrid)
{
 for(var i=0;i<columnNameArrayForColumnFilterInGrid.length;i++)
 { 
  setSearchSelect.call("#grid",columnNameArrayForColumnFilterInGrid[i]);
 }
}



 //  this function return unique value for column filter on grid
 var getUniqueNames = function(columnName) {


var data = $('#grid').jqGrid('getGridParam', 'data');
var uniqueTexts = [], text, textsMap = {}, i;

for (i = 0; i < data.length; i++) {

                 text = data[i][columnName];

                 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;
}
//  this method add All value in column filter values and return value map
var buildSearchSelect = function(uniqueNames) {
        var values=":All";
        $.each (uniqueNames, function() {
            values += "," + this + ":" + this;
   
        });
        return values;
    };
// this function is create drop down for column filter functionlity on grid and set values
   var setSearchSelect = function(columnName) {
 
        $("#grid").jqGrid("setColProp", columnName,
                    {
                        stype:"select",
                        searchoptions: {
                            value:buildSearchSelect(getUniqueNames.call("#grid",columnName)),
                            sopt:["eq"]
                        }
                    }
        );
    };

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <!--<link rel="stylesheet" href="../jqGrid/css/ui.jqgrid.css">-->
    <link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/OK/ui.jqgrid.css">

<html lang="en">
<head>
  </head>
<body>
<div id="outerDiv" style="margin:5px;">
    <table id="grid"></table>
</div>
</body>
</html>

When I try to upgrade from 4.6 to 4.13.5 .. my existing dynamic dropdown unique values get disturbed.

Answer 1

The current code has some simple errors like the usage of $("grid") instead of $("#grid") inside of getUniqueNames and setSearchSelect and creating filterToolbar before filling searchoptions.value with the data: you call applyColumnFilterOnGrid after filterToolbar instead of before filterToolbar.

The next problem exists in the buildSearchSelect, which I published originally in the old answer. You changed the line

values += ";" + this + ":" + this;

to

values += "," + this + ":" + this;

which is wrong. One should use ; instead of , as the separator (see the documentation of jqGrid 4.6). If you replace "," to ";" then the problem will be solved. In general you can use , instead of ; as the separator in the value, but you should inform jqGrid about that by usage delimiter: "," option:

var setSearchSelect = function(columnName) {

    $("#grid").jqGrid("setColProp", columnName,
                {
                    stype:"select",
                    searchoptions: {
                        delimiter: ",",
                        value:buildSearchSelect(getUniqueNames.call("#grid",columnName)),
                        sopt:["eq"]
                    }
                }
    );
};