Extending of jqGrid. Custom parameter - jqgrid

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?

Answer 1

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