How to reuse jqGrid options

Question

I have seen several post regarding this question. But not get the actual answer I want.

I know that I can set a global setting for all of my jqGrids in the application. Then I don't need to mention those options in the newly created jqGrids.

But I want to set some module specific option settings. Suppose I want to use jqGrid for my sales module. I have also set some option as a global option for all of my jqGrids. Now for sales module I want that each sales jqGrid will share some common options. But any sales grid can override one or two option from the common option. How can I do that.

Possibly a duplicate of : http://stackoverflow.com/questions/29659748/put-jqgrid-properties-in-a-common-variable-and-reuse-them — JGV, May 21 '15 at 13:32

score 2 · Accepted Answer · answered May 21 '15 at 09:37

It's really easy to do. You should just understand that the code for creating jqGrid look like

$("#gridid").jqGrid(objectWithGridOptions);

One use mostly anonymous inline object initialization like

$("#gridid").jqGrid({
    // ... some options
});

but it do nothing more as

var objectWithGridOptions = {
    // ... some options
};
$("#gridid").jqGrid(objectWithGridOptions);

So if you want to create multiple grids

$("#gridid1").jqGrid({
    // ... some common options
    // ... some options specific for grid 1
});
$("#gridid2").jqGrid({
    // ... some common options
    // ... some options specific for grid 2
});
$("#gridid3").jqGrid({
    // ... some common options
    // ... some options specific for grid 3
});

then you can define the object with common options and extend it using $.extend to the specific object for the grid. In the way you can even overwrite some common options. So if you use some option in grid 1 and grid 2, but not in grid 3 you can still include the most common option in the common object and just include the new value during creating of the grid 3.

The code can look like

// the part can be in separate js file which you includes
// on all pages of your project
var commonModuleOption = {
        // ... some common options
    };

$("#gridid1").jqGrid($.extend(true, {}, commonModuleOption, {
    // ... some options specific for grid 1
});
$("#gridid2").jqGrid($.extend(true, {}, commonModuleOption, {
    // ... some options specific for grid 2
});
$("#gridid3").jqGrid($.extend(true, {}, commonModuleOption, {
    // ... some options specific for grid 3
});

You are always a life saver. – Jim carry May 21 '15 at 09:59 — Jim carry, May 21 '15 at 09:59

score 1 · Answer 2 · answered May 21 '15 at 09:29

1

if you are able to use PHP or a similar serverside language, this is easy to achieve:

$("#my_grid").jqGrid({
    <?php
        include "global_jqGrid_options.js";
        include "sales_jqGrid_options.js";
    ?>
});

your options-files look like this for example:

height: 575,        
autowidth: true,
shrinkToFit: true

options from the second include file should override concurring options from the first (but i haven't tested this).

answered May 21 '15 at 09:29

low_rents

4,481
3
27
55

Well. But can't I keep them in js file and use from there ? – Jim carry May 21 '15 at 09:33
@Jimcarry not sure if i am understanding. but why would you want to keep global options in the same js file as your jqGrid? or do you really want to have one single js - file for everything? – low_rents May 21 '15 at 09:41

How to reuse jqGrid options

2 Answers2