Free-JQGrid Multiselect toolbar to refreshing when reloading data from server

Question

I have the below code and when I make a call back to the server to reload the grid, my drop down filters are not refreshing based on the column data.

Upon page load, the grid loads fine and the drop down filters are loaded with the appropriate data, excluding quotes that are in a canceled or expired status. When the user clicks on the Canceled checkbox, the grid reloads and the data now includes the canceled status. The issue is the status name drop down toolbar filter now does not include the new status of canceled (or expired if selected). From what I can find online, it looks like the drop down filters should reload based on the new data. What am I missing?

$(document).ready(function () {
    $("#ckRecentViewed").on('change', function (e) {
        loadGrid();
    });

    $("#ckCanceled").on('change', function (e) {
        loadGrid();
    });

    $("#ckExpired").on('change', function (e) {
        loadGrid();
    });

    $("input:radio:checked").data("chk", true);
    $("input:radio").click(function () {
        $("input[name='" + $(this).attr("name") + "']:radio").not(this).removeData("chk");
        $(this).data("chk", !$(this).data("chk"));
        $(this).prop("checked", $(this).data("chk"));
        $(this).button('refresh'); // in case you change the radio elements dynamically
        loadGrid();
    });

    $("#chkInMyStep").on('change', function (e) {
        loadGrid();
    });

    $('#dvWrapperFilter').on('click', function () {
        $("#dvFilters").slideToggle(function () {
            if ($('#imgHdrPlusMinus').attr('src').indexOf("plus") > 0) {
                $('#imgHdrPlusMinus').attr('src', $('#imgHdrPlusMinus').attr('src').replace("plus", "minus"));
            } else {
                $('#imgHdrPlusMinus').attr('src', $('#imgHdrPlusMinus').attr('src').replace("minus", "plus"));
            }
        });
    });
});

var statusIds = '0,1,3,4,5,6';

var cols = [
    { index: 'CTSID', name: 'CTSID', align: 'left', sortable: true, search: true, width: '20%' },
    { index: 'CustomerName', name: 'CustomerName', align: 'left', sortable: true, search: true, width: '60%' },
    { label: 'Terr', index: 'Territory', name: 'Territory', align: 'center', sortable: true, search: true, width: '20%' },
    { label: 'Zone Manager', index: 'CZMName', name: 'CZMName', align: 'left', sortable: true, search: true, width: '50%' },
    { label: 'Status', index: 'StatusName', name: 'StatusName', align: 'left', sortable: true, width: '30%' },
    { label: 'Version', index: 'VersionNumber', name: 'VersionNumber', align: 'center', sortable: true, search: true, width: '18%' },
    { label: 'Workflow Step', index: 'WorkflowName', name: 'WorkflowName', align: 'left', sortable: true, width: '30%' },
    {
        label: 'Expiration Date', index: 'EffectiveEndDate', name: 'EffectiveEndDate', sortable: true, width: '40%', sorttype: "date", formatter: "date", formatoptions: { newformat: "m/d/y" }, align: 'center',
        searchoptions: {
            sopt: ["eq"], // or any other search operation
            dataInit: function (element) {
                var self = this; // save the reference to the grid
                $(element).datepicker({
                    dateFormat: 'mm/dd/yy',
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    onSelect: function () {
                        setTimeout(function () {
                            self.triggerToolbar();
                        }, 0);
                    }
                });
            }
        }
    },
    {
        label: '', index: 'action', name: 'action', sortable: false, align: 'center', search: false, width: '20%', formatter: addLink, cellattr: function () {
            return "title=\"Click to view quote details\"";
        }
    }
];

var actionUrl = 'Dashboard/GetUserWorkflowDashboard';

var getUniqueNames = function (columnName, mydata) {
    var texts = $.map(mydata, function (item) {
        return item[columnName];
    }),
        uniqueTexts = [], textsLength = texts.length, 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 = "";
        $.each(uniqueNames, function () {
            values += this + ":" + this + ";";
        });
        return values.slice(0, -1);
    },
    initMultiselect = function (searchOptions) {
        var $elem = $(searchOptions.elem),
            options = {
                selectedList: 2,
                height: "auto",
                checkAllText: "all",
                uncheckAllText: "no",
                noneSelectedText: "Any",
                open: function () {
                    var $menu = $(".ui-multiselect-menu:visible");
                    $menu.addClass("ui-jqdialog").width("auto");
                    $menu.find(">ul").css("maxHeight", "200px");
                }
            };
        if (searchOptions.mode === "filter") {
            options.minWidth = "auto";
        }
        $elem.multiselect(options);
        $elem.siblings("button.ui-multiselect").css({
            width: "100%",
            margin: "1px 0",
            paddingTop: ".3em",
            paddingBottom: "0"
        });
    },
    setSearchSelect = function (columnName, data) {
        var values = buildSearchSelect(getUniqueNames.call(this, columnName, data));
        $(this).jqGrid("setColProp", columnName, {
            stype: "select",
            searchoptions: {
                value: values,
                sopt: ["in"],
                attr: {
                    multiple: "multiple",
                    size: 4
                },
                selectFilled: initMultiselect
            }
        });
    },
    myDefaultSearch = "cn",

beforeProcessingHandler1 = function (data) {
    var $this = $(this), p = $this.jqGrid("getGridParam");
    // !!! it will be called only after loading from the server
    // datatype is always "json" here
    setSearchSelect.call(this, "WorkflowName", data);
    setSearchSelect.call(this, "StatusName", data);
    setSearchSelect.call(this, "CZMName", data);

    if (this.ftoolbar === true) {
        //if the filter toolbar is not already created
        $("#gs_" + this.id + "WorkflowName").multiselect("destroy");
        $this.jqGrid('destroyFilterToolbar');

        $("#gs_" + this.id + "StatusName").multiselect("destroy");
        $this.jqGrid('destroyFilterToolbar');

        $("#gs_" + this.id + "CZMName").multiselect("destroy");
        $this.jqGrid('destroyFilterToolbar');
    }

    if (p.postData.filters) {
        p.search = true;
    }

    $this.jqGrid("filterToolbar", {
        stringResult: true,
        defaultSearch: myDefaultSearch,
        beforeClear: function () {
            $(this.grid.hDiv)
                .find(".ui-search-toolbar button.ui-multiselect")
                .each(function () {
                    $(this).prev("select[multiple]").multiselect("refresh");
                });
            $(this.grid.hDiv)
                .find(".ui-search-toolbar button.ui-multiselect")
                .each(function () {
                    // synchronize jQuery UI Multiselect with <select>
                    $(this).prev("select[multiple]").multiselect("refresh");
                }
                ).css({
                    width: "98%",
                    marginTop: "1px",
                    marginBottom: "1px",
                    paddingTop: "3px"
                });
        }
    });
};

$(function () {
    //Initialize jqgrid
    $("#gridWorkflowDashboard").jqGrid({
        datatype: 'json',
        url: actionUrl,
        mType: 'GET',
        colModel: cols,
        rowList: [25, 50, 100],
        pager: "#dvDashboardPager",
        forceClientSorting: true,
        loadonce: true,
        beforeProcessing: beforeProcessingHandler1,
        sortname: "EffectiveEndDate",
        sorttype: "date",
        sortorder: "desc",
        rownumbers: false,
        rowNum: 25,
        gridview: true,
        hidegrid: false,
        height: "100%",
        autowidth: true,
        search: true,
        altclass: "GridRows",
        recreateFilter: true,
        hoverrows: true,
        viewsortcols: [true, 'vertical', true],
        ignoreCase: true,
        viewrecords: true
    }).jqGrid("navGrid", { add: false, edit: false, del: false, search: false, refresh: true });
});

function loadGrid() {
    page = $("#gridWorkflowDashboard").getGridParam('page');
    var ids = statusIds;

    var pExperationDate = $('input:radio[name="rdExpiration"]:checked').val();
    var pToDate = $("#datepickerTo").val();
    var pFromDate = $("#datepickerFrom").val();
    var pRecentView = $("#ckRecentViewed")[0].checked;
    var pInMyStep = $("#chkInMyStep")[0].checked;
    var pCanceled = $("#ckCanceled")[0].checked;
    var pExpired = $("#ckExpired")[0].checked;

    if (pCanceled) {
        ids += ',-1';
    }
    else {
        ids = statusIds;
    }

    if (pExpired) {
        ids += ',2';
    }
    else {
        ids = statusIds;

        if (pCanceled) {
            ids += ',-1';
        }
    }

    var data = { ExperationDays: pExperationDate, toDate: pToDate, fromDate: pFromDate, recentView: pRecentView, InMyStep: pInMyStep, StatusIds: ids };

    $.ajax(actionUrl, {
        contentType: 'application/json',
        type: 'GET',
        datatype: 'json',
        loadonce: true,
        data: data,
        success: function (result) {
            $("#gridWorkflowDashboard").jqGrid('clearGridData');
            //$("#gridWorkflowDashboard").jqGrid('destroyFilterToolbar');
            $("#gridWorkflowDashboard").jqGrid('setGridParam',
                {
                    datatype: 'local',
                    data: result
                }).trigger("reloadGrid", [{ page: page }]);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText);
        }
    });
}

function addLink(cellvalue, options, rowObject) {
    return "<input type='button' class='btn btn-info btn-xs grid-btn' value='View' onclick='ViewQuote(\"" + rowObject.CTSID + "\")'\>";
}

function ViewQuote(value) {
    window.location.href = '/CPQ/Quote/EditQuote/' + value;
}

$(function () {
    $("#datepickerFrom").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/dd/yy',
        minDate: "-8Y",
        maxDate: "0Y",
        onClose: function (dateText, inst) {
            loadGrid();
        }
    }); 

    $("#datepickerTo").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/dd/yy',
        minDate: "-8Y",
        maxDate: "0Y",
        onClose: function (dateText, inst) {
            loadGrid();
        }
    }); 
});

Answer 1

Not sure how free-jqGrid work (we support Guriddo jqGrid), but I think you should first destroy the filterToolbar before to create it again. When created the filter toolbar set a flag which indicate its existing. Any other call to it will not execute. So maybe to work this you should call destroyFilterToolbar before to create it.

beforeProcessingHandler1 = function (data) {
....
    $this.jqGrid("destroyFilterToolba");
    $this.jqGrid("filterToolbar",{...});
}

Personally maybe I will refresh the select values directly in the toolbar with jQuery functions, but this depend on your implementation.

Answer 2

I ended up switching over to Guriddo jqGrid since i found more documentation and helpful examples and was able to solve my issue. Thanks for your help Tony.