javascript - reloading dataurl elements in jqGrid

Question

I have a simple grid with the following options:

jQuery("#mygrid").jqGrid({
   url: 'dataurl.htm',
   datatype: 'json',
   ajaxSelectOptions: { cache: false }
   ...
   colModel: [
    { name: 'foo', index: 'foo', width: 25, stype: 'select', searchoptions:{ sopt:       
     ['eq'], dataUrl: 'someurl.htm?columnName=foo'}}
    ]
});

However, when I call $("#mygrid").trigger("reloadGrid"); it only loads the data for the table from dataurl.htm but it does not load the data for the foo column from the some url.htm link.

I've read couple of questions like these on SO and it was suggested to have ajaxSelectOptions: { cache: false } but this is not working for me.

The someurl.htm returns <select> <option val=''>something</option></select>

Answer 1

It's absolutely correct question! The current implementation of jqGrid has only toggleToolbar method which can hide the toolbar, but the toolbar itself will be created once. So all properties of the toolbar stay unchanged the whole time.

To fix the problem I wrote small additional method destroyFilterToolbar which is pretty simple:

$.jgrid.extend({
    destroyFilterToolbar: function () {
        "use strict";
        return this.each(function () {
            if (!this.ftoolbar) {
                return;
            }
            this.triggerToolbar = null;
            this.clearToolbar = null;
            this.toggleToolbar = null;
            this.ftoolbar = false;
            $(this.grid.hDiv).find("table thead tr.ui-search-toolbar").remove();
        });
    }
});

The demo uses the method. One can recreate searching toolbar after changing of properties of some columns. In the code below one can change the language of some texts from the searching toolbar:

The corresponding code is below:

$("#recreateSearchingToolbar").change(function () {
    var language = $(this).val();

    // destroy searching toolbar
    $grid.jqGrid("destroyFilterToolbar");

    // set some searching options
    $grid.jqGrid("setColProp", "closed",
        language === "de" ?
                {searchoptions: {value: ":Beliebig;true:Ja;false:Nein"}} :
                {searchoptions: {value: ":Any;true:Yes;false:No"}});
    $grid.jqGrid("setColProp", "ship_via",
        language === "de" ?
                {searchoptions: {value: ":Beliebig;FE:FedEx;TN:TNT;IN:Intim"}} :
                {searchoptions: {value: ":Any;FE:FedEx;TN:TNT;IN:Intim"}});

    // create new searching toolbar with nes options
    $grid.jqGrid("filterToolbar", {stringResult: true, defaultSearch: "cn"});
});