jqGrid—setGridWidth function

Question

I'm trying to call jqGrid's setGridWidth function, but I'm getting the error:

Object [object Object] has no method 'setGridWidth'

I'm sure this is something stupid. Here's the code to display the grid (which is fine) and then try to resize it.

    $("#jqGridElement").jqGrid({
        datastr: tableSrc,
        jsonReader: { repeatitems: false },
        datatype: "jsonstring",
        colNames: ['title', 'subtitle'],
        colModel: [
            { name: 'title', index: 'title', width: 55 },
            { name: 'subtitle', index: 'subtitle'}],
        height: 'auto',

        gridview: true
    });

    $("#jqGridElement").setGridWidth(600);'

EDIT

I've also tried:

var gridObj = $("#jqGridElement").jqGrid({  datastr: tableSrc, .......
gridObj.setGridWidth(300);

Same result

Answer 1

I suppose that you set $.jgrid.no_legacy_api = true; like I did in my last demos.

The "standard" (legacy API) code of jqGrid set many method extensions of jQuery. It's dangerous in case of usage many other jQuery Plugins. The probability to have name conflicts are increased. So it's recommended to use "new style" jqGrid API. In case of setGridWidth method you should use

$("#jqGridElement").jqGrid('setGridWidth', 600);

instead of

$("#jqGridElement").setGridWidth(600);

One small general remark: I recommend you to define gridObj as

var gridObj = $("#jqGridElement");
gridObj.jqGrid({  datastr: tableSrc,...

instead of

var gridObj = $("#jqGridElement").jqGrid({  datastr: tableSrc,...

The advantage is that the value of gridObj will be set before the call of $("#jqGridElement").jqGrid and you can use safe gridObj inside of any jqGrid event. For example you can use gridObj variable inside of loadComplete event. In case of usage in the way like you use it now the gridObj variable can be undefined at the first usage of loadComplete event.