jqGrid Filter Toolbar – colModel: object is null or undefined problem-Collection of common programming errors

Actually creating a filter jqGrid toolbar should be straight ahead as in the “new in 3.5, integrated search toolbar” example or documentation.

However, when I run the line myDataTable.jqGrid('filterToolbar', filterOpts); I always get an error “Unable to get value of the property ‘colModel’: object is null or undefined” in line 3613 of JQuery.jqGrid.src.js, which is: $.each($t.p.colModel,function(i,n) { ..

Just for the record, version of jqGrid is 4.1.2. The grid itself display / works OK.

Here is the code how I init the grid, most likely I do oversee something very simple.

    var ft = document.getElementById("myData"); // this is the HTML table element as usual
    var colModel = [
    { name: 'i', index: 'i', width: 60, hidden: true, search: false },
    { name: 'c', index: 'c', width: 100, search: true },
    { name: 'p', index: 'p', width: 100, search: true },
    { name: 'displayed', index: 'displayed', align: 'center', width: 100, formatter: booleanToCheckmark, search: false },
];
    $(function() {
        $(ft).jqGrid({
                datatype: 'clientSide',
                data: globals.myData, // Array of objects ("the data"), data is correctly displayed
                height: 300,
                // autowidth: true,
                width: 300,
                forceFit: true,
                colNames: ['I', 'C', 'P', 'dis.'],
                colModel: colModel,
                rowNum: 10000,
                sortname: 'displayed',
                sortorder: 'desc',
                viewrecords: true,
                gridview: true,
                caption: 'XYZ'
            });
    });
    // filter bar
    // http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching
    var filterOpts = { autosearch: true };

    // LINE WHERE IT FAILS
    $(ft).jqGrid('filterToolbar', filterOpts);

The error that you try to call filterToolbar outside of $(function() {/*it should be called here*/}); block.

Typically one places all the code inside of $(function() {...});. In the way one reduces additionally the number of global variables which will be added as the properties to window. The usage of global variables increase additionally the probability to have conflicts with other standard global variables.