Extending of jqGrid. Custom parameter

Question

I want to use several jqGrids on one page. All grids will have specific functionality. For this reason I want to extend jqgrid

$.jgrid.extend({
    cVal: false,
    cSetVal: function(value) {
        var $t = this;

        $t.cVal = value;
        console.log('Setting cVal');
        return this;
    },
    cGetVal: function(value) {
        var $t = this;
        console.log('Getting cVal');

        return $t.cVal;
    },
});

After loading of page, I use Firefox console to test

>>> $('#some-selector').jqGrid.cVal;

false

So jqGrid returns default value;

>>> $('#some-selector').jqGrid('cSetVal', 'abc');

Setting cVal //console.log returns
Object[table#some-selector.some-class]

When I browse to Object cVal is 'abc'

But

>>> $('#some-selector').jqGrid('cGetVal', 'abc');

Getting cVal //console.log returns

false

now get defaul value again :( How could I get value which was set in cSetVal method?

score 4 · Accepted Answer · edited May 23 '17 at 12:15

Sorry, but I don't full understand the goal of "extending of jqGrid". If you need to hold some additional information with jqGrid you can just use additional parameters which is not in the list of standard jqGrid parameters. For example if you would create the grid using

$('#some-selector').jqGrid({
    url: "someUrl",
    datatype: "json",
    ... // other standard jqGrid parameters
    cVal: false,
    cSetVal: function(value) {
        console.log('cSetVal');
    }
);

you will be able to access to the parameters using $('#some-selector').jqGrid('getGridParam', 'cVal'); and $('#some-selector').jqGrid('getGridParam', 'cSetVal'); or just using $('#some-selector')[0].p.cVal and $('#some-selector')[0].p.cSetVal. I think that you don't really need any cSetVal or cGetVal functions and can use getGridParam and setGridParam instead.

To change the value of cVal option if it's defined in the abave way you can use

$('#some-selector').jqGrid('setGridParam', {cVal: true});

or just use

$('#some-selector')[0].p.cVal = true;

Alternatively you can use jQuery.data to store any data associated with $('#some-selector').

$.jgrid.extend is helpful if you need to have new methods which you need call in the form $('#some-selector').jqGrid('cSetVal',value);. The answer shows an example of such implementation and discuss a little advantages and disadvantages of the approach.

UPDATED: So if you really need to use the syntax like $('#some-selector').jqGrid('cSetVal',value); then you should modify your code to

$.jgrid.extend({
    cSetVal: function(value) {
        console.log('Setting cVal');

        $(this).jqGrid('setGridParam', {cVal: value});
        return this;
    },
    cGetVal: function(value) {
        console.log('Getting cVal');

        return $(this).jqGrid('getGridParam', 'cVal');
    }
});

If you need initialize some cVal value for the grid you need just include cVal in the list of option of jqGrid during creating of it:

$('#some-selector').jqGrid({
    url: "someUrl",
    datatype: "json",
    ... // other standard jqGrid parameters
    cVal: true // HERE
);

UPDATED 2: If you defines methods like I suggested in the first part of my answer you should use the methods in the following way:

var $grid = $('#some-selector');

// create the grid
$grid.jqGrid({
    url: "someUrl",
    datatype: "json",
    ... // other standard jqGrid parameters
    cVal: false,
    cSetVal: function(value) {
        console.log('in cSetVal()');

        //this.p.cVal = value;
        $(this).jqGrid('setGridParam', {cVal: value});
    },
    cGetVal: function() {
        console.log('in cGetVal()');

        //return this.p.cVal;
        return $(this).jqGrid('getGridParam', 'cVal');
    }
);

// now we can use cVal, cSetVal and cGetVal
var cSetVal = $grid.jqGrid("getGridParam", "cSetVal"),
    cGetVal = $grid.jqGrid("getGridParam", "cGetVal"),
    cVal = $grid.jqGrid("getGridParam", "cVal"); // get cVal value
cSetVal.call($grid[0], true); // change cVal value
cVal = $grid.jqGrid("getGridParam", "cVal");// get modified cVal value
cSetVal.call($grid[0], false);// change cVal value
cVal = cGetVal.call($grid[0]);// get modified cVal value

Your example after `// other standard jqGrid parameters` doesn't work. This is why I earlie used extending. But I wasn't success to get value of options outside of curent grid. Your `updated` example works fine. Thank you. So extra options should be declared in jqGrid declaration, but extra methods in extend part. Thank you again!!! — dr0zd, Apr 10 '13 at 10:12
@gv0zd: You are welcome! I'm glad that you have working solution, but I'm not understand what part of my suggestions don't work. Could you post more exact code fragment which you mean and *how you define method and how you use it*. I suppose that you've used the method in the wrong way. — Oleg, Apr 10 '13 at 10:49
I've simply copied your code `cVal: false, cSetVal: function(value) { console.log('cSetVal'); },` to jqGrid declaration. But if I try to call this `$('#some-id').jqGrid('cSetVal', 'zzz');` from Firefox console, I even can't get console return. — dr0zd, Apr 10 '13 at 12:24
@gv0zd: You used `cSetVal` in the wrong way. See **UPDATED 2** part in which I included example of correct usage of custom methods defined in the way. — Oleg, Apr 10 '13 at 12:56
Yep, thank you @Oleg. But the way from **UPDATED 2** is a bit sophisticated for me. Thanks for your answers, working with jqGrid could be more difficult without your help!!! — dr0zd, Apr 10 '13 at 13:06

Extending of jqGrid. Custom parameter

1 Answers1

Linked