How to set Options in jqgrid?

Question

I need to set the Options for Jqgrid like toppager, forceFit for which the "Can be changed?" value is set to "No" hence i tired it to set by adding it this way

jQuery(document).ready(function() {

jQuery("#list").setGridParam({ forceFit: true, toppager: true }).trigger("reloadGrid");

jQuery("#list").jqGrid({

url: '<%= Url.Action("GridData") %>',

datatype: 'json',

mtype: 'GET',

colNames:['Time', 'Description', 'Category', 'Type', 'Originator', 'Vessel'],

colModel: [

{ name: 'Time', index: 'Time', width: 200, align: 'left' },

{ name: 'Description', index: 'Description', width: 600, align: 'left' },

{ name: 'Category', index: 'Category', width: 100, align: 'left' },

{ name: 'Type', index: 'Type', width: 100, align: 'left' },

{ name: 'Originator', index: 'Originator', width: 100, align: 'left' },

{ name: 'Vessel', index: 'Vessel', align: 'left'}],

pager: jQuery('#pager'),

rowNum: 20,

rowList: [10, 20, 50],

sortname: 'Time',

sortorder: "desc",

viewrecords: true,

hoverrows: false,

gridview: true,

emptyrecords: 'No data for the applied filter',

height: 460,

caption: 'Logbook Grid',

//forceFit: true,

width: 1200

}); });

But it didnt work Can u pls let me know what exactly i am doing wrong or the right way for this ?

Answer 1

You should call setGridParam after you create your grid, not before, like so:

jQuery("#list").jqGrid(...).setGridParam(...)

Answer 2

First of all you try to set jqGrid parameters with respect of jQuery("#list").setGridParam() before you create the grid (before jQuery("#list").jqGrid({...})).

Seconds you can change not every jqGrid parameter of jqGrid with respect of setGridParam. You can find the list of parameters supported by setGridParam in the table of jqGrid option http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options (see last "Can be changed?" column).

In your case you should easy add forceFit: true, toppager: true to the list of jqGrid option during creating of jqGrid:

jQuery(document).ready(function() {
    jQuery("#list").jqGrid({
        url: '<%= Url.Action("GridData") %>',
        datatype: 'json',
        mtype: 'GET',
        forceFit: true,
        toppager: true
        colNames:['Time', 'Description', 'Category', 'Type', 'Originator', 'Vessel'],
        ...
    });
});

One more typical beginner error is not including a CSS file or the wrong order of JS files. Verify that you don't do such errors (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install).

I hope you jqGrid will work after this changes.