Question

I have a grid on my page.

  $("#listU05").jqGrid({
    url:'u05json.json',
    datatype: 'json',
    mtype: 'POST',
    colNames:[
        '<spring:message code="u05.Column.Thema"/>',
        '<spring:message code="u05.Column.SubThema"/>',
        '<spring:message code="u05.Column.status1"/>',
        '<spring:message code="u05.Column.wie"/>',
        '<spring:message code="u05.Column.KW"/>',
        '<spring:message code="u05.Column.Jahr"/>',
        '<spring:message code="u05.Column.kampagne"/>',
        '<spring:message code="u05.Column.ergebnis"/>',
        '<spring:message code="u05.Column.B1"/>',
        '<spring:message code="u05.Column.B2"/>',
        '<spring:message code="u05.Column.personal"/>',
        '<spring:message code="u05.Column.qualifikation"/>',
        '<spring:message code="u05.Column.iv"/>',
        '<spring:message code="u05.Column.objekt"/>',
        '<spring:message code="u05.Column.NR"/>',
        '<spring:message code="u05.Column.ObjektArt"/>',
        '<spring:message code="u05.Column.vorname"/>',
        '<spring:message code="u05.Column.name"/>',
        '<spring:message code="u05.Column.Z1"/>',
        '<spring:message code="u05.Column.Z2"/>',
        '<spring:message code="u05.Column.Z3"/>',
        '<spring:message code="u05.Column.Z4"/>',
        '<spring:message code="u05.Column.team"/>'    
    ],
    colModel :[ 
        {name:'Thema', index:'u_05_01.Thema', width:55},
        {name:'SubThema', index:'u_05_01.SubThema', width:55},
        {name:'status1', index:'u_05_01.status1', width:55},
        {name:'wie', index:'u_05_01.wie', width:55},
        {name:'KW', index:'u_05_01.KW', width:55},
        {name:'Jahr', index:'u_05_01.Jahr', width:55},
        {name:'kampagne', index:'u_05_01.kampagne', width:55},
        {name:'ergebnis', index:'u_05_01.ergebnis', width:55},
        {name:'B1', index:'u_05_01.B1', width:55},
        {name:'B2', index:'u_05_01.B2', width:55},
        {name:'personal', index:'u_03.personal', width:55},
        {name:'qualifikation', index:'u_03.qualifikation', width:55},
        {name:'iv', index:'u_03.iv', width:55},
        {name:'objekt', index:'u_05_01.objekt', width:55},
        {name:'NR', index:'u_05_01.NR', width:55},
        {name:'ObjektArt', index:'u_05_01.ObjektArt', width:55},
        {name:'vorname', index:'u_06.vorname', width:55},
        {name:'name', index:'u_06.name', width:55},
        {name:'Z1', index:'u_05_01.Z1', width:55},
        {name:'Z2', index:'u_05_01.Z2', width:55},
        {name:'Z3', index:'u_05_01.Z3', width:55},
        {name:'Z4', index:'u_05_01.Z4', width:55},
        {name:'team', index:'u_05_01.team', width:55}
    ],
    pager: '#pager',
    rowNum:100,
    rowList:[10,50,100],
    sortname: 'u_05_01.Thema',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    height: 400,   
    caption: '<spring:message code="u05.TITLE"/>',
    loadComplete: function(data) {
        setSearchSelect($(this), 'Thema', data, 0);
        setSearchSelect($(this), 'SubThema', data, 1);
        setSearchSelect($(this), 'status1', data, 2);
        setSearchSelect($(this), 'wie', data, 3);
        setSearchSelect($(this), 'KW', data, 4);
        setSearchSelect($(this), 'Jahr', data, 5);
        setSearchSelect($(this), 'kampagne', data, 6);
        setSearchSelect($(this), 'ergebnis', data, 7);
        setSearchSelect($(this), 'B1', data, 8);
        setSearchSelect($(this), 'B2', data, 9);
        setSearchSelect($(this), 'personal', data, 10);
        setSearchSelect($(this), 'qualifikation', data, 11);
        setSearchSelect($(this), 'iv', data, 12);
        setSearchSelect($(this), 'objekt', data, 13);
        setSearchSelect($(this), 'NR', data, 14);
        setSearchSelect($(this), 'ObjektArt', data, 15);
        setSearchSelect($(this), 'vorname', data, 16);
        setSearchSelect($(this), 'name', data, 17);
        setSearchSelect($(this), 'Z1', data, 18);
        setSearchSelect($(this), 'Z2', data, 19);
        setSearchSelect($(this), 'Z3', data, 20);
        setSearchSelect($(this), 'Z4', data, 21);
        setSearchSelect($(this), 'team', data, 22);
        $(this).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
        sortSelects();
    }    
  });  
    jQuery("#listU05").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false});    

After grid is loaded I have nice grid with filterToolbar with selects.
Very good.

Next: we have a button on page. We have to chenge filter select values in button’s onclick.

We try to make it such way:

$(".testButton1").click(
    function() {
        $("#listU05").setColProp('Thema',
                    {
                        stype: 'select',
                        searchoptions: {
                            value:'a:a',
                            sopt:['eq']
                        }
                    }
        );
            $("#listU05").filterToolbar({stringResult: true,searchOnEnter : false});
    })

But after clicking on the button we have old values in the select.
What should we write to dinamically change filter’s select?
Is it possible with JSON tables?

Thanks a lot.

Answer 1

The method filterToolbar has no special interface to update (rebuild) the selects based on current (modified) values in searchoptions. So if you hate to rebuild the select manually inside of $(".testButton1").click event handle after you change value of searchoptions in the corresponding column. The id of the select or other input elements of the searching toolbar are generated based on the name property of the corresponding column. The id has the prefix "gs_". For example if you change searchoptions.value of the 'Thema' column you have to update the options of the select with id 'gs_Thema'.

For example

$(".testButton1").click(function () {
    $("#listU05").jqGrid('setColProp', 'Thema', {
        stype: 'select',
        searchoptions: {
            value:':Any;val:Text',
            sopt:['eq']
        }
    });
    $("#gs_Thema").html('<option value="">Any</option><option value="val">Text</option>');
});

I used “Any” value to allow user to select data unfiltered by the column.