jQuery Grid Plugin - jqGrid

Hi Tony,

Sorry I should have posted the code previously - difficult to help me if you can't see what I'm doing.

This is the code:

   <script type="text/javascript">

        InitializeGrid("g_owner","/Admin/StockOwner")

        $(function() {

        jQuery(gridSelector).jqGrid({
                url: baseURL + '/GetListData/',
                editURL: baseURL + '/Edit/',
                deleteURL: baseURL + '/Delete/',
                primaryKey: 'OwnerID',
                datatype: 'json',
                mtype: 'GET',
                colNames: [
                    '', '', // Edit, Delete
                    'ID', 'Description'
                ],
                colModel: [
                  { name: 'editLink', fixed: true, resizable: false, search: false, sortable: false, hidden: false, index: 'editLink', width: 30, align: 'center', formatter: 'editButtonFormatter' },
                  { name: 'delButton', fixed: true, resizable: false, search: false, sortable: false, hidden: false, index: 'delButton', width: 60, align: 'center', formatter: 'deleteButtonFormatter' },

                  { name: 'OwnerID', search: false, hidden: true, index: 'OwnerID', width: 25, align: 'left' },
                  { name: 'Description', search: true, sortable: true, hidden: false, index: 'Description', width: 100, align: 'left', stype: "text" }

                 ],
                autowidth: true,
                pager: "pager",
                sortname: 'Description',
                sortorder: "asc",
                viewrecords: true,
                imgpath: '/scripts/themes/ui-darkness/images',
                caption: "Stock Owners"

            }).navGrid("pager", { refresh: true, edit: false, add: false, del: false, search: true },
            {}, // edit options
            {}, // add options
            {}, // del options
            {
            multipleSearch: true,
            afterShowSearch: RepopulateSearchFilter
} // search options
            );

            GridFilterSetup();

        });

</script>

You may see some strange function names there, these are helper functions that I have defined in another file. This post will become quite long now but I'll post the rest of my code here in case you need it.

var postData = null;
var gridID = null;       
var gridSelector = null;
var baseURL=null;

function InitializeGrid(_Grid_ID, _baseURL) {
    gridID = _Grid_ID;
    baseURL = _baseURL;
    gridSelector = "#" + gridID;
}

function GridFilterSetup() {

    // Pass the search filter a function to clear the current search state   
    $("#fbox_" + gridID).searchFilter().SetOnBeforeReset(ClearCurrentSearchState);

    // Display an image/button on the grid toolbar indicating that a filter is in place.
    // Thus allowing user to click and remove the filter
    $("#t_" + gridID).append("<input type='image' src='/Admin/Content/Images/filter.png' id='btnRemoveImageFilter' name='RemoveImageFilter' />");

    $("#btnRemoveImageFilter").click(function() {
        ClearCurrentSearchState();
        $(gridSelector).trigger("reloadGrid");
    });

    // Initially check if the filter image/button should be visible or not
    SetFilterImageVisibility($(gridSelector));

}

function datePick(elem) {
    jQuery(elem).datepicker({ dateFormat: 'dd/mm/yy' });
}

function RepopulateSearchFilter() {

    // If no criteria has been set, don't do anything more
    if (!hasFilter($(gridSelector))) return;

    postData = $(gridSelector).getGridParam('postData');

    var ui = $("#fbox_" + gridID);

    // Remove existing filters
    ui.find(".ui-del").click(); // removes all filters, resets the last one
    ui.find("select[name='groupOp']")[0].selectedIndex = 0; // changes the op back to the default one

    try {

        // Convert filters string to JSON object
        var jFilters = JSON.parse(postData.filters);

        // Add a row in the UI for each stored filter
        for (var i = 0; i <= jFilters.rules.length - 1; i++) {

            var rule = jFilters.rules[i];

            ui.find("select[name='field']")[i].value = rule.field;
            // ui.find("select[name='field']")[i].selectedIndex = i;

            ui.find("select[name='op']")[i].value = rule.op;
            ui.find("input[class*='vdata']")[i].value = rule.data;

            if (i < jFilters.rules.length - 1)
                ui.searchFilter().add();
        }

        // Set the All/Any filter
        ui.find("select[name='groupOp']")[0].value = jFilters.groupOp;

    }
    catch (Error) {
        alert(Error);
    }

}

function dateFormatter(cellvalue, options, rowObject) {

    if (cellvalue == null) return '';

    // cellvalue is in the following format  /Date(1146006000000)/
    // we need to remove the forward slashes    .
    var datePart = cellvalue.toString().replace(/\\//g, "");
    var dateValue = 'new ' + datePart + '.toLocaleDateString()'
    return eval(dateValue);
}

function preGridDataRequest() {

    // if(this.postData._search == true)
    postData = $(gridSelector).getGridParam('postData')
    if (postData.filters != undefined && postData.filters != "")
        writeSearchCookies(gridID);
    else
        readSearchCookies(gridID, postData);

    SetFilterImageVisibility($(gridSelector));
}

function pagingEvent() {

    var requestedPage = $(gridSelector).getGridParam('page');
    var lastPage = $(gridSelector).getGridParam('lastpage');

    // if the requested page is less than the last page value
    if (parseInt(requestedPage) <= parseInt(lastPage)) {
        $(gridSelector).setGridParam({ page: parseInt(requestedPage) });
        $(gridSelector).setGridParam({ postData: { page: parseInt(requestedPage)} });
        writeSearchCookies(gridID);
    }
}

function sortEvent(index, iCol, sortorder) {

    $(gridSelector).setGridParam({ postData: { sidx: index, sord: sortorder} });
    writeSearchCookies(gridID);
}

function hasFilter(grid) {

    postData = grid.getGridParam('postData');
    var hasFilter = postData.filters != undefined && postData.filters != "";

    return hasFilter;
}

function SetFilterImageVisibility(grid) {

    if (hasFilter(grid)) {
        $("#btnRemoveImageFilter").show();
    }
    else {
        $("#btnRemoveImageFilter").hide();
    }

}

function ClearSearchCookies(grid) {

    eraseCookie(grid + '_search');
    eraseCookie(grid + '_page');
    eraseCookie(grid + '_rows');
    eraseCookie(grid + '_sidx');
    eraseCookie(grid + '_sord');
    eraseCookie(grid + '_filters');
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

function writeSearchCookies(grid) {

    postData = $(gridSelector).getGridParam('postData');

    createCookie(grid + '_search', postData._search, 0);
    createCookie(grid + '_page', postData.page, 0);
    createCookie(grid + '_rows', postData.rows, 0);
    createCookie(grid + '_sidx', postData.sidx, 0);
    createCookie(grid + '_sord', postData.sord, 0);
    createCookie(grid + '_filters', postData.filters, 0);

}

function readSearchCookies(grid, data) {

    var search = readCookie(grid + '_search');
    if (search) {

        data._search = true;
        data.page = parseInt(readCookie(grid + '_page'));
        data.rows = parseInt(readCookie(grid + '_rows'));
        data.sidx = readCookie(grid + '_sidx');
        data.sord = readCookie(grid + '_sord');
        data.filters = readCookie(grid + '_filters');
    }

}

function ClearCurrentSearchState() {

    ClearSearchCookies(gridID);

    $(gridSelector).setGridParam({ page: 1 });
    $(gridSelector).setGridParam({ postData: { search: false, filters: ""} });

    var ui = $("#fbox_" + gridID);

    // Remove existing filters
    ui.find(".ui-del").click();

}

function SaveClientState() {

    postData = $(gridSelector).getGridParam('postData');

    createCookie('search', postData._search, 0);
    createCookie('page', postData.page, 0);
    createCookie('rows', postData.rows, 0);
    createCookie('sidx', postData.sidx, 0);
    createCookie('sord', postData.sord, 0);
    createCookie('filters', postData.filters, 0);

    var search = readCookie('search');
    alert(search);

    var filters = readCookie('filters');
    alert(filters);

    return false;
}

///////////////////////////////////////////////////////////////////////
// Cookie utility functions
///////////////////////////////////////////////////////////////////////

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

///////////////////////////////////////////////////////////////////
// Common formatter functions
///////////////////////////////////////////////////////////////////

function getPrimaryKey(rowObject) {

    var pkColumn = $(gridSelector).getGridParam('primaryKey')
    var pk = rowObject[pkColumn];
    return pk.toString();

}

Regards,

Simon

Hi Tony,

I tried your suggestion but I'm still having trouble. I've stripped down the definition of my grid to try and work out what the problem is. I can reproduce the problem behaviour every time.

Using my downloaded version of jquery.jqrid.min.js (3.5.3). If I select advanced search, then the drop down list of columns shows all the columns in the grid definintion. Issuing my search runs correctly and the correct rows are returned.

If I then simply substitute the 3.5.3 version of jquery.jqrid.min.js for the 3.6.1 version then when I choose advanced search the drop down list of columns only contains columns that are visible in the grid, not all the columns where search: true is set.

In both cases the search works correctly, and no errors are displayed in firebug. 

Note: 

jquery.jqrid.min.js (3.5.3) contains:

Modules: grid.base.js; jquery.fmatter.js; grid.custom.js; grid.common.js; grid.formedit.js; jquery.searchFilter.js; grid.inlinedit.js; grid.celledit.js; jqModal.js; jqDnR.js; grid.subgrid.js; grid.treegrid.js; grid.import.js; JsonXml.js; grid.setcolumns.js; grid.postext.js; grid.tbltogrid.js;

jquery.jqrid.min.js (3.6.1) contains:

Modules: grid.base.js; jquery.fmatter.js; grid.custom.js; grid.common.js; grid.formedit.js; jquery.searchFilter.js; grid.inlinedit.js; grid.celledit.js; jqModal.js; jqDnR.js; grid.subgrid.js; grid.treegrid.js; grid.import.js; JsonXml.js; grid.setcolumns.js; grid.postext.js; grid.tbltogrid.js; grid.jqueryui.js;

This is my grid definition:

        $('#g_stock').jqGrid({
            colNames: [
                    'Primary Image', 'Id', 'Artist ID',
                    'MediumID', 'SourceID', 'StockOwnerID', 'ClientID',
                    'Artist',
                    'Description', 'Medium', 'Category', 'Source', 'Owner', 'Client',

                    'Cost Price',
                    'Ticket Price',
                    'Sold Price',
                    'Sold',

                    'Signed', 'Location', 'ArtistName', 'Artist Relevant Dates', 'Artist Biography'
                ],
            colModel: [
                    { name: 'jqPrimaryImage', search: false, sortable: false, hidden: false, index: 'jqPrimaryImage', width: 110, align: 'center' },

                  { name: 'Id', search: false, sortable: false, hidden: true, index: 'Id', width: 40, align: 'left' },
                  { name: 'ArtistID', search: false, sortable: false, hidden: true, index: 'ArtistID', width: 40, align: 'left' },

                  { name: 'MediumID', search: false, sortable: false, hidden: true, index: 'MediumID', width: 40, align: 'left' },
                  { name: 'SourceID', search: false, sortable: false, hidden: true, index: 'SourceID', width: 40, align: 'left' },
                  { name: 'StockOwnerID', search: false, sortable: false, hidden: true, index: 'StockOwnerID', width: 40, align: 'left' },
                  { name: 'ClientID', search: false, sortable: false, hidden: true, index: 'ClientID', width: 40, align: 'left' },

                  { name: 'ArtistProperName', search: true, sortable: true, hidden: false, index: 'ArtistProperName', width: 80, align: 'left', stype: "text" },
                  { name: 'Description', search: true, sortable: true, hidden: false, index: 'Description', width: 100, align: 'left', stype: "text" },
                  { name: 'Medium', search: true, sortable: true, hidden: true, index: 'Medium', width: 40, align: 'left', stype: "text" },
                  { name: 'Category', search: true, sortable: true, hidden: true, index: 'Category', width: 40, align: 'left', stype: "text" },
                  { name: 'Source', search: true, sortable: true, hidden: true, index: 'Source', width: 60, align: 'left', stype: "text" },
                  { name: 'StockOwner', search: true, sortable: true, hidden: true, index: 'StockOwner', width: 60, align: 'left', stype: "text" },
                  { name: 'Client', search: true, sortable: true, hidden: true, index: 'Client', width: 60, align: 'left', stype: "text" },

                  { name: 'CostPrice', search: true, sortable: true, hidden: false, index: 'CostPrice', width: 40, align: 'right', stype: "text", formatter: 'currency', formatoptions: { thousandsSeparator: ","} },
                  { name: 'TicketPrice', search: true, sortable: true, hidden: false, index: 'TicketPrice', width: 40, align: 'right', stype: "text", formatter: 'currency', formatoptions: { thousandsSeparator: ","} },
                  { name: 'SoldPrice', search: true, sortable: true, hidden: false, index: 'SoldPrice', width: 40, align: 'right', stype: "text", formatter: 'currency', formatoptions: { thousandsSeparator: ","} },

                  { name: 'Sold', search: true, sortable: true, hidden: false, index: 'Sold', width: 35, align: 'center', stype: "bool", formatter: 'checkbox' },

                  { name: 'Signed', search: true, sortable: true, hidden: true, index: 'Signed', width: 35, align: 'center', stype: "bool", formatter: 'checkbox' },
                  { name: 'Location', search: true, sortable: true, hidden: true, index: 'Location', width: 40, align: 'left', stype: "text" },
                  { name: 'ArtistName', search: false, sortable: false, hidden: true, index: 'ArtistName', width: 40, align: 'left' },
                  { name: 'ArtistDates', search: false, sortable: false, hidden: true, index: 'ArtistDates', width: 40, align: 'left' },
                  { name: 'Artist Biography', search: true, sortable: false, hidden: true, index: 'Comments', width: 40, align: 'left', stype: "text" }

                ],
               
            url: '/Admin/Stock/GetListData/',
            autowidth: true,
            pager: "#pager",
            rowNum: 5,
            rowList: [],
            sortname: 'ArtistName',
            sortorder: "asc",
            caption: "Stock",
            footerrow: true,
            userDataOnFooter: true,
            datatype: 'json',
            height: 'auto',
            imgpath: '/Scripts/themes/ui-darkness/images',
            jsonReader: {
                    root: "Rows",
                    page: "Page",
                    total: "Total",
                    records: "Records",
                    repeatitems: false,
                    userdata: "UserData",
                    id: "Id"
                },
                loadui: "block",
                mtype: 'GET',
                rowNum: 10,
                rowList: [],
                viewrecords: true,
                toolbar: [true, "top"]
        }).navGrid(
            "#pager",
            {
                refresh: true,
                edit: false,
                add: false,
                del: false,
                search: true
            },
            {}, // edit options
            {}, // add options
            {}, // del options
        // search options
            {
            multipleSearch: true
        }
       );

Your help is much appreciated.

Regards,

Simon

Thanks Tony, all the columns that should be there now appear in the drop down. I shall now put my other code back and see if everything still works.

Thanks again,

Simon