ParamQuery Grid Pro API Documentation for Version 2.4.0

Options
collapsibleType: Object
Default: {on: true, collapsed: false, toggle: true, css: { zIndex: 1000 } }

The grid can be collapsed or expanded with help of collapsible icon on top right corner and it can be turned into a screen overlay with toggle button icon.
on is used to set or get the visibility of collapsible icon. Click on collapsible icon alternates the grid between expanded and collapsed state.
collapsed is used to set or get the initial collapsed or expanded state of the grid upon creation.
toggle is used to set or get the visibility of toggle icon. Click on toggle icon alternates the grid between default display state and maximized state.
css is an object containing css rules which are applied to grid in maximized state.

Code examples:

Initialize the pqGrid with collapsible option specified.

//create grid in collapsed state initially.            
$( ".selector" ).pqGrid( { collapsible: { collapsed : true } } );

Get or set the collapsible option, after initialization:

//getter
var collapsible = $( ".selector" ).pqGrid( "option", "collapsible" );

//setter
$( ".selector" ).pqGrid( "option", "collapsible", { collapsed: true );

colModelType: Array
Default: null

An array of objects with each object corresponding to a column, it provides information about all necessary column properties.

Code examples:

Initialize the pqGrid with colModel option specified.

var colM = [
{ title: "ShipCountry", width: 100 },
{ title: "Customer Name", width: 100 }];
$( ".selector" ).pqGrid( {colModel:colM} );

Get or set the colModel option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );

//setter
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > alignType: String
Default: "left"

It determines the horizontal alignment of text in the columns. Possible values are "left", "right" and "center".

Code examples:

Initialize the pqGrid with column > align option specified.

var colM = [
{ title: "Company", width: 100 ,dataType:"string"},
{ title: "Rank", width: 100,dataType:"integer",align:"right" }];
$( ".selector" ).pqGrid( {colModel:colM} );

Get or set the column > align option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get align of 1st column
var dataType = colM[0].align;

//setter
//set align of 2nd column.
colM[1].align = "center";
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > cbType: Object
Default: { all: false, header: true }

Properties of checkbox column. It works along with column.type == 'checkBoxSelection'. When all is true, checkbox selection in the header cell affects all checkboxes in same column on all pages, otherwise it affects the checkboxes in same column on the same page. When header is true, a checkbox is displayed in the header cell, otherwise not. This option is added as of v2.3.0 to support multiple checkbox columns and replaces selectionModel.cbAll and selectionModel.cbHeader properties.

Code examples:

Initialize the pqGrid with column > cb option specified.

var colM = [
{ title: "Company", width: 100 , cls:'pq-col', type: 'checkBoxSelection', 
            cb: {all: true, header: false} },
{ title: "Rank", width: 100 }];
$( ".selector" ).pqGrid( {colModel:colM } );

Get or set the column > cb option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get cb of 1st column
var cb = colM[0].cb;


column > clsType: String
Default: null

Class to be assigned to whole column.

Code examples:

Initialize the pqGrid with column > cls option specified.

var colM = [
{ title: "Company", width: 100 , cls:'pq-col' },
{ title: "Rank", width: 100 }];
$( ".selector" ).pqGrid( {colModel:colM } );

Get or set the column > cls option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get class of 1st column
var cls = colM[0].cls;

//setter
//set class to 'pq-someclass' for 2nd column in colModel.
colM[1].cls = 'pq-someclass';
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > colModelType: Array
Default: null

Nesting of colModel in a column results in grouping of columns. column acts as parent of the columns contained in the colModel. It can be nested any number of levels.

Code examples:

Initialize the pqGrid with column > colModel option specified.

var colM = [
    { title: "Company", width: 100 ,colModel:[{title:"Company A"} , {title:"Company B"}]},
    { title: "Rank", width: 100, dataIndx:0 }];
$( ".selector" ).pqGrid( {colModel:colM} );

Get or set the column > colModel option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get nested colModel of 1st column if any.
var colModel = colM[0].colModel;

//setter
//set nested colModel of 2nd column in colModel.
colM[1].colModel = [{title:"Title A", width:'120'} , {title:"title B"} ];
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > copyType: Boolean
Default: null

It prevents the column from being copied to the clipboard and being exported to Excel.

Code examples:

Initialize the pqGrid with column > copy option specified.

var colM = [
{ title: "Company", width: 100, copy: false},
{ title: "Rank", width: 100, dataIndx:0 }];
$( ".selector" ).pqGrid( {colModel:colM} );

Get or set the column > copy option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get copy property of 1st column if any.
var copy = colM[0].copy;

//setter
//set copy of 2nd column in colModel.
colM[1].copy = false;
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > dataIndxType: Integer or String
Default: colIndx

Zero based index in array or key name in JSON of the column. This is used to bind grid column with data in array or JSON. In case of array data, it defaults to index of column in colModel if no dataIndx is provided during initialization of grid. dataIndx is mandatory in case of JSON.

Code examples:

Initialize the pqGrid with column > dataIndx option specified.

//array
var colM = [
{ title: "Company", width: 100 ,dataIndx : 1},
{ title: "Rank", width: 100,dataIndx : 0 }];
//JSON            
var colM = [
{ title: "Company", width: 100 ,dataIndx: "company" },
{ title: "Rank", width: 100, dataIndx: "rank" }];
            
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > dataIndx option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get dataIndx of 1st column
var dataIndx = colM[0].dataIndx;

//setter
//set dataIndx of 2nd column in colModel to 3rd column of data array.
colM[1].dataIndx = 2;
//set dataIndx of 2nd column in colModel to "rank" key in JSON data.
colM[1].dataIndx = "rank";            
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > dataTypeType: String or Function
Default: "string"

This option is used by local sorting, local filtering and data validations. Possible values are "string", "integer", "float" and "date". Function type is used to implement custom sorting. The callback function receives 2 parameters val1 and val2 and it has to return +1 if val1 > val2, -1 if val1 < val2 and 0 if val1 and val2 are identical in sorting order. The callback variant for custom sorting is deprecated in favour of column.sortType since 2.4.0

Code examples:

Initialize the pqGrid with column > dataType option specified.

var colM = [
{ title: "Company", width: 100 , dataType: "string" },
{ title: "Rank", width: 100, dataType: "integer" }];
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > dataType option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get dataType of 1st column
var dataType = colM[0].dataType;

//setter
//set dataType of 2nd column to implement custom sorting.
colM[1].dataType = function( val1, val2 ){
	
};
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > editableType: Boolean or Function
Default: true

Set it to false to disable editing for that field or implement a callback function to return true or false selectively. The callback function receives {rowIndx: rowIndx, rowData: rowData,colIndx: colIndx, dataIndx: dataIndx } as parameter.

Code examples:

Initialize the pqGrid with column > editable option specified.

var colM = [
{ title: "Company", width: 100, dataType: "string", editable: function(ui){
    var rowIndx=ui.rowIndx;
    if(rowIndx%2==0){
        return false;
    }
    else{        
        return true;    
    }
}},
{ title: "Rank", width: 100, dataType: "integer", editable: false }];
//disables editing for Rank column.
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > editable option, after initialization:

//getter
var colM=$( ".selector" ).pqGrid( "option" , "colModel" );
//get editable option of 1st column
var editable=colM[0].editable;

//setter
//set editable of 2nd column
colM[1].editable = false;
$( ".selector" ).pqGrid( "option", "colModel", colM);

column > editModelType: Object
Default: null

It's an object defining the editing behaviour for a column and it overrides the global editModel properties.

Code examples:

Initialize the pqGrid with column > editModel option specified.

var colM = [
{ title: "ShipCountry", editModel: 
    { saveKey:'', keyUpDown: false} 
},
{ title: "Customer Name", width: 100 }];
//editModel is provided for 1st column.
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > editModel option, after initialization:

//getter
var colM=$( ".selector" ).pqGrid( "option", "colModel" );
//get editModel of 1st column
var editModel=colM[0].editModel;

//setter
//set custom editModel for 2nd column
colM[1].editModel = { 
    savekey: '', select: true
};
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > editorType: Object
Default: null

It's an object defining the properties of inbuilt or custom editor and it overrides the global editor properties. It has following properties: type, init, prepend, options, labelIndx, valueIndx, groupIndx, dataMap, mapIndices, getData, cls, style, attr

type can be textbox, textarea, contenteditable, select, checkbox, callback function, html string or null. callback variant is used to create custom editors from scratch and receives an object argument containing the below ui properties.

init is a callback function and can be implemented to convert or initialize simple html control (i.e., textbox, select, etc) mentioned in type into a custom editor i.e., jQueryUI datepicker, autocomplete or any other plugin. This option is added in v2.1.0 It receives an object argument containing the below ui properties.

Either type or init callback variant can be used to create custom controls but bit more work is required in case of type callback.

prepend is an object holding value label pairs which are prepended ( appear at the top ) to the select list options. e.g., { '' : 'Select an option' }. It can have one or more than one value label pairs i.e., { 0 : 'a', 1 : 'b',... }. When more than one value label pairs are specified, they can appear at the top of select list in any random order.

options is an array holding options in select list and is used along with type = select.
Format of data for options can be an

  • array of strings [ value1, value2, ..]
  • array of associative value label pairs e.g., [ { 'CB01': 'Mark' }, { 'CB02': 'Robert' }, ... ]
  • JSON data i.e. [ { customerid: 'CB01', contactName: 'Mark' }, { customerid: 'CB02', contactName: 'Robert' }, ... ]
    labelIndx, valueIndx have to be provided in this case. e.g., for aforementioned JSON data, valueIndx = "customerid" and labelIndx = "contactName". valueIndx and labelIndx from select list are automatically bound to rowData of the grid since v2.4.0.

    groupIndx can be specified when grouping via optgroup is required in select list. e.g., for the JSON data: [ { country: 'Japan', region: 'Hokkaidō' }, { country: 'Japan', region: 'Chūbu' }, { country: 'UK', region: 'London' }, { country: 'UK', region: 'Yorkshire' },... ] valueIndx = labelIndx = "region", groupIndx = "country"

    Disabled options can be specified in the JSON data by adding property pq_disabled: true e.g., [ { country: 'Japan', region: 'Hokkaidō', pq_disabled: true },...]

options can also be a callback function returning data in any of the aforementioned formats.

dataMap option (added in v2.4.0) can be added for a select list when JSON data has more than 2 fields in each object and those extra fields are required to be bound to select list and optionally with rowData of the grid. Format for dataMap option is an array of strings i.e., [ "dataIndx1", "dataIndx2", ...].
For example for JSON data [ { "ProductID":"17", "ProductName":"Alice Mutton", "QuantityPerUnit":"20 - 1 kg tins", "UnitPrice":"39.0000", "UnitsInStock":"0", "Discontinued": true }, ...] where valueIndx = "ProductID" & labelIndx = "ProductName", additional fields can be specified in dataMap.
i.e., dataMap = [ "QuantityPerUnit", "UnitPrice", "UnitsInStock", "Discontinued" ].

In v2.4.0 when select list options are in JSON format, the fields are directly mapped to dataIndx in grid's rowData. But if the fields names don't match and still the mapping from select list options/dataMap to rowData is desired, it can be done with the help of mapIndices e.g., for the above JSON data if there are columns in grid having different dataIndx, mapping can be done as mapIndices = { customerid: 'customerID', contactName: 'contactname' } where 'customerid', 'contactName' are field names in JSON data for select list while 'customerID', 'contactname' are dataIndx in the grid.

getData is optional callback function to return custom data or value from custom editor, it also receives an object argument containing the below ui properties. The returned data from this callback can be in any format depending upon requirements but it's to be noted that this returned value is saved in rowData[dataIndx]. For example in case of select list it may be value i.e., ui.$cell.find("select").val() or text i.e., ui.$cell.find("select option:selected").text() of the selected option. It may also be an object containing both value and text as its properties.

cls injects css class into the editor.

style adds inline css style to the editor.

attr adds html attributes to the control. It is quite useful in a number of use cases e.g., a multiple select list can be created by combining type = 'select' with 'multiple' attribute i.e., attr: 'multiple'. An input control ( type = 'textbox', 'textarea' ) can limit the number of input characters by addition of maxlength attribute i.e., attr: 'maxlength = "5" '

  • ui
    Type: Object
    • $cell
      Type: jQuery
      jQuery wrapper on container div in which to append the custom editor.
    • rowData
      Type: Array or PlainObject
      Reference to 1-dimensional array or object representing row data.
    • rowIndx
      Type: Integer
      Zero based index of the row.
    • dataIndx
      Type: Integer or String
      Zero based index in array or key name in JSON.
    • colIndx
      Type: Integer
      Zero based index of the column.

Code examples:

Initialize the pqGrid with column > editor option specified.

var colM = [
{ title: "ShipCountry", editor: 
    {type:'textarea', attr:'rows=5'} 
},
{ title: "Customer Name", width: 100 }];
//editor is provided for 1st column.
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > editor option, after initialization:

//getter
var colM=$( ".selector" ).pqGrid( "option", "colModel" );
//get editor of 1st column
var editor=colM[0].editor;

//setter
//set custom editor for 2nd column
colM[1].editor = { 
    type: function(ui){                    
    }, 
    getData: function(ui) {
    } 
};
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > filterType: Object
Default: null

It describes the filter behavior of the column using an object having following sub-options: condition, value, value2, type, subtype, init, prepend, options, labelIndx, valueIndx, groupIndx, cache, cls, style, attr, listeners

condition is a string and can be any one of contain, notcontain, begin, end, equal, notequal, empty, notempty, less, great.
More conditions are added in v2.0.4: between, range, regexp, notbegin, notend, lte, gte

value is the data against which the column is matched and is ignored when condition is empty or notempty. It's an array of values when condition is range and is a regular expression when condition is regexp. value2 is applicable only when condition is between

The following sub-options are applicable when header filtering is on. Click here to see an example on how to use header filter options.

type can be textbox, textarea, select, checkbox, callback function, html string or null. subtype can be triple for tri - state checkbox.

init is a callback function and can be implemented to convert or initialize simple html control mentioned in type into a custom control i.e., jQueryUI datepicker, autocomplete or any other plugin.

prepend is an object holding value label pairs which are prepended ( appear at the top ) to the select list options. e.g., { '' : 'Select an option' }. It can have one or more than one value label pairs i.e., { 0 : 'a', 1 : 'b',... }. When more than one value label pairs are specified, they can appear at the top of select list in any random order.

options is an array holding options in select list and is used along with type = select.
Syntax of data for options can be an

  • array of strings [ value1, value2, ..]
  • array of associative value label pairs e.g., [ { 'CB01': 'Mark' }, { 'CB02': 'Robert' }, ... ]
  • JSON data i.e. [ { customerid: 'CB01', contactName: 'Mark' }, { customerid: 'CB02', contactName: 'Robert' }, ... ]
    labelIndx, valueIndx have to be provided in this case. e.g., for aforementioned JSON data, valueIndx = "customerid" and labelIndx = "contactName".

    groupIndx can be specified when grouping via optgroup is required in select list. e.g., for the JSON data: [ { country: 'Japan', region: 'Hokkaidō' }, { country: 'Japan', region: 'Chūbu' }, { country: 'UK', region: 'London' }, { country: 'UK', region: 'Yorkshire' },... ] valueIndx = labelIndx = "region", groupIndx = "country"

    Disabled options can be specified in the JSON data by adding property pq_disabled: true e.g., [ { country: 'Japan', region: 'Hokkaidō', pq_disabled: true },...]

options can also be a callback function returning data in aforementioned format.

Select lists are generated from the options and stored in cache for performance. If need arise as to reset the options and regenerate the select list, cache should be set to null before specifying fresh set of options.

cls injects css class into the header control

style adds inline css style to the control.

attr adds html attributes to the control. It is quite useful in a number of use cases e.g., a select list can be turned into a multiple select list by addition of 'multiple' attribute i.e., attr: 'multiple'. An input control ( type = 'textbox', 'textarea' ) can limit the number of input characters by addition of maxlength attribute i.e., attr: 'maxlength="5"'

listeners is an array used to bind control with the events upon firing of which a callback function is called.
Format is listeners: [ { 'name of event' : function( evt, ui ){ } } ,... ] where ui in the callback is an object holding the following properties.
  • value: Current value in the control.
  • value2: Second value in the control. Applicable only when 'between' condition is used.
There are 3 inbuilt listeners i.e. 'keyup', 'change' and 'click' for which there is no need to implement callback function. These inbuilt listeners filter the data in grid when specified event is fired.
'keyup' is useful for textbox, textarea.
'change' is useful for textbox, textarea and select lists.
'click' is useful for check boxes.
e.g., to filter data when option is changed in a select list, listeners = [ 'change' ]

Code examples:

Initialize the pqGrid with column > filter option specified.

var colM = 
[
    { 
        title: "ShipCountry",         
        filter: { 
            type: 'textbox', 
            condition: 'equal', 
            value:'france'
        } 
    },
    { 
        title: "Ship Region", 
        filter:{
            type: 'select',
            attr: 'multiple',
            condition: 'range',
            value: ['AR', 'CA', 'WA']
        }            
    }
];
$( ".selector" ).pqGrid( {colModel:colM} );

Get or set the column > filter option, after initialization:

//getter
var colM=$( ".selector" ).pqGrid( "option", "colModel" );
//get filter of 1st column
var filter=colM[0].filter;

//setter
//set filter of 2nd column
colM[1].filter = 
{ 
    type: "select", 
    options: [ "AUS", "IN", "US" ], 
    condition: "equal", 
    value: "IN" 
};
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > halignType: String
Default: "left"

It determines the horizontal alignment of text in the column headers. Possible values are "left", "right" and "center". It's default value is same as column.align

Code examples:

Initialize the pqGrid with column > halign option specified.

var colM = [
{ title: "Company", width: 100 ,dataType:"string"},
{ title: "Rank", width: 100,dataType:"integer",halign:"right" }];
$( ".selector" ).pqGrid( {colModel:colM} );

Get or set the column > halign option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get halign of 1st column
var dataType = colM[0].halign;

//setter
//set halign of 2nd column.
colM[1].halign = "center";
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > hiddenType: Boolean
Default: false

Column can be hidden using this option.

Code examples:

Initialize the pqGrid with column > hidden option specified.

var colM = [
{ title: "ShipCountry", width: 100, hidden:true },
{ title: "Customer Name", width: 100 }];
//hidden is specified for 1st column.
$( ".selector" ).pqGrid( {colModel:colM} );

Get or set the column > hidden option, after initialization:

//getter
var colM=$( ".selector" ).pqGrid( "option", "colModel" );
//get hidden of 1st column
var hidden = colM[0].hidden;

//setter
//set hidden of 2nd column
colM[1].hidden = true;
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > maxWidthType: Integer or String
Default: 100%

Maximum possible width of the column in pixels or in percent of width of the grid.

Code examples:

Initialize the pqGrid with column > maxWidth option specified.

//maxWidth is specified for both columns.
var colM = [
    { title: "ShipCountry", maxWidth: '80%' },
    { title: "Customer Name", maxWidth: 300 }
];

$( ".selector" ).pqGrid( {colModel:colM} );

Get or set the column > maxWidth option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get maxWidth of 1st column
var maxWidth = colM[0].maxWidth;

//setter
//set maxWidth of 2nd column
colM[1].maxWidth = '75%';
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > minWidthType: Integer or String
Default: 50

Minimum possible width of the column in pixels or in percent of width of the grid.

Code examples:

Initialize the pqGrid with column > minWidth option specified.

//minWidth is specified for both columns.
var colM = [
    { title: "ShipCountry", minWidth: 100 },
    { title: "Customer Name", minWidth: '20%' }
];

$( ".selector" ).pqGrid( {colModel:colM} );

Get or set the column > minWidth option, after initialization:

//getter
var colM=$( ".selector" ).pqGrid( "option", "colModel" );
//get minWidth of 1st column
var minWidth = colM[0].minWidth;

//setter
//set minWidth of 2nd column
colM[1].minWidth = 30;
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > render( ui )Type: Function
Default: null

It's a callback function which needs to return view of data for a cell. If no render function is provided the data is displayed as such in the cell.

  • ui
    Type: Object
    • rowData
      Type: Array or PlainObject
      Reference to 1-dimensional array or object representing row data.
    • rowIndx
      Type: Integer
      Zero based index of the row.
    • dataIndx
      Type: Integer or String
      Zero based index in array or key name in JSON.
    • colIndx
      Type: Integer
      Zero based index of the column.

Code examples:

Initialize the pqGrid with column > render( ui ) option specified.

var colM = [
{ title: "ShipCountry", width: 100, render:function( ui ){} },
{ title: "Customer Name", width: 100 }];
//render is provided for 1st column.
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > render( ui ) option, after initialization:

//getter
var colModel=$( ".selector" ).pqGrid( "option", "colModel" );
//get render of 1st column
var render=colModel[0].render;

//setter
//set render of 2nd column
colM[1].render = function( ui ){};
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > resizableType: Boolean
Default: true

Column is resizable depending upon the value of this option.

Code examples:

Initialize the pqGrid with column > resizable option specified.

var colM = [
//set 1st column as not resizable.            
{ title: "ShipCountry", width: 100, resizable: false,
{ title: "Customer Name", width: 100 }];

$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > resizable option, after initialization:

//getter
var colModel=$( ".selector" ).pqGrid( "option", "colModel" );
//get resizability of 1st column
var resizable = colModel[0].resizable;

//setter
//set resizability of 2nd column
colM[1].resizable = true;
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > sortableType: Boolean
Default: true

Set it to false to disable sorting for a column.

Code examples:

Initialize the pqGrid with column > sortable option specified.

var colM = [
{ title: "ShipCountry", width: 100, sortable: false },
{ title: "Customer Name", width: 100 }];
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > sortable option, after initialization:

//getter
var colModel=$( ".selector" ).pqGrid( "option", "colModel" );
//get sortable of 1st column
var render=colModel[0].sortable;

//setter
//set sortable of 2nd column
colM[1].sortable = false;
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > sortTypeType: Function
Default: undefined

This option ( added in 2.4.0 ) is used for local custom sorting. The callback function receives 3 parameters rowData1, rowData2 & dataIndx and it has to return +1 if rowData1[dataIndx] > rowData2[dataIndx], -1 if rowData1[dataIndx] < rowData2[dataIndx] and 0 if rowData1[dataIndx] and rowData2[dataIndx] are identical in sorting order.

Code examples:

Initialize the pqGrid with column > sortType option specified.

var colM = 
[
    { title: "Company", width: 100 },
    { title: "Rank", width: 100, sortType: function(rowData1, rowData2, dataIndx){
        //compare rowData1[dataIndx] and rowData2[dataIndx]    
    }}
];
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > sortType option, after initialization:

//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get sortType of 1st column
var sortType = colM[0].sortType;

//setter
//set sortType of 2nd column to implement custom sorting.
colM[1].sortType = function( rowData1, rowData2, dataIndx ){
	
};
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > summaryType: Object
Default: null

An object containing type and title of summary of this column for one or more grouped field. It's used along with grouping of rows (see groupModel). type is an array of predefined strings ( "count", "min", "max", "sum" ) or custom callback function. callback function receives an array of the items in the group. title is an array of strings having {0} as placeholder for type value. Individual title can also be a callback function since v2.4.0 The number of items in array corresponds to number of columns being grouped.

Code examples:

Initialize the pqGrid with column > summary option specified.

var colM = 
[
    { 
        title: "ShipCountry", 
        width: 100, 
        summary:{ 
            type: ["min", "max"], 
            title: [ "Min: {0}", "Max: {0}" ] 
        }
    },
    { 
        title: "Customer Name", 
        width: 100 
    }
];
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > summary option, after initialization:

//getter
var colModel=$( ".selector" ).pqGrid( "option", "colModel" );
//get summary of 1st column
var summary=colModel[0].summary;

//setter
//set summary of 2nd column
colM[1].summary = 
{
    type: ["count", function( arr ){
                        return "Join: "+ arr.join(",");
                    }
          ],
    title: [ "Total: {0}", "Join: {0}" ]            
};
$( ".selector" ).pqGrid("option","colModel",colM);

column > titleType: String
Default: null

Title or Heading of the column.

Code examples:

Initialize the pqGrid with column > title option specified.

var colM = [
{ title: "ShipCountry", width: 100 },
{ title: "Customer Name", width: 100 }];
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > title option, after initialization:

//getter
var colModel=$( ".selector" ).pqGrid( "option", "colModel" );
//get title of 1st column
var title=colModel[0].title;

//setter
//set title of 2nd column
colM[1].title = "Shipping Country";
$( ".selector" ).pqGrid("option","colModel",colM);

column > typeType: String
Default: null

Type of column. It has 2 possible values: 'checkBoxSelection' and 'detail'. 'checkBoxSelection' turns the whole column into checkboxes which aid in selection of rows. This column needs to be bound to a boolean field which can save the state of the checkboxes. 'detail' turns the column into icons used to display the collapsed or expanded state of rows. It's used in conjunction with detailModel. dataIndx of this column is 'pq_detail'. rowData['pq_detail']['show'] == true for the expanded rows.

Code examples:

Initialize the pqGrid with column > type option specified.

var colM = [
{ title: "", width: 50, type: 'checkBoxSelection' },
{ title: "Customer Name", width: 100 }];
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > type option, after initialization:

//getter
var colModel=$( ".selector" ).pqGrid( "option", "colModel" );
//get type of 1st column
var type = colModel[0].type;

//setter
//set type of 2nd column
colM[1].type = "checkBoxSelection";
$( ".selector" ).pqGrid( "option", "colModel", colM);

column > validationsType: Array
Default: null

An array of objects where object is { type: type, value: value, msg: msg, warn: warn }, it determines the validation or warning rules for a column/cell. type can be minLen, maxLen, gt, gte, lt, lte, regexp, nonEmpty or callback function where minLen is minimum length, maxLen is maximum length, gt is greater than, gte is greater than or equal to, lt is less than, lte is less than or equal to, nonEmpty should not be "", null or undefined, regexp is regular expression, callback function receives an object { column:column, value:value, rowData:rowData, msg:msg } where msg can be modified by callback function. msg is the message displayed in tooltip for validation or warning. warn = true turns the validation into a warning. Note that global validation options icon, cls & style in options.validation can be overridden in individual column validations. Similarly global warning options in options.warning can be overridden in individual column warnings. In v2.4.0 one more type = neq has been added which stands for 'not equal to'.

Code examples:

Initialize the pqGrid with column > validations option specified.

var colM = [
{ title: "Customer Id" },
{ title: "Customer Name", 
    validations: [ 
        //validation    
        { type: 'minLen', value: '1', msg: 'Required' },
        //warning    
        { type: 'minLen', value: '5', msg: 'Better more than 5 chars', warn: true },
    ] 
}];
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > validations option, after initialization:

//getter
var colModel=$( ".selector" ).pqGrid( "option", "colModel" );
//get validation rules of 1st column
var validations = colModel[0].validations;

//setter
//set validation of 2nd column
colM[1].validations = [ 
    { type: 'minLen', value: '1', msg: 'Required' },
    { type: 'regexp', value: /[0-9]{2}/[0-9]{2}/[0-9]{4}/, msg: 'Not in mm/dd/yyyy format.'}
];
$( ".selector" ).pqGrid( "option", "colModel", colM);

column > widthType: Integer
Default: null

Width of the column in pixels or in percent of width of the grid. It defaults to minimum width of the column when width is not specified or when width is less than minimum width.

Code examples:

Initialize the pqGrid with column > width option specified.

var colM = [
{ title: "ShipCountry", width: 100 },
{ title: "Customer Name", width: '50%' }];
$( ".selector" ).pqGrid( { colModel: colM } );

Get or set the column > width option, after initialization:

//getter
var colM=$( ".selector" ).pqGrid( "option", "colModel" );
//get width of 1st column
var width = colM[0].width;

//setter
//set width of 2nd column
colM[1].width = 120;
$( ".selector" ).pqGrid( "option", "colModel", colM );

columnBordersType: Boolean
Default: true

Determines display of vertical borders of the columns.

Code examples:

Initialize the pqGrid with columnBorders option specified.

$( ".selector" ).pqGrid( { columnBorders: false } );

Get or set the columnBorders option, after initialization:

//getter
var columnBorders=$( ".selector" ).pqGrid( "option", "columnBorders" );            

//setter
$( ".selector" ).pqGrid( "option", "columnBorders", true );

columnTemplateType: Object
Default: null

Any properties defined in this option are deep cloned and applied to all columns. It's convenient to use this option to define common properties at a single place rather than repeating them in all columns in keeping with the principle of DRY (don't repeat yourself).

Code examples:

Initialize the pqGrid with columnTemplate option specified.

$( ".selector" ).pqGrid( { columnTemplate: { widthPercent: 10, minWidth: 50 } } );

Get or set the columnTemplate option, after initialization:

//getter
var columnTemplate = $( ".selector" ).pqGrid( "option", "columnTemplate" );  

//setter
$( ".selector" ).pqGrid( "option", "columnTemplate", { editor: { select: true } } );

dataModelType: Object
Default: null

It contains information about the data in array form and various other properties. It's mandatory to pass dataModel to pqGrid constructor.

Code examples:

Initialize the pqGrid with dataModel option specified.

var dataSales = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'],
    [2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
    [3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],
    [4, 'BP', '267,600.0', '22,341.0'],
    [5, 'General Motors', '192,604.0', '-10,567.0'],
    [6, 'Chevron', '189,481.0', '14,099.0'],
    [7, 'DaimlerChrysler', '186,106.3', '3,536.3'],
    [8, 'Toyota Motor', '185,805.0', '12,119.6'],
    [9, 'Ford Motor', '177,210.0', '2,024.0'],
    [10, 'ConocoPhillips', '166,683.0', '13,529.0']];
$( ".selector" ).pqGrid( { dataModel: { data: dataSales } } );

Get or set the dataModel option, after initialization:

//getter
var dataModel=$( ".selector" ).pqGrid( "option", "dataModel" );            

//setter
$( ".selector" ).pqGrid( "option", "dataModel", { data: dataSales, ... } );

dataModel > beforeSend( jqXHR, settings )Type: Function
Default: null

This option is relevant only when dataModel.location is remote. It's a callback function which can be used to modify jqXHR before it's sent. Use this to set custom headers, etc. The jqXHR and settings maps are passed as arguments. This is an Ajax Event. Returning false in the beforeSend function will cancel the request.

Code examples:

Initialize the pqGrid with dataModel > beforeSend( jqXHR, settings ) option specified.

$( ".selector" ).pqGrid( { dataModel:{ beforeSend: function( jqXHR, settings ){
	
}});

Get or set the dataModel > beforeSend( jqXHR, settings ) option, after initialization:

//getter
var beforeSend=$( ".selector" ).pqGrid( "option" , "dataModel.beforeSend" );

//setter
$( ".selector" ).pqGrid( "option", "dataModel.beforeSend", function( jqXHR, settings ){});

dataModel > contentTypeType: String
Default: undefined

This option is relevant only when dataModel.location is remote. When sending data to the server, use this option to override default content-type header determined by $.ajax request. In some frameworks e.g., ASP.NET webforms it's required to set content-type explicitly to 'application/json; charset=UTF-8' while sending JSON data to the server.

Code examples:

Initialize the pqGrid with dataModel > contentType option specified.

$( ".selector" ).pqGrid( { dataModel: { 
            contentType :'application/json; charset=UTF-8' }} );

Get or set the dataModel > contentType option, after initialization:

//getter
var contentType = $( ".selector" ).pqGrid( "option" , "dataModel.contentType" );

//setter
$( ".selector" ).pqGrid( "option", "dataModel.contentType", 'application/json; charset=UTF-8' );

dataModel > dataType: Array
Default: null

Reference to a 2-dimensional array (array of arrays) or JSON (array of key/value paired plain objects). Local requests use this option to directly pass data to pqGrid. Remote requests use dataModel.url / dataModel.getUrl and dataModel.getData options to feed data to pqGrid. The data for both local and remote requests reside in dataModel.data. It's important to note that when data is array of objects, dataIndx in colModel should be strings matching with keys in the objects i.e., for the below data format, dataIndx for first column should be 'rank'. When data is array of arrays, dataIndx in colModel should be either integers or can be omitted.

Code examples:

Initialize the pqGrid with dataModel > data option specified.

//array of arrays
var dataSales = [[ 1, 'Exxon Mobil', '339,938.0', '36,130.0' ],
    [ 2, 'Wal-Mart Stores', '315,654.0', '11,231.0' ],
    [ 3, 'Royal Dutch Shell', '306,731.0', '25,311.0' ],
    [ 4, 'BP', '267,600.0', '22,341.0' ],
    [ 5, 'General Motors', '192,604.0', '-10,567.0' ] ];
//or array of objects
var dataSales = [
    { rank:1, company: 'Exxon Mobil', revenues: '339,938.0', profits: '36,130.0' },
    { rank:2, company: 'Wal-Mart Stores', revenues: '315,654.0', profits: '11,231.0' },
    { rank:3, company: 'Royal Dutch Shell', revenues: '306,731.0', profits: '25,311.0' },
    { rank:4, company: 'BP', revenues: '267,600.0', profits: '22,341.0' },
    { rank:5, company: 'General Motors', revenues: '192,604.0', profits: '-10,567.0' } ];
//pass it to pqGrid.	
$( ".selector" ).pqGrid( { dataModel: { data: dataSales } } ); 

Get or set the dataModel > data option, after initialization:

//getter
var data=$( ".selector" ).pqGrid( "option" , "dataModel.data" );            

//setter
$( ".selector" ).pqGrid( "option", "dataModel.data", dataSales );

dataModel > dataTypeType: String
Default: "TEXT"

This option is relevant only when dataModel.location is remote. Data Type of response from server in case of remote request. Possible values are "TEXT", "XML" or "JSON"

Code examples:

Initialize the pqGrid with dataModel > dataType option specified.

$( ".selector" ).pqGrid( {dataModel:{ dataType: "XML"} } );

Get or set the dataModel > dataType option, after initialization:

//getter
var dataType=$( ".selector" ).pqGrid( "option", "dataModel.dataType" );

//setter
$( ".selector" ).pqGrid( "option", "dataModel.dataType", "JSON" );

dataModel > error( jqXHR, textStatus, errorThrown )Type: Function
Default: null

This option is relevant only when dataModel.location is remote. Callback handler for Ajax error.

Code examples:

Initialize the pqGrid with dataModel > error( jqXHR, textStatus, errorThrown ) option specified.

$( ".selector" ).pqGrid( {dataModel:{error:function( jqXHR, textStatus, errorThrown ){} }} );

Get or set the dataModel > error( jqXHR, textStatus, errorThrown ) option, after initialization:

//getter
var errorHandler=$( ".selector" ).pqGrid( "option", "dataModel.error" );

//setter
$( ".selector" ).pqGrid( "option", "dataModel.error", function( jqXHR, textStatus, errorThrown ){} );

dataModel > getData( response, textStatus, jqXHR )Type: Function
Default: null

This option is relevant only when dataModel.location is remote. It's a callback function which acts as a mediator between remote server and pqGrid and processes the incoming data from server to make it suitable for pqGrid. This callback needs to return an object containing data, curPage and totalRecords where data should be 2-dimensional array (array of arrays) or JSON (array of key/value paired plain objects). If the server returns data in any other format e.g. XML then it's the responsibility of this callback to convert it into 2 dimensional array or JSON. curPage denotes current page, totalRecords denotes sum of all records on all pages. curPage and totalRecords are optional and are required only when using remote paging.

Code examples:

Initialize the pqGrid with dataModel > getData( response, textStatus, jqXHR ) option specified.

$( ".selector" ).pqGrid({dataType:"JSON",dataModel:{getData:function( dataJSON, textStatus, jqXHR ){
	return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
}});

Get or set the dataModel > getData( response, textStatus, jqXHR ) option, after initialization:

//getter
var getData=$( ".selector" ).pqGrid( "option" , "dataModel.getData" );

//setter
$( ".selector" ).pqGrid("option","dataModel.getData",function( response, textStatus, jqXHR ){});

dataModel > getUrl( { colModel: colModel, dataModel: dataModel, filterModel: filterModel, groupModel: groupModel, pageModel: pageModel } )Type: Function
Default: null

This option is relevant only when dataModel.location is remote. It's a callback function which returns the url and data associated with GET or POST request. This callback allows more control than dataModel.url by specifying the fields of information being sent to server and dataModel.url is ignored when dataModel.getUrl is specified.

Code examples:

Initialize the pqGrid with dataModel > getUrl( { colModel: colModel, dataModel: dataModel, filterModel: filterModel, groupModel: groupModel, pageModel: pageModel } ) option specified.

$( ".selector" ).pqGrid( { dataModel:{ getUrl: function(){
    return { url: "/demos/pagingGetOrders", data: {key1:val1,key2:val2,key3:val3} };
}});

Get or set the dataModel > getUrl( { colModel: colModel, dataModel: dataModel, filterModel: filterModel, groupModel: groupModel, pageModel: pageModel } ) option, after initialization:

//getter
var getUrl=$( ".selector" ).pqGrid( "option" , "dataModel.getUrl" );

//setter
$( ".selector" ).pqGrid( "option" , "dataModel.getUrl", function(){});

dataModel > locationType: String
Default: "local"

It can be either "remote" or "local". When location is local, dataModel.data option has to be assigned manually. It only means local data from the perspective of the grid, while the data could be fetched from remote server by implementor using AJAX synchronous or asynchronous requests. When location is remote, grid takes care of sending and receiving the data from server on its own. In the later case, it's necessary to provide dataMode.url/dataModel.getUrl and dataModel.getData options.

Code examples:

Initialize the pqGrid with dataModel > location option specified.

$( ".selector" ).pqGrid( { dataModel:{ location:"remote" } } );

Get or set the dataModel > location option, after initialization:

//getter
var location=$( ".selector" ).pqGrid( "option", "dataModel.location" );            

//setter
$( ".selector" ).pqGrid( "option", "dataModel.location", "remote" );

dataModel > methodType: String
Default: "GET"

This option is relevant only when dataModel.location is remote. Method to use to fetch data from server in case of remote request. Possible values are "GET" and "POST".

Code examples:

Initialize the pqGrid with dataModel > method option specified.

$( ".selector" ).pqGrid( {dataModel: {method: "POST" } } );

Get or set the dataModel > method option, after initialization:

//getter
var method=$( ".selector" ).pqGrid( "option", "dataModel.method" );

//setter
$( ".selector" ).pqGrid( "option", "dataModel.method", "GET" );

dataModel > postDataType: Object or Funtion
Default: null

This option is relevant only when dataModel.location is remote. Any custom data (in JSON format) to be sent to the server can be put here. It's serialized into a string and appended to the data send by the grid to the server. The callback variant receives an object { colModel: colModel, dataModel: dataModel } as parameter. It's converted into query string i.e for postData = {key1:value1, key2:value2} it becomes key1=value1&key2=value2

Code examples:

Initialize the pqGrid with dataModel > postData option specified.

$( ".selector" ).pqGrid( {dataModel: { postData: {gridId:23, table: "products"} }} );

Get or set the dataModel > postData option, after initialization:

//getter
var postData=$( ".selector" ).pqGrid( "option", "dataModel.postData" );

//setter
$( ".selector" ).pqGrid( "option", "dataModel.postData", function( ui ){
    return {table: "products"};
} );

dataModel > postDataOnceType: Object
Default: null

This option is relevant only when dataModel.location is remote. Any custom data to be sent to the server can be put here. postDataOnce value is send to server only once and it loses its value after that.

Code examples:

Initialize the pqGrid with dataModel > postDataOnce option specified.

$( ".selector" ).pqGrid( {dataModel: { postDataOnce: {gridId:23, table: "products"} }} );

Get or set the dataModel > postDataOnce option, after initialization:

//getter
var postDataOnce =$( ".selector" ).pqGrid( "option", "dataModel.postDataOnce" );

//setter
$( ".selector" ).pqGrid( "option", "dataModel.postDataOnce", { table: "products" } );

dataModel > recIndxType: Integer or String
Default: null

Identifier / name of primary key of the record.

Code examples:

Initialize the pqGrid with dataModel > recIndx option specified.

$( ".selector" ).pqGrid( {dataModel:{ recIndx: "id"} } );

Get or set the dataModel > recIndx option, after initialization:

//getter
var recIndx = $( ".selector" ).pqGrid( "option", "dataModel.recIndx" );

//setter
//for array            
$( ".selector" ).pqGrid( "option", "dataModel.recIndx", 0 );
//for JSON                        
$( ".selector" ).pqGrid( "option", "dataModel.recIndx", "id" );

dataModel > sortDirType: String or Array
Default: "up" or [ "up", ..]

The direction in which the column is sorted. It has significance along with sortIndx. Possible values are "up" or "down". Array type is used when multiple column sorting is desired.

Code examples:

Initialize the pqGrid with dataModel > sortDir option specified.

$( ".selector" ).pqGrid( {dataModel:{ sortDir: "down" }} );
//multiple column sorting            
$( ".selector" ).pqGrid( {dataModel:{ sortDir: ["up", "down"] }} );

Get or set the dataModel > sortDir option, after initialization:

//getter
var sortDir=$( ".selector" ).pqGrid("option","dataModel.sortDir");

//setter
$( ".selector" ).pqGrid( "option", "dataModel.sortDir", "up" );
//multiple column sorting            
$( ".selector" ).pqGrid( "option", "dataModel.sortDir", ["up"] );

dataModel > sortIndxType: Integer or String or Array
Default: null

The dataIndx of the sorted column or columns. It turns into multiple column sorting when array is used.

Code examples:

Initialize the pqGrid with dataModel > sortIndx option specified.

//array of integers for array data with multiple column sorting
$( ".selector" ).pqGrid( {dataModel: {sortIndx: [2] } } );
//string for JSON data.
$( ".selector" ).pqGrid( {dataModel: {sortIndx: "company"} } );

Get or set the dataModel > sortIndx option, after initialization:

//getter
var sortIndx = $( ".selector" ).pqGrid( "option" , "dataModel.sortIndx" );

//setter using integer for array data.
$( ".selector" ).pqGrid("option", "dataModel.sortIndx", 0);
//setter using string for JSON data.
$( ".selector" ).pqGrid("option", "dataModel.sortIndx", "rank");
//setter using array of strings for JSON data with multiple column sorting
$( ".selector" ).pqGrid("option", "dataModel.sortIndx", ["rank", "profits"] );        

dataModel > sortingType: String
Default: "local"

Whether sorting is client side or server side. Possible values are "local" or "remote".

Code examples:

Initialize the pqGrid with dataModel > sorting option specified.

$( ".selector" ).pqGrid({dataModel:{sorting:"remote"}});

Get or set the dataModel > sorting option, after initialization:

//getter
var sorting = $( ".selector" ).pqGrid("option","dataModel.sorting");

//setter
$( ".selector" ).pqGrid("option","dataModel.sorting","local");

dataModel > urlType: String
Default: null

This option is relevant only when dataModel.location is remote. It's an absolute or relative url from where grid gets remote data and sends requests (via GET or POST) for remote sorting, paging, filter, etc. Either getUrl or url is mandatory for remote requests. getUrl takes precedence over url if both the options are mentioned.

Code examples:

Initialize the pqGrid with dataModel > url option specified.

$( ".selector" ).pqGrid( { dataModel:{ url: "/demos/pagingGetOrders" } } );

Get or set the dataModel > url option, after initialization:

//getter
var url=$( ".selector" ).pqGrid( "option" , "dataModel.url" );

//setter
$( ".selector" ).pqGrid( "option" , "dataModel.url", "http://paramquery.com/getOrders" );

detailModelType: Object
Default: {cache: true, collapseIcon:"ui-icon-triangle-1-e", expandIcon:"ui-icon-triangle-1-se"}

It contains information about the detail view of row. This option is also useful for nesting of grids. It consists of 4 options: cache: determines the caching of detail view. Every collapse and expand of row leads to refresh of detail data and view when cache is false. init: is a callback function which receives rowData as argument and has to return detail view as jQuery object. collapseIcon: determines the icon to be displayed when row is collapsed. expandIcon: determines the icon to be displayed when row is expanded.

Code examples:

Initialize the pqGrid with detailModel option specified.

$( ".selector" ).pqGrid( {"detailModel": { 
    cache:false, 
    init: function(ui){
        var rowData=ui.rowData;
        return $template;    
    } 
}});

Get or set the detailModel option, after initialization:

//getter
var detailModel = $( ".selector" ).pqGrid( "option", "detailModel" );            

//setter
$( ".selector" ).pqGrid( "option", "detailModel", { cache: false } );

dragColumnsType: Object
Default: {enabled: true, acceptIcon: 'ui-icon-check', rejectIcon: 'ui-icon-closethick', topIcon: 'ui-icon-circle-arrow-s', bottomIcon:'ui-icon-circle-arrow-n' }

The columns can be reordered by drag and drop. It can be enabled or disabled and the icons can be changed using various sub options.

Code examples:

Initialize the pqGrid with dragColumns option specified.

$( ".selector" ).pqGrid( dragColumns: { enabled: false } );

Get or set the dragColumns option, after initialization:

//getter
var dragColumns = $( ".selector" ).pqGrid( "option", "dragColumns" );            

//setter
$( ".selector" ).pqGrid( "option", "dragColumns", { 
    enabled: true, 
    acceptIcon: 'ui-icon-plusthick' 
} );

draggableType: Boolean
Default: false

The pqGrid becomes draggable if this option is set to true.

Code examples:

Initialize the pqGrid with draggable option specified.

$( ".selector" ).pqGrid( {draggable: true} );

Get or set the draggable option, after initialization:

//getter
var draggable=$( ".selector" ).pqGrid( "option", "draggable" );            

//setter
$( ".selector" ).pqGrid( "option", "draggable", true );

editableType: Boolean or Function
Default: true

Editing can be disabled for all columns by setting it to false or a callback function can be implemented. It receives { rowData: rowData, rowIndx: rowIndx} as parameter.

Code examples:

Initialize the pqGrid with editable option specified.

$( ".selector" ).pqGrid( {editable:false} );

Get or set the editable option, after initialization:

//getter
var editable=$( ".selector" ).pqGrid( "option", "editable" );            

//setter
$( ".selector" ).pqGrid( "option", "editable", false );
$( ".selector" ).pqGrid( "option", "editable", function( ui ){
    var rowIndx = ui.rowIndx;
    if ( $(this).pqGrid("hasClass", {rowIndx: rowIndx, cls: 'pq-delete' } ) ) {
        return false;
    }
    else {
        return true;
    }    
});

editModelType: Object
Default: { cellBorderWidth: 0, clicksToEdit: 2, pressToEdit: true, filterKeys: true, keyUpDown: true, saveKey: '', onSave: null, onBlur: 'validate', allowInvalid: false, invalidClass: 'pq-cell-red-tr pq-has-tooltip', warnClass: 'pq-cell-blue-tr pq-has-tooltip' }

clicksToEdit provides the editing behaviour of the grid w.r.t clicks (1 for single click or 2 for double click) required to edit a cell.
pressToEdit puts a cell into edit mode when any input key is pressed while cell has focus.
saveKey determines the ascii code of custom key to save data in a cell in addition to Tab key. Use $.ui.keyCode object to use key name mnemonics instead of using ascii codes which are difficult to remember.
onSave determines the cell navigation when save key is pressed in an editor. Next editable cell calculated from left to right and top to bottom is put into edit mode when onSave is next
The border width of the container displayed around the editor can be changed using cellBorderWidth.
filterKeys option is used to prevent non digits in float and integer dataType columns.
keyUpDown is used for key navigation in the editing cells using up and down key.
onBlur determines the behaviour of the editor when it's blurred. onBlur = 'validate' keeps the editor in edit mode until it passes the validation. onBlur = 'save' saves the value if validation is met, exits from edit mode irrespective of whether editor passes the validation. onBlur = '' doesn't do anything and the editor remains in edit mode.
allowInvalid when true doesn't reject an invalid value but instead adds a class invalidClass to the cell.
invalidClass adds a class to a cell when allowInvalid option is true and the cell fails validation. Note that editModel options filterKeys, keyUpDown & saveKey can be overridden in the individual columns (column.editModel).

Code examples:

Initialize the pqGrid with editModel option specified.

//double click to edit cell and enter key saves the cell.
$( ".selector" ).pqGrid( {editModel: { clicksToEdit: 2, saveKey: $.ui.keyCode.ENTER } );

Get or set the editModel option, after initialization:

//getter
var editModel=$( ".selector" ).pqGrid( "option", "editModel" );            

//setter
var editModel = { 
    clicksToEdit: 1, 
    saveKey: $.ui.keyCode.ENTER,
    cellBorderWidth: 1
};            
$( ".selector" ).pqGrid( "option", "editModel", editModel );

editorType: Object
Default: { type: 'textbox', cls: '' , style: '', select: false }

It provides the editor properties for whole grid. type sets the kind of editor out of 'contenteditable', 'textbox', 'textarea'. style sets the css style. cls sets the css class. select option is useful for selection of text in a cell editor upon focus. Note that editor options can be overridden in the individual columns (column.editor).

Code examples:

Initialize the pqGrid with editor option specified.

//make input box as default editor with round corners.
$( ".selector" ).pqGrid( {editor: { type: 'textbox', style: 'border-radius:5px;' } } );

Get or set the editor option, after initialization:

//getter
var editor=$( ".selector" ).pqGrid( "option", "editor" );            

//setter
var editor = { 
    type: 'textarea',
    cls: 'custom-class'        
};            
$( ".selector" ).pqGrid( "option", "editor", editor );

filterModelType: Object
Default: { on: true, mode: "AND", header: false, type: null }

It describes the filtering behavior of the grid. Filtering can be turned on or off depending upon the property on. Multiples columns are filtered together depending upon mode which can be either 'AND' or 'OR'. Column filter input controls are displayed at top of the rows in the header when header is true. By default filtering is done locally when dataModel.location is 'local' and remotely when dataModel.location is 'remote'. However local filtering can be done with dataModel.location as 'remote' when type = 'local'. See column.filter for complementary column specific options.

Code examples:

Initialize the pqGrid with filterModel option specified.

$( ".selector" ).pqGrid( { filterModel: { header: true } } );

Get or set the filterModel option, after initialization:

//getter
var filterModel=$( ".selector" ).pqGrid( "option", "filterModel" );            

//setter
$( ".selector" ).pqGrid( "option", "filterModel", { on: false, mode : "OR" } );

flexHeightType: Boolean
Default: false

This option is deprecated as of v2.3.0 and is replaced by height: flex. The grid height is adjusted to the content height so that all the content is visible vertically. The vertical scrollbar becomes invisible.

Code examples:

Initialize the pqGrid with flexHeight option specified.

$( ".selector" ).pqGrid( {flexHeight:true} );

Get or set the flexHeight option, after initialization:

//getter
var flexHeight=$( ".selector" ).pqGrid( "option", "flexHeight" );            

//setter
$( ".selector" ).pqGrid( "option", "flexHeight", true );

flexWidthType: Boolean
Default: false

This option is deprecated as of v2.3.0 and is replaced by width: flex. The grid width becomes equal to sum total of all column widths so that all the columns are visible in the grid. Resize of any column leads to resize of the grid. It overrides the scrollModel > autoFit and scrollModel > lastColumn options.

Code examples:

Initialize the pqGrid with flexWidth option specified.

$( ".selector" ).pqGrid( {flexWidth: true} );

Get or set the flexWidth option, after initialization:

//getter
var flexWidth=$( ".selector" ).pqGrid( "option", "flexWidth" );            

//setter
$( ".selector" ).pqGrid( "option", "flexWidth", true );

freezeColsType: Integer
Default: 0

The number of columns which can be frozen similar to MS Excel. The frozen columns remain fixed while non-frozen columns can be scrolled horizontally.

Code examples:

Initialize the pqGrid with freezeCols option specified.

$( ".selector" ).pqGrid( {freezeCols:2} );

Get or set the freezeCols option, after initialization:

//getter
var freezeCols=$( ".selector" ).pqGrid( "option", "freezeCols" );            

//setter
$( ".selector" ).pqGrid( "option", "freezeCols", 1 );

freezeRowsType: Integer
Default: 0

The number of rows which can be frozen similar to MS Excel. The frozen rows remain fixed while non-frozen rows can be scrolled vertically.

Code examples:

Initialize the pqGrid with freezeRows option specified.

$( ".selector" ).pqGrid( {freezeRows:2} );

Get or set the freezeRows option, after initialization:

//getter
var freezeRows=$( ".selector" ).pqGrid( "option", "freezeRows" );            

//setter
$( ".selector" ).pqGrid( "option", "freezeRows", 1 );

groupModelType: Object
Default: null

It defines the grouping of rows. It can be grouped by any number of fields. Frozen column in row grouping is not supported while virtualX is false.

Code examples:

Initialize the pqGrid with groupModel option specified.

$( ".selector" ).pqGrid( {groupModel: { dataIndx: ["ShipCountry"] } } );

Get or set the groupModel option, after initialization:

//getter
var groupModel=$( ".selector" ).pqGrid( "option", "groupModel" );            

//setter
var groupModel={
    //dataIndx: [ "ShipCountry", "contactName", "ShipVia" ],//in case of JSON
    dataIndx: [1, 0, 6],//in case of Array.
    title: [ "{0} - {1} order(s)", "{0} - {1}","{0} - {1}" ], 
    dir: [ "up" , "down" ],
    icon: ["circle-plus"]
    };            
$( ".selector" ).pqGrid( "option", "groupModel", groupModel );

groupModel > collapsedType: Array
Default: [ false, ... ]

Array of boolean values which determines whether the groups are expanded or collapsed. All the groups are expanded by default.

Code examples:

Initialize the pqGrid with groupModel > collapsed option specified.

$( ".selector" ).pqGrid( {groupModel: { collapsed: [ false, true ] } } );

Get or set the groupModel > collapsed option, after initialization:

//getter
var collapsed=$( ".selector" ).pqGrid( "option", "groupModel.collapsed" );            

//setter
$( ".selector" ).pqGrid( "option", "groupModel.collapsed", [ false, false, true ] );

groupModel > dataIndxType: Array
Default: null

Array of dataIndx (String or Integer) by which the rows are grouped. It's mandatory option as grouping is not possible without it.

Code examples:

Initialize the pqGrid with groupModel > dataIndx option specified.

$( ".selector" ).pqGrid( {groupModel: { dataIndx: [ "ShipCountry" ] } } );

Get or set the groupModel > dataIndx option, after initialization:

//getter
var dataIndx=$( ".selector" ).pqGrid( "option", "groupModel.dataIndx" );            

//setter: group by 3 fields.
$( ".selector" ).pqGrid( "option", "groupModel.dataIndx", 
    [ "ShipCountry", "contactName", "ShipVia" ] 
);

groupModel > dirType: Array
Default: [ "up", ... ]

Array of directions which can be either "up" or "down".

Code examples:

Initialize the pqGrid with groupModel > dir option specified.

$( ".selector" ).pqGrid( {groupModel: { dir: [ "up", "down", "up" ] } } );

Get or set the groupModel > dir option, after initialization:

//getter
var dir=$( ".selector" ).pqGrid( "option", "groupModel.dir" );            

//setter
$( ".selector" ).pqGrid( "option", "groupModel.dir", [ "up", "down" ] );

groupModel > iconType: Array
Default: [ [ "ui-icon-minus" , "ui-icon-plus" ], ... ]

Icons displayed in front of title of the group. Different icons can be used for different columns. These are specified as pair of expanded / collapsed icon classes i.e. [ "ui-icon-minus" , "ui-icon-plus" ]. The first value in the pair corresponds to expanded state icon and 2nd corresponds to collapsed state. It's optional.

Code examples:

Initialize the pqGrid with groupModel > icon option specified.

$( ".selector" ).pqGrid( {groupModel: { icon: 
    [ [ "ui-icon-triangle-1-s" , "ui-icon-triangle-1-e" ], [ "ui-icon-minus" , "ui-icon-plus" ] ]
}});

Get or set the groupModel > icon option, after initialization:

//getter
var icon=$( ".selector" ).pqGrid( "option", "groupModel.icon" );            

//setter
$( ".selector" ).pqGrid( "option", "groupModel.icon", 
    [ [ "ui-icon-minus" , "ui-icon-plus" ] ] 
);

groupModel > summaryClsType: Array
Default: undefined

Array of classes applied to different summary title rows. This option is added in v2.4.0

Code examples:

Initialize the pqGrid with groupModel > summaryCls option specified.

$( ".selector" ).pqGrid( {groupModel: { summaryCls: [ "class1", "class2", ... ] } } );

Get or set the groupModel > summaryCls option, after initialization:

//getter
var summaryCls = $( ".selector" ).pqGrid( "option", "groupModel.summaryCls" );            

//setter
$( ".selector" ).pqGrid( "option", "groupModel.summaryCls", 
    [ "class1", "class2", ... ] 
);

groupModel > titleType: Array
Default: [ "{0} - {1} items(s)", ... ]

Array of titles displayed as group headings. It's optional. Headings are displayed as {0} - {1} items(s) where 0 is value of the field and 1 is no of items when this option is not provided. Individual titles can also be callback functions since v2.4.0

Code examples:

Initialize the pqGrid with groupModel > title option specified.

$( ".selector" ).pqGrid( {groupModel: { title: [ "{0} - {1} item(s)" , "{0} - {1}" ] } } );

Get or set the groupModel > title option, after initialization:

//getter
var titles=$( ".selector" ).pqGrid( "option", "groupModel.title" );            

//setter
$( ".selector" ).pqGrid( "option", "groupModel.title", 
    [ "{0} - {1} order(s)", "{0} - {1} item(s)" ] 
);

groupModel > titleClsType: Array
Default: undefined

Array of classes applied to different grouping title rows. This option is added in v2.4.0

Code examples:

Initialize the pqGrid with groupModel > titleCls option specified.

$( ".selector" ).pqGrid( {groupModel: { titleCls: [ "class1", "class2", ... ] } } );

Get or set the groupModel > titleCls option, after initialization:

//getter
var titleCls = $( ".selector" ).pqGrid( "option", "groupModel.titleCls" );            

//setter
$( ".selector" ).pqGrid( "option", "groupModel.titleCls", 
    [ "class1", "class2", ... ] 
);

heightType: String or Integer
Default: 400

Height of the grid in number of pixels (without 'px' suffix) i.e., 150, percent (%) i.e., '80%' or flex. When % format is used, height is calculated as height in percent of the containing block. It can also be described as combination of both percent & pixel i.e., '100%-20' or '50%+10'. % format is supported only when immediate parent of the grid has fixed height. % format is also supported when HTML body is direct parent of grid since v2.3.0. The grid height becomes sum total of all the rows on current page when height is flex. Note that refresh method should be called when height is changed dynamically through setter.

Code examples:

Initialize the pqGrid with height option specified.

$( ".selector" ).pqGrid( {height: 400} );

Get or set the height option, after initialization:

//getter
var height = $( ".selector" ).pqGrid( "option", "height" );            

//setter
$( ".selector" ).pqGrid( "option", "height", '100%-30' );

historyModelType: Object
Default: { on: true, allowInvalid: true, checkEditable: true, checkEditableAdd: false }

Defines properties while adding operations in history and while undo/redo. history can be turned on/off with the help of option on.
Invalid cell values are accepted and class editModel.invalidClass is added while undo / redo when allowInvalid option is true.
Cells / rows are checked for editability while undo / redo when checkEditable is true.
Cells are checked for editability while adding rows during undo / redo when checkEditableAdd is true.

Code examples:

Initialize the pqGrid with historyModel option specified.

$( ".selector" ).pqGrid( { historyModel: { on: false }} );

Get or set the historyModel option, after initialization:

//getter
var historyModel = $( ".selector" ).pqGrid( "option", "historyModel" );

//setter
$( ".selector" ).pqGrid( "option", "historyModel", { allowInvalid: false } );

hoverModeType: String
Default: 'row'

It provides the hover (mouseenter and mouseleave) behaviour of grid w.r.t cells and rows.

Code examples:

Initialize the pqGrid with hoverMode option specified.

$( ".selector" ).pqGrid({ hoverMode:'cell' });

Get or set the hoverMode option, after initialization:

//getter
var hoverMode=$( ".selector" ).pqGrid( "option", "hoverMode" );

//setter
$( ".selector" ).pqGrid( "option", "hoverMode", 'row' );

hwrapType: Boolean
Default: true

It determines the behaviour of header cell content which doesn't fit in a single line within the width of the cell. The text in the cells wraps to next line if wrap = true otherwise the overflowing text becomes hidden and continuation symbol ... is displayed at the end.

Code examples:

Initialize the pqGrid with hwrap option specified.

$( ".selector" ).pqGrid( {hwrap:true} );

Get or set the hwrap option, after initialization:

//getter
var hwrap=$( ".selector" ).pqGrid( "option", "hwrap" );            

//setter
$( ".selector" ).pqGrid( "option", "hwrap", true );

minWidthType: Integer
Default: 50

Minimum possible width of the grid in pixels.

Code examples:

Initialize the pqGrid with minWidth option specified.

$( ".selector" ).pqGrid({ minWidth:100 });

Get or set the minWidth option, after initialization:

//getter
var minWidth=$( ".selector" ).pqGrid( "option", "minWidth" );

//setter
$( ".selector" ).pqGrid( "option", "minWidth", 20 );

numberCellType: Object
Default: { width: 50, title: "", resizable: false, minWidth: 50, show: true }

Number cells indicating the row number are displayed in the grid. It can be removed or hidden by setting numberCell > show to false.

Code examples:

Initialize the pqGrid with numberCell option specified.

//disable number cell.
$( ".selector" ).pqGrid( { numberCell: {show: false} } );

Get or set the numberCell option, after initialization:

//getter
var numberCell=$( ".selector" ).pqGrid( "option", "numberCell" );            

//setter
$( ".selector" ).pqGrid( "option", "numberCell", { resizable: true, title: "Sr No" } );

pageModelType: Object
Default: { curPage: 1, rPP: 10, rPPOptions: [] }

It determines paging and type of paging w.r.t 'local' or 'remote'.

Code examples:

Initialize the pqGrid with pageModel option specified.

//use local paging.
$( ".selector" ).pqGrid( { pageModel: {type: 'local'} } );

Get or set the pageModel option, after initialization:

//getter
var pageModel=$( ".selector" ).pqGrid( "option", "pageModel" );            

//setter
$( ".selector" ).pqGrid( "option", "pageModel", { curPage: 3 } );

pageModel > curPageType: Integer
Default: 0

Current page of the view when paging has been enabled.

Code examples:

Initialize the pqGrid with pageModel > curPage option specified.

$( ".selector" ).pqGrid( {pageModel: {curPage: 3 } } );

Get or set the pageModel > curPage option, after initialization:

//getter
var curPage=$( ".selector" ).pqGrid( "option", "dataModel.curPage" );

//setter
$( ".selector" ).pqGrid( "option", "pageModel.curPage", 2 );

pageModel > rPPType: Integer
Default: 10

It denotes results per page when paging has been enabled.

Code examples:

Initialize the pqGrid with pageModel > rPP option specified.

$( ".selector" ).pqGrid( {pageModel:{rPP:100}} );

Get or set the pageModel > rPP option, after initialization:

//getter
var rPP=$( ".selector" ).pqGrid( "option", "pageModel.rPP" );

//setter
$( ".selector" ).pqGrid( "option", "pageModel.rPP", 20 );

pageModel > rPPOptionsType: Array
Default: [10, 20, 50, 100]

Results per page options in dropdown when paging has been enabled.

Code examples:

Initialize the pqGrid with pageModel > rPPOptions option specified.

$( ".selector" ).pqGrid({pageModel:{ rPPOptions:[10, 100, 200] }});

Get or set the pageModel > rPPOptions option, after initialization:

//getter
var rPPOptions=$( ".selector" ).pqGrid( "option", "pageModel.rPPOptions" );

//setter
$( ".selector" ).pqGrid( "option", "pageModel.rPPOptions", [10, 20, 100] );

pageModel > totalPagesType: Integer
Default: 0

Total pages of the view when paging has been enabled. It need not be modified for local requests as total pages is calculated by the grid.

Code examples:

Initialize the pqGrid with pageModel > totalPages option specified.

$( ".selector" ).pqGrid( {pageModel: {totalPages: 3 } } );

Get or set the pageModel > totalPages option, after initialization:

//getter
var totalPages=$( ".selector" ).pqGrid( "option", "pageModel.totalPages" );

//setter
$( ".selector" ).pqGrid( "option", "pageModel.totalPages", 2 );

pageModel > typeType: String
Default: null

Paging can be enabled for both local and remote requests. It has 2 possible values "local" and "remote". Paging is disabled when it's null.

Code examples:

Initialize the pqGrid with pageModel > type option specified.

$( ".selector" ).pqGrid( {pageModel: {type: 'local'}} );

Get or set the pageModel > type option, after initialization:

//getter
var paging=$( ".selector" ).pqGrid( "option", "pageModel.type" );

//setter
$( ".selector" ).pqGrid( "option", "pageModel.type", 'remote' );

pasteModelType: Object
Default: { on: true, select: true, allowInvalid: true, type: 'replace' }

Defines properties while paste of rows/cells in the grid. paste can be turned on/off with the help of option on.
rows/cells affected by paste operation are selected when select option is true.
Invalid cell values are accepted and class editModel.invalidClass is added when allowInvalid option is true.
type determines the type of paste out of replace, append, prepend. replace replaces the existing selection with pasted rows/cells. append appends the pasted rows/cells to the selected rows/cells. prepend prepends the pasted rows/cells to the selected rows/cells.

Code examples:

Initialize the pqGrid with pasteModel option specified.

$( ".selector" ).pqGrid( {pasteModel: { on: false }} );

Get or set the pasteModel option, after initialization:

//getter
var pasteModel = $( ".selector" ).pqGrid( "option", "pasteModel" );

//setter
$( ".selector" ).pqGrid( "option", "pasteModel", { validate: false } );

resizableType: Boolean
Default: false

The grid can be resized horizontally and vertically if this is set to true.

Code examples:

Initialize the pqGrid with resizable option specified.

$( ".selector" ).pqGrid( {resizable: true} );

Get or set the resizable option, after initialization:

//getter
var resizable=$( ".selector" ).pqGrid( "option", "resizable" );            

//setter
$( ".selector" ).pqGrid( "option", "resizable", true );

roundCornersType: Boolean
Default: true

Display of rounded corners at all 4 corners of the grid.

Code examples:

Initialize the pqGrid with roundCorners option specified.

$( ".selector" ).pqGrid( {roundCorners:true} );

Get or set the roundCorners option, after initialization:

//getter
var roundCorners=$( ".selector" ).pqGrid( "option", "roundCorners" );            

//setter
$( ".selector" ).pqGrid( "option", "roundCorners", true );

rowBordersType: Boolean
Default: true

Determines display of horizontal borders of the rows.

Code examples:

Initialize the pqGrid with rowBorders option specified.

$( ".selector" ).pqGrid( {rowBorders:false} );

Get or set the rowBorders option, after initialization:

//getter
var rowBorders=$( ".selector" ).pqGrid( "option", "rowBorders" );            

//setter
$( ".selector" ).pqGrid( "option", "rowBorders", true );

scrollModelType: Object
Default: { horizontal: true, pace: 'fast', autoFit: false, lastColumn: 'auto', theme: false, flexContent: undefined }

horizontal determines the visibility of horizontal scrollbar, however it's not recommended to use this sub-option to hide scrollbar and is deprecated in favour of autoFit and flex width.
pace governs behavior of the scrollbar sliders. Possible values are 'consistent', 'optimum' and 'fast'. 'consistent' and 'optimum' are meant for delegate scrolling while 'fast' is meant for live scrolling.
When true, autoFit changes the width of the columns to fit them all into the grid without scrolling. It prevents scrolling until all the columns have reached minWidth at which point the scrolling is inevitable. Any resize/change in the grid width leads to proportional change in width of columns.
lastColumn has 3 possible values. lastColumn = 'auto' changes the width of the last column to prevent trailing empty space in the grid. lastColumn = 'fullScroll' enables full scrolling in the grid so as to enable comparison upto last column in right unfrozen pane with that of last column in frozen pane. lastColumn = 'none' doesn't do anything.
theme option affects the theme of the scrollbars. If it's true, scrollbars puts on same theme as used by grid, otherwise it displays 3 dimensional scrollbars. theme can be set only during initialization.
flexContent = true is useful when the dimensions (usually height ) of a row or cell may change anytime after grid is laid out e.g., when cell contains images of unspecified height and width or when details of a row display content of unknown height via Ajax.

Code examples:

Initialize the pqGrid with scrollModel option specified.

$( ".selector" ).pqGrid({ scrollModel:{pace: 'fast', autoFit: true, theme: true } });

Get or set the scrollModel option, after initialization:

//getter
var scrollModel=$( ".selector" ).pqGrid( "option", "scrollModel" );

//setter
//forcefully hide the horizontal scrollbar.
$( ".selector" ).pqGrid( "option", "scrollModel", {horizontal: false } );

//adjust widths of the columns so as to  
//display all columns within the grid until all the columns have reached minWidth.
$( ".selector" ).pqGrid( "option", "scrollModel", { autoFit: true } );

selectionModelType: Object
Default: { type: 'row' , mode: 'range', all: null, cbAll: null, cbHeader: null, native: undefined, fireSelectChange: false }

It provides the selection behaviour of the grid w.r.t type ( 'row', 'cell' or null ) and mode ( 'single', 'range' or 'block' ).
all option affects the selection of rows / cells upon Ctrl - A. It selects all pages when it's true otherwise it selects only the current page.
cbAll option affects selection of rows with checkbox selection. When true, click on header checkbox selects / unselects rows on all pages otherwise it affects rows on current page only.
cbHeader option affects display of header checkbox in checkbox column
.
cbAll and cbHeader options are replaced by column.cb as of v2.3.0 to support multiple checkbox columns.
native = true enables native browser selection for the grid. This option affects the whole grid; if native selection is required for only a particular region of the grid, then 'pq-native-select' class needs to be assigned to that region.
fireSelectChange fires selectChange event when set to true.

Code examples:

Initialize the pqGrid with selectionModel option specified.

$( ".selector" ).pqGrid( {selectionModel: { type: 'cell', mode: 'block'} } );

Get or set the selectionModel option, after initialization:

//getter
var selectionModel=$( ".selector" ).pqGrid( "option", "selectionModel" );            

//setter
$( ".selector" ).pqGrid( "option", "selectionModel", {type: 'row', mode: 'single'} );

showBottomType: Boolean
Default: true

Governs display of bottom section of the grid. Paging toolbar is displayed in the bottom section.

Code examples:

Initialize the pqGrid with showBottom option specified.

$( ".selector" ).pqGrid( { showBottom : true } );

Get or set the showBottom option, after initialization:

//getter
var showBottom = $( ".selector" ).pqGrid( "option", "showBottom" );

//setter
$( ".selector" ).pqGrid( "option", "showBottom", false );

showHeaderType: Boolean
Default: true

It determines display of the header of the columns.

Code examples:

Initialize the pqGrid with showHeader option specified.

$( ".selector" ).pqGrid( {showHeader: false} );

Get or set the showHeader option, after initialization:

//getter
var showHeader = $( ".selector" ).pqGrid( "option", "showHeader" );            

//setter
$( ".selector" ).pqGrid( "option", "showHeader", false );

showTitleType: Boolean
Default: true

Governs display of title in the top section(above the column headers) of the grid.

Code examples:

Initialize the pqGrid with showTitle option specified.

$( ".selector" ).pqGrid( { showTitle : true } );

Get or set the showTitle option, after initialization:

//getter
var showTitle = $( ".selector" ).pqGrid( "option", "showTitle" );            

//setter
$( ".selector" ).pqGrid( "option", "showTitle", false );

showTopType: Boolean
Default: true

Governs display of top section (above the column headers) of the grid.

Code examples:

Initialize the pqGrid with showTop option specified.

$( ".selector" ).pqGrid( { showTop : true } );

Get or set the showTop option, after initialization:

//getter
var showTop=$( ".selector" ).pqGrid( "option", "showTop" );            

//setter
$( ".selector" ).pqGrid( "option", "showTop", false );

showToolbarType: Boolean
Default: true

Governs display of toolbar within the top region(above the column headers) of the grid.

Code examples:

Initialize the pqGrid with showToolbar option specified.

$( ".selector" ).pqGrid( { showToolbar : true } );

Get or set the showToolbar option, after initialization:

//getter
var showToolbar=$( ".selector" ).pqGrid( "option", "showToolbar" );            

//setter
$( ".selector" ).pqGrid( "option", "showToolbar", false );

stringifyType: Boolean
Default: undefined

Serialize the remote sort and filter requests using JSON.stringify. It works fine for ASP.NET (MVC) but some environments (e.g. PHP) can't handle stringified requests, it can be turned off for them by setting it to false.

Code examples:

Initialize the pqGrid with stringify option specified.

$( ".selector" ).pqGrid( { stringify : true } );

Get or set the stringify option, after initialization:

//getter
var stringify=$( ".selector" ).pqGrid( "option", "stringify" );            
//setter
$( ".selector" ).pqGrid( "option", "stringify", false );

sortableType: Boolean
Default: true

Set it to false to disable sorting for all columns.

Code examples:

Initialize the pqGrid with sortable option specified.

$( ".selector" ).pqGrid( {sortable:false} );

Get or set the sortable option, after initialization:

//getter
var sortable=$( ".selector" ).pqGrid( "option", "sortable" );            

//setter
$( ".selector" ).pqGrid( "option", "sortable", false );

stripeRowsType: Boolean
Default: true

Determines highlighting of odd or alternate rows in the grid. Currently this option is supported only for custom themes e.g. 'Office' theme. Highlighting of odd rows can be achieved in other themes using css rules.

Code examples:

Initialize the pqGrid with stripeRows option specified.

$( ".selector" ).pqGrid( { stripeRows : false } );

Get or set the stripeRows option, after initialization:

//getter
var stripeRows=$( ".selector" ).pqGrid( "option", "stripeRows" );            

//setter
$( ".selector" ).pqGrid( "option", "stripeRows", true );

swipeModelType: Object
Default: { on: true, speed: 20, ratio: 0.15, repeat: 20 }

Determines swipe of the viewport using mouse or touch. When on is true, viewport can be swiped using both mouse and touch. When on is 'touch', viewport can be swiped using touch only. When on is false, viewport can't be swiped.
If swipe is not desirable over a particular region in the viewport, then 'pq-no-capture' class can be assigned to that region to prevent swipe.
The following sub-options affect scrolling speed and duration once swipe has been initiated by mouse or touch gesture.
speed determines the speed of viewport movement.
ratio fixes the threshold while calculating swipe action. It's ratio of distance through which pointer has moved to the time taken to move the pointer.
repeat determines the number of times to move the viewport, hence useful to extend or limit the duration of swipe.

Code examples:

Initialize the pqGrid with swipeModel option specified.

$( ".selector" ).pqGrid( { swipeModel : { on: 'touch' } } );

Get or set the swipeModel option, after initialization:

//getter
var swipeModel = $( ".selector" ).pqGrid( "option", "swipeModel" );            

//setter
$( ".selector" ).pqGrid( "option", "swipeModel", { on : false } );

titleType: String
Default: null

Title of the pqGrid.

Code examples:

Initialize the pqGrid with title option specified.

$( ".selector" ).pqGrid( {title:'Shipping Details'} );

Get or set the title option, after initialization:

//getter
var title=$( ".selector" ).pqGrid( "option", "title" );            

//setter
$( ".selector" ).pqGrid( "option", "title", "Order Details" );

trackType: Boolean
Default: false

Turns on tracking for inline add, update and delete operations. commit and rollback methods can be used after turning on tracking. This option is deprecated as of v2.2.0 and is replaced by trackModel.

Code examples:

Initialize the pqGrid with track option specified.

$( ".selector" ).pqGrid( { track : true} );

Get or set the track option, after initialization:

//getter
var track=$( ".selector" ).pqGrid( "option", "track" );            

//setter
$( ".selector" ).pqGrid( "option", "track", true );

trackModelType: Object
Default: { on: false, dirtyClass: 'pq-cell-dirty' }

Sets tracking properties for inline add, update and delete operations. dataModel.recIndx is also required for tracking to work. commit and rollback methods can be used only after turning on tracking.

Code examples:

Initialize the pqGrid with trackModel option specified.

$( ".selector" ).pqGrid({ trackModel : { on: true } });

Get or set the trackModel option, after initialization:

//getter
var trackModel = $( ".selector" ).pqGrid( "option", "trackModel" );            

//setter
$( ".selector" ).pqGrid( "option", "trackModel", { on : false } );

toolbarType: Object
Default: null

Toolbar for the pqGrid. It contains the properties: "cls": class of the toolbar. "style": css style of the toolbar. "items": array of the controls / items in the toolbar as array. Every control / item has these properties. "type": which can be 'textbox', 'button', 'select', 'checkbox', html string or a callback function returning html string. "cls": class to be assigned to the control. "style": css style to be assigned to the control. "attr": attribute to be assigned to the control. "label": text of the button. "icon": class of the button icon which can be any of the jqueryui icons or a custom icon 16 x 16. "listeners": an array of event listeners for the control. "listener" property which is an object is added as of v2.2.0 to add single event listener for the control.

Code examples:

Initialize the pqGrid with toolbar option specified.

var toolbar = {
    cls: 'pq-toolbar-crud',
    items: [
        { type: 'button', label: 'Add', icon: 'ui-icon-plus', listeners: [{ click: addhandler}] },
        { type: 'button', label: 'Edit', icon: 'ui-icon-pencil', listeners: [{ click: edithandler}] },
        { type: 'button', label: 'Delete', icon: 'ui-icon-minus', listeners: [{ click: deletehandler}] }
    ]
};            
$( ".selector" ).pqGrid( { toolbar: toolbar } );

Get or set the toolbar option, after initialization:

//getter
var title=$( ".selector" ).pqGrid( "option", "toolbar" );            

validationType: Object
Default: { icon: 'ui-icon-alert', cls: 'ui-state-error', style: 'padding:3px 10px;' }

It provides the tooltip properties used in cell validations. icon, cls and style are added to the tooltip. Note that validation sub options can be overridden in the individual column validations ( column.validations[ ] ).

Code examples:

Initialize the pqGrid with validation option specified.

//no display of icon in the validation tooltip.
$( ".selector" ).pqGrid( {validation: { icon: '' } } );

Get or set the validation option, after initialization:

//getter
var validation = $( ".selector" ).pqGrid( "option", "validation" );            

//setter
var validation = { 
    icon: 'ui-icon-info',
    cls: 'ui-state-default'        
};            
$( ".selector" ).pqGrid( "option", "validation", validation );

virtualXType: Boolean
Default: false

Virtual rendering for the columns or x axis. It's useful to set this option as true while displaying lot number of columns. Swipe along x axis is not supported when this option is true.

Code examples:

Initialize the pqGrid with virtualX option specified.

$( ".selector" ).pqGrid( {virtualX: false} );

Get or set the virtualX option, after initialization:

//getter
var virtualX=$( ".selector" ).pqGrid( "option", "virtualX" );            

//setter
$( ".selector" ).pqGrid( "option", "virtualX", true );

virtualXHeaderType: Boolean
Default: undefined

Virtual rendering for the column headers on x axis. It's useful to set this option as false ( to display rowspan and colspan correctly) along with virtualX as true while displaying lot number of columns along with grouping of columns.

Code examples:

Initialize the pqGrid with virtualXHeader option specified.

$( ".selector" ).pqGrid( {virtualXHeader: false} );

Get or set the virtualXHeader option, after initialization:

//getter
var virtualXHeader = $( ".selector" ).pqGrid( "option", "virtualXHeader" );            
    

virtualYType: Boolean
Default: false

Virtual rendering for the rows or y axis. It's useful to set this option as true while displaying lot number of rows. Swipe along y axis is not supported when this option is true.

Code examples:

Initialize the pqGrid with virtualY option specified.

$( ".selector" ).pqGrid( {virtualY: false} );

Get or set the virtualY option, after initialization:

//getter
var virtualY=$( ".selector" ).pqGrid( "option", "virtualY" );            

//setter
$( ".selector" ).pqGrid( "option", "virtualY", true );

warningType: Object
Default: { icon: 'ui-icon-info', cls: '', style: 'padding:3px 10px;' }

It provides the tooltip properties used in cell warnings. icon, cls and style are added to the tooltip. Note that warning sub options can be overridden in the individual column warnings ( column.validations[ ] ).

Code examples:

Initialize the pqGrid with warning option specified.

//no display of icon in the warning tooltip.
$( ".selector" ).pqGrid( { warning: { icon: '' } } );

Get or set the warning option, after initialization:

//getter
var warning = $( ".selector" ).pqGrid( "option", "warning" );            

//setter
var warning = { 
    icon: 'ui-icon-info',
    cls: 'ui-state-default'        
};            
$( ".selector" ).pqGrid( "option", "warning", warning );

widthType: String or Integer
Default: 'auto'

Width of the grid in number of pixels (without 'px' suffix) i.e., 150, percent (%) i.e. '80%', combination of % and px i.e. '100%-20' or '50%+10', auto or flex. When % format is used, width is calculated as width in percent of the containing block. The grid width becomes sum total of all the columns when width is flex. Note that refresh method should be called when width is changed dynamically through setter.

Code examples:

Initialize the pqGrid with width option specified.

$( ".selector" ).pqGrid( { width: 500} );

Get or set the width option, after initialization:

//getter
var width=$( ".selector" ).pqGrid( "option", "width" );            

//setter
$( ".selector" ).pqGrid( "option", "width", 500 );

wrapType: Boolean
Default: true

It determines the behaviour of cell content which doesn't fit in a single line within the width of the cell. The text in the cells wraps to next line if wrap = true otherwise the overflowing text becomes hidden and continuation symbol ... is displayed at the end.

Code examples:

Initialize the pqGrid with wrap option specified.

$( ".selector" ).pqGrid( {wrap:true} );

Get or set the wrap option, after initialization:

//getter
var wrap=$( ".selector" ).pqGrid( "option", "wrap" );            

//setter
$( ".selector" ).pqGrid( "option", "wrap", true );
Methods
addClass( { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx, cls: cls } )

Adds a class or multiple classes (separated by empty space) to a row or cell. Either rowData or rowIndx can be passed.

  • rowData
    Type: Object or Array
    Reference to 1-dimensional array or object representing row data.
  • rowIndx
    Type: Integer
    Zero based index of the row.
  • dataIndx
    Type: Integer or String
    Zero based index in array or key name in JSON.
  • cls
    Type: String
    Name of a single class or more classes separated by space.

Code examples:

Invoke the method:

//Add classes 'pq-delete' & 'pq-edit' to 3rd row.
$( ".selector" ).pqGrid( "addClass", {rowIndx: 2, cls: 'pq-delete pq-edit'} );
            
//Add a class 'pq-delete' to 'profits' field in 3rd row
$( ".selector" ).pqGrid( "addClass", {rowIndx: 2, dataIndx: 'profits', cls: 'pq-delete'} );


addRow( { rowData: rowData, rowIndx: rowIndx, track: track, source: source, history: history, checkEditable: checkEditable } )Returns: Integer

Appends a row to the local view and returns rowIndx of the added row. It inserts a row at rowIndx if rowIndx is provided. The tracking of this operation for commit and rollback is determined by global track option unless overridden by track parameter passed to this method. If source parameter is passed, its value is available in the change event instead of default add value when new row is added by this method. If history parameter is passed, this operation is added or not added to the history depending upon value of the parameter. checkEditable parameter affects the checks for editability of cells.

  • rowData
    Type: Object or Array
    Reference to 1-dimensional array or object representing row data.
  • rowIndx
    Type: Integer
    Zero based index of the row.
  • track
    Type: Boolean
    Optional parameter. Sets or overrides the tracking for this operation.
  • source
    Type: String
    Optional parameter with default value of 'add'.
  • history
    Type: Boolean
    Optional parameter with default value of historyModel.on.
  • checkEditable
    Type: Boolean
    Optional parameter with default value of true.

Code examples:

Invoke the method:

//Append a new row.
$( ".selector" ).pqGrid( "addRow", 
    {rowData: {id: 20, product: 'Colgate' } }
);
            
//Append an empty row
$( ".selector" ).pqGrid( "addRow", 
    { rowData: {} } 
);


attr( { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx, attr: attr } )Returns: Object

Get the value of an attribute for a row or cell or set one or more attributes for a row or cell. Either rowData or rowIndx can be passed.

  • rowData
    Type: Object or Array
    Reference to 1-dimensional array or object representing row data.
  • rowIndx
    Type: Integer
    Zero based index of the row.
  • dataIndx
    Type: Integer or String
    Zero based index in array or key name in JSON.
  • attr
    Type: Object
    Key value pair of attrbute / attributes.

Code examples:

Invoke the method:

//Add a row title.
$( ".selector" ).pqGrid( "attr", {rowIndx: 2, attr: { title: 'Row title' } );
            
//get style attribute of 3rd row.
var style = $( ".selector" ).pqGrid( "attr", {rowIndx: 2, attr: 'style' } ).attr;            
                        
//Add a cell title
$( ".selector" ).pqGrid( "attr", 
        {rowIndx: 2, dataIndx: 'profits', attr: { title: 'cell title' } } 
);


collapse( )

Collapse the grid.

  • This method does not accept any arguments.

Code examples:

Invoke the method:

$( ".selector" ).pqGrid( "collapse" );
            


commit({ type: type, rows: rows })

Accepts or commits the add, edit and delete operations done after turning on tracking. type can limit the commit operation w.r.t add, update or delete. rows parameter can further limit the type of commit operation to the matching rows only. The format of rows is similar to dataModel.data i.e., an array of row objects and usually fetched from remote server. When type = add and rows argument is passed, commit updates the primary key i.e., recIndx of the matching records in grid from rows.

  • type
    Type: String
    optional parameter to limit or control the type of rollback.
  • rows
    Type: Array
    An array of rows to further limit the type of commit.

Code examples:

Invoke the method:

//commit all add, update and delete operations.            
$( ".selector" ).pqGrid( "commit" );
            
//commit add operations only and update the primary key of added records from rows.            
$( ".selector" ).pqGrid( "commit", { type: 'add', rows: rows } );

//commit update operations and further limit them to matching rows only.            
$( ".selector" ).pqGrid( "commit", { type: 'update', rows: rows } );
                        


copy()

It copies selected cells / rows within the grid or from one grid to another.

    Code examples:

    Invoke the method:

    //copy selections.
    $( ".selector" ).pqGrid( "copy" );            
    


    createTable( { $cont: $cont, data: data } )

    Generates a table having structure similar to and synchronized with the columns in the grid. It's useful for creating frozen rows especially at the bottom. Any subsequent call to createTable using same $cont parameter replaces the previous table with a new table, hence it can also be used to refresh table with new data.

    • $cont
      Type: jQuery
      container in which to append the new table.
    • data
      Type: Array
      Two dimensional array or array of key/value pair objects holding data for the new table. The key names should correspond to dataIndx in colModel.

    Code examples:

    Invoke the method:

    //create a frozen row having 4 columns in div container using 2 dimensional array.
    $( ".selector" ).pqGrid( "createTable", {$cont: $("
    "), data: "Total", "", 35, 120 //2 dimensional array } ); //create a frozen row having 4 columns in div container using JSON data. $( ".selector" ).pqGrid( "createTable", {$cont: $("
    "), data: [{ rank: "Total", company: "", revenues: 35, profits: 120 }] } );


    data( { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx, data: data } )Returns: Object

    Store or access arbitrary data ( i.e., array, object, string, etc ) associated with a specified row or cell. It acts as a private or meta data store of a cell or row and is different from normal pqgrid row ( i.e., rowData ) and cell data ( i.e., rowData[dataIndx]). This method returns the entire data of cell or row when data argument is not passed to it and returns partial data when key name of data is passed to it. Either rowData or rowIndx can be passed to this method. Meta data associated with this API can also be stored or manipulated as part of pqgrid JSON data ( i.e., dataModel.data ) as rowData['pq_rowdata'] or rowData['pq_celldata'][dataIndx] which can be used by client or remote server.

    • rowData
      Type: Object or Array
      Reference to 1-dimensional array or object representing row data.
    • rowIndx
      Type: Integer
      Zero based index of the row.
    • dataIndx
      Type: Integer or String
      Zero based index in array or key name in JSON.
    • data
      Type: Object
      Key value pairs of data where key is string and value is an array, object, string, etc.

    Code examples:

    Invoke the method:

    //Add meta data to a row.
    $( ".selector" ).pqGrid( "data", {rowIndx: 2, data: { key1: value1, key2: value2 } );
                
    //get whole meta data of 3rd row.
    var data = $( ".selector" ).pqGrid( "data", {rowIndx: 2} ).data;            
    
    //get partial meta data of 3rd row with key name 'key1'.
    var value1 = $( ".selector" ).pqGrid( "data", {rowIndx: 2, data: 'key1'} ).data;            
                                        
    //Add meta data to a cell
    $( ".selector" ).pqGrid( "data", {rowIndx: 2, dataIndx: 'profits', 
                data: { 'a': {'b': true} } 
            });


    deleteRow( { rowIndx: rowIndx, track: track, source: source, history: history } )

    Deletes a row from the local view. The tracking of this operation for commit and rollback is determined by global track option unless overridden by track parameter passed to this method. If source parameter is passed, its value is available in the change event instead of default 'delete' value when a row is deleted by this method. If history parameter is passed, this operation is added or not added to the history depending upon value of the parameter.

    • rowIndx
      Type: Integer
      Zero based index of the row.
    • track
      Type: Boolean
      Optional parameter. Sets or overrides the tracking for this operation.
    • source
      Type: String
      Optional parameter with default value of 'delete'.
    • history
      Type: Boolean
      Optional parameter with default value of historyModel.on.

    Code examples:

    Invoke the method:

    //Delete the row at 5th position from top.
    $( ".selector" ).pqGrid( "deleteRow", { rowIndx: 4 } );


    destroy()

    Removes the pqGrid functionality completely. This will return the element back to its pre-init state.

      Code examples:

      Invoke the method:

      $( ".selector" ).pqGrid( "destroy" );


      disable()

      Disables the pqGrid.

        Code examples:

        Invoke the method:

        $( ".selector" ).pqGrid( "disable" );


        enable()

        Enables the pqGrid.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "enable" );


          editCell( { rowIndx: rowIndx, rowIndxPage: rowIndxPage, dataIndx: dataIndx, colIndx: colIndx } )

          Puts a cell in edit mode if the cell lies within the viewport. Either rowIndx or rowIndxPage and either dataIndx or colIndx can be passed. It is a low level method which doesn't check whether the cell is marked uneditable. Use isEditableCell method to check that.

          • rowIndx
            Type: Integer
            Zero based index of the row.
          • rowIndxPage
            Type: Integer
            Zero based index of the row on current page.
          • dataIndx
            Type: Integer or String
            Zero based index in array or key name in JSON.
          • colIndx
            Type: Integer
            Zero based index of the column.

          Code examples:

          Invoke the method:

          //edit cell in 3rd row and 4th column.
          $( ".selector" ).pqGrid( "editCell", { rowIndx: 2, dataIndx: "profits" } );


          editFirstCellInRow( { rowIndx: rowIndx } )

          Puts the first editable cell in the row in edit mode.

          • rowIndx
            Type: Integer
            Zero based index of the row.

          Code examples:

          Invoke the method:

          //edit first editable cell in 3rd row.
          $( ".selector" ).pqGrid( "editFirstCellInRow", { rowIndx: 2 } );


          expand( )

          Expand the grid.

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "expand" );
                      


          exportExcel( { url: url, sheetName: sheetName } )

          It exports the data in the grid into Excel format file with xml extension. The grid prompts the user to download the exported file.

          • url
            Type: String
            Url where grid posts the data to be returned back as xml file.
          • sheetName
            Type: String
            Name of the Worksheet.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "exportExcel", { url: "/export/excel", sheetName: "pqGrid" } );


          exportCsv( { url: url } )

          It exports the grid data into CSV format file with csv extension. The grid prompts the user to download the exported file.

          • url
            Type: String
            Url where grid posts the data to be returned back as csv file.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "exportCsv", { url: "/export/csv" } );


          filter( { oper: oper, data:[ { dataIndx:dataIndx, condition:condition, value:value, value2:value2 } ] } )

          Convenient method to filter the data. Data is filtered locally or remotely depending upon the dataModel > location value. data contains array of multiple filter conditions. Only one condition can be applied to one dataIndx. Filter is applied on multiple filter conditions using filterModel > mode which can be either "AND" or "OR"

          • oper
            Type: String
            'replace' or 'add'. 'replace' replaces the previous filter conditions (if any) with new filter conditions. 'add' appends new filter conditions to previous filter conditions (if any). 'add' replaces previous filter condition if there is new filter condition for the same dataIndx.
          • dataIndx
            Type: Integer or String
            Zero based index in array or key name in JSON.
          • data > condition
            Type: String
            "begin", "contain", "notcontain", "equal", "notequal", "empty", "notempty", "end", "less", "great" More conditions are added in v2.0.4: "between", "range", "regexp", "notbegin", "notend", "lte", "gte"
          • data > value
            Type: Object
            Value of field against which the data is to be filtered. 'empty' and 'notempty' conditions don't require value. It's an array of values when condition is 'range' and regular expression when condition is 'regexp'
          • data > value2
            Type: Object
            Second value of field applicable to between condition only.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "filter", { 
              oper: 'replace', 
              data: [ 
                  { dataIndx: 'country', condition: 'begin', value: 'Fr' }, 
                  { dataIndx: 'city', condition: 'notempty' }
              ] 
          });


          getCell( { rowIndx: rowIndx, rowIndxPage: rowIndxPage, dataIndx: dataIndx, colIndx: colIndx } )Returns: jQuery

          Used to get a cell when indices are known. Either rowIndx or rowIndxPage and either colIndx or dataIndx can be passed. It returns a td element wrapped in jQuery object if td is displayed in the viewport.

          • rowIndx
            Type: Integer
            Zero based index of the row.
          • rowIndxPage
            Type: Integer
            Zero based index of the row on current page.
          • dataIndx
            Type: Integer or String
            Zero based index in array or key name in JSON.
          • colIndx
            Type: Integer
            Zero based index of the column.

          Code examples:

          Invoke the method:

          //get cell in 3rd row and 4th column.
          var $td = $( ".selector" ).pqGrid( "getCell", { rowIndx: 2, dataIndx: "contactName" } );


          getCellsByClass( { cls: cls } )Returns: Array

          Used to get cells having a given class name. Returns an array of objects { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx }.

          • cls
            Type: String
            Name of a single class.

          Code examples:

          Invoke the method:

          var arr = $( ".selector" ).pqGrid( "getCellsByClass", { cls : 'pq-delete' } );
                      
          //get first cell having the above class.            
          var rowIndx = arr[0].rowIndx;
          var dataIndx = arr[0].dataIndx;           
          


          getCellIndices( { $td: $td } )Returns: Object

          Used to get cell indices of a given cell. Returns an object containing rowIndx and dataIndx.

          • $td
            Type: jQuery
            td element wrapped in jQuery object.

          Code examples:

          Invoke the method:

          var obj = $( ".selector" ).pqGrid( "getCellIndices", { $td : $td } );
          var dataIndx=obj.dataIndx, rowIndx=obj.rowIndx;


          getChanges( { format: format } )Returns: Object

          Used to get uncommitted changes w.r.t added rows, updated rows and deleted rows when tracking is on. The rows are returned by reference (rowData) when format is null or is not passed to the method. The rows are cloned and returned when format is 'byVal'. Internal representation of tracking data is returned when format is 'raw'. 'raw' format provides detailed information about the changed data.

          • format
            Type: String
            'byVal', 'raw' or null.

          Code examples:

          Invoke the method:

          var changes = $( ".selector" ).pqGrid( "getChanges" );
          //Format of JSON object returned by this method is as below:            
          {
              updateList: [rowData1, rowData2..]    
              addList: [rowData1, rowData2..]    
              deleteList: [rowData1, rowData2..]
          }
          var changes = $( ".selector" ).pqGrid( "getChanges", {format: 'byVal'} );
          //Format of JSON object returned by this method is as below:            
          {
              updateList: [row1, row2..]    
              addList: [row1, row2..]    
              deleteList: [row1, row2..]
          }
          


          getColIndx( {dataIndx: dataIndx } )Returns: Integer

          Used to get colIndx when dataIndx is known.

          • dataIndx
            Type: Integer or String
            Zero based index in array or key name in JSON.

          Code examples:

          Invoke the method:

          var colIndx = $( ".selector" ).pqGrid( "getColIndx", { dataIndx: "profits" } );


          getColumn( { dataIndx: dataIndx } )Returns: Object

          Used to get column whose dataIndx is known.

          • dataIndx
            Type: Integer or String
            Zero based index in array or key name in JSON.

          Code examples:

          Invoke the method:

          var column = $( ".selector" ).pqGrid( "getColumn",{ dataIndx: "profits" } );


          getColModel( )Returns: Array

          Used to get colModel of grid. It's different from options > colModel in the case of header grouping as it provides information about the lower most column cells in the header.

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

          var colModel = $( ".selector" ).pqGrid( "getColModel" );


          getData( { dataIndx: [ dataIndx1, dataIndx2, ... ] } )Returns: Array

          Used to get sub set of data from the local data cache dataModel.data of the grid. Returns an array of unique row objects.

          • dataIndx
            Type: Array
            Array of dataIndx to be included in the returned data.

          Code examples:

          Invoke the method:

          var data = $( ".selector" ).pqGrid( "getData", { dataIndx: ['ProductName', 'UnitPrice'] } );
                      
          //returns
          [ { 'ProductName': 'ABC', UnitPrice: 30 }, { 'ProductName': 'DEF', UnitPrice: 15 },... ]
          


          getEditCell()Returns: PlainObject

          Gets an object containing currently edited cell and editor corresponding to edited cell. Returns null if no cell is being edited.

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

          var obj = $( ".selector" ).pqGrid( "getEditCell" );
          //get table cell
          var $td=obj.$td;
          //get editor
          var $cell=obj.$cell;


          getEditCellData()Returns: String

          Gets the data (saved or unsaved) associated with currently edited cell. Returns null if no cell is being edited.

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

          var dataCell = $( ".selector" ).pqGrid( "getEditCellData" );


          getInstance()Returns: Object

          Gets the instance of grid for convenient invocation of grid methods. Returns an object { 'grid': grid }.

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

          var grid = $( ".selector" ).pqGrid( "getInstance" ).grid; 
                      
          //any method can be called on grid in an easier to use and read syntax.            
          var $tr = grid.getRow( { rowIndx: 2 });            
          


          getRow( { rowIndxPage: rowIndxPage } )Returns: jQuery

          Used to get a row when rowIndxPage is known. It returns a tr element wrapped in jQuery object. Note that it returns a $tr only when the row is rendered in the view, otherwise it returns null.

          • rowIndxPage
            Type: Integer
            Zero based index of the row on current page.

          Code examples:

          Invoke the method:

          //get 3rd row on current page.
          var $tr = $( ".selector" ).pqGrid( "getRow", {rowIndxPage: 2} );


          getRowData( { rowIndx: rowIndx, rowIndxPage: rowIndxPage, recId: recId, rowData: rowData } )Returns: Object or Returns: Array

          Returns reference to row / record in JSON or Array format when either of rowIndx, rowIndxPage, recId or rowData is known. It returns same rowData when rowData is passed as parameter.

          • rowIndx
            Type: Integer
            Zero based index of the row.
          • rowIndxPage
            Type: Integer
            Zero based index of the row on current page.
          • recId
            Type: Object
            Value of the record's primary key.
          • rowData
            Type: Object or Array
            Reference to 1-dimensional array or object representing row data.

          Code examples:

          Invoke the method:

          //get reference to 3rd row on current page.
          var rowData = $( ".selector" ).pqGrid( "getRowData", {rowIndxPage: 2} );


          getRowIndx( { $tr: $tr, rowData: rowData } )Returns: Object

          Used to get row index of a given row when either $tr or rowData is known. Returns an object containing rowIndx.

          • $tr
            Type: jQuery
            tr element wrapped in jQuery object.
          • rowData
            Type: Object or Array
            Reference to 1-dimensional array or object representing row data.

          Code examples:

          Invoke the method:

          var obj = $( ".selector" ).pqGrid( "getRowIndx", { $tr : $tr } );
          var rowIndx = obj.rowIndx;
          
          


          getRowsByClass( { cls: cls } )Returns: Array

          Used to get rows having a given class name. Returns an array of objects { rowData: rowData, rowIndx: rowIndx }.

          • cls
            Type: String
            Name of a single class.

          Code examples:

          Invoke the method:

          var arr = $( ".selector" ).pqGrid( "getRowsByClass", { cls : 'pq-delete' } );
                      
          //get first row having the above class.            
          var rowData = arr[0].rowData;
          var rowIndx = arr[0].rowIndx;           
          


          goToPage( { rowIndx: rowIndx, page: page } )

          Navigate to page mentioned in page parameter or page number calculated from rowIndx. Either of the parameters can be passed.

          • rowIndx
            Type: Integer
            Zero based index of the row.
          • page
            Type: Integer
            page number starting from 1.

          Code examples:

          Invoke the method:

          //navigate to 3rd page.
          $( ".selector" ).pqGrid( "goToPage", { page: 3} );


          hasClass( { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx, cls: cls } )Returns: Boolean

          Checks whether a row or cell has a class. Either rowData or rowIndx can be passed.

          • rowData
            Type: Object or Array
            Reference to 1-dimensional array or object representing row data.
          • rowIndx
            Type: Integer
            Zero based index of the row.
          • dataIndx
            Type: Integer or String
            Zero based index in array or key name in JSON.
          • cls
            Type: String
            Name of a single class.

          Code examples:

          Invoke the method:

          //Check whether 3rd row has class 'pq-delete'.
          var hasClass = $( ".selector" ).pqGrid( "hasClass", 
              {rowIndx: 2, cls: 'pq-delete'} 
          );
                      
          //Check whether 3rd row & 'profits' field has class 'pq-delete'.
          var hasClass = $( ".selector" ).pqGrid( "hasClass", 
              {rowIndx: 2, dataIndx: 'profits', cls: 'pq-delete'} 
          );


          hideLoading()

          Hides the loading icon in center of the pqGrid after asynchronous operation is complete.

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

           $( ".selector" ).pqGrid( "hideLoading" );


          history( { method: method } )

          A generic method to manipulate history.

          method can be undo, redo, canUndo, canRedo, reset. undo is used to to reverse add, update or delete operations while redo is used to to repeat add, update or delete operations which have been previously reversed. undo and redo can be invoked multiple times until all the operations have been undone or redone. Multiple rows/cells added or updated during paste of rows/cells are considered as a single operation.
          canUndo returns boolean true/false depending upon whether further undo action can be performed. canRedo returns boolean true/false depending upon whether further redo action can be performed. reset clears all history without making any change in current data in grid.

          • method
            Type: String
            Name of the method which can be 'undo', 'redo', 'canUndo', 'canRedo'.

          Code examples:

          Invoke the method:

          //undo             
          $( ".selector" ).pqGrid( "history", { method: 'undo' } );
                                   
          var canUndo = $( ".selector" ).pqGrid( "history", { method: 'canUndo' } );        
          


          isDirty({ rowIndx: rowIndx, rowData: rowData })Returns: Boolean

          Checks whether there is any change in grid data since last commit or since tracking is turned on. Checks individual record when either rowIndx or rowData is passed to this method.

          • rowData
            Type: Object or Array
            Reference to 1-dimensional array or object representing row data.
          • rowIndx
            Type: Integer
            Zero based index of the row.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "isDirty" );


          isEditableCell( { rowIndx: rowIndx, dataIndx: dataIndx } )Returns: Boolean

          Checks whether a cell can be edited depending upon the options editable and column > editable.

          • rowIndx
            Type: Integer
            Zero based index of the row.
          • dataIndx
            Type: Integer or String
            Zero based index in array or key name in JSON.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "isEditableCell", { rowIndx: 3, dataIndx: "profits" } );


          isEditableRow( { rowIndx: rowIndx } )Returns: Boolean

          Checks whether a row can be edited depending upon the option editable.

          • rowIndx
            Type: Integer
            Zero based index of the row.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "isEditableRow", { rowIndx: 3 } );


          isValid( { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx, value: value, data: data, allowInvalid: allowInvalid } )Returns: Object

          Checks whether a cell, row or data (collection of rows) is valid against column.validations[] and returns an object { valid: true } when all cells are valid.
          It validates single cell when rowData / rowIndx and dataIndx is passed. It considers either rowData[dataIndx] for validation or value if value parameter if passed as one of the arguments.
          It validates a whole row when rowIndx / rowData is passed while dataIndx is not passed.
          It validates collection of rows when data parameter is passed where data is in format of array of row objects similar to dataModel.data.
          When allowInvalid parameter is true, this method adds a class editModel.invalidClass to all invalid cells and returns a collection of all invalid cells.
          When allowInvalid parameter is false, this method displays a tooltip to display validation.msg, puts first invalid cell in edit mode and returns { valid: false, dataIndx: dataIndx } of that first invalid cell.

          • rowIndx
            Type: Integer
            Zero based index of the row.
          • rowData
            Type: Object or Array
            Reference to 1-dimensional array or object representing row data.
          • dataIndx
            Type: Integer or String
            Zero based index in array or key name in JSON.
          • data
            Type: Array
            2-dimensional array (array of arrays) or JSON (array of key/value paired plain objects)
          • value
            Type:
            Cell value of variant type.
          • allowInvalid
            Type: Boolean
            Allows invalid value and adds an invalid class to the cell/cells.

          Code examples:

          Invoke the method:

          //validate a single cell against a value which is usually taken from editor.
          $( ".selector" ).pqGrid( "isValid", { rowIndx: 3, dataIndx: "profits", value: 12.45 } );
                      
          //validate 4th row.
          $( ".selector" ).pqGrid( "isValid", { rowIndx: 3 } );
          //validate a row whose reference (rowData) is known.
          $( ".selector" ).pqGrid( "isValid", { rowData: rowData } );
          


          paste()

          It pastes the copied cells / rows within the grid or from one grid to another.

            Code examples:

            Invoke the method:

            //paste data.
            $( ".selector" ).pqGrid( "paste" );            
            


            quitEditMode()

            Ignores the unsaved changes in currently edited cell and brings cell out of edit mode. It fires quitEditMode event. It can be useful to invoke in custom editors.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            //quit editing of cell
            $( ".selector" ).pqGrid( "quitEditMode" );


            option()Returns: PlainObject

            Gets an object containing key/value pairs representing the current pqGrid options hash.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            var options = $( ".selector" ).pqGrid( "option" );


            option( optionName )Returns: Object

            Gets the value currently associated with the specified optionName.

            • optionName
              Type: String
              The name of the option to get.

            Code examples:

            Invoke the method:

            var disabled = $( ".selector" ).pqGrid( "option", "disabled" );


            option( optionName, value )

            Sets the value of the pqGrid option associated with the specified optionName.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "option", "disabled", true );


            option( options )

            Sets one or more options for the Grid.

            • optionName
              Type: Object
              A map of option-value pairs to set.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "option", {disabled: true} );


            refresh()

            It's used to refresh the view of grid after update of records, addition of classes, attributes through JSON or other properties that affect the rows in current page or layout of grid e.g., height, width, etc. Being a computational intensive operation, if a number of such options / properties of the grid are being updated, this method should be called only once at the end.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "refresh" );


            refreshCell( { rowIndx:rowIndx: rowIndxPage: rowIndxPage, colIndx: colIndx, dataIndx: dataIndx } )

            Refreshes a cell in pqGrid. Either of rowIndx or rowIndxPage and either of dataIndx or colIndx can be provided.

            • rowIndx
              Type: Integer
              Zero based index of the row.
            • rowIndxPage
              Type: Integer
              Zero based index of the row on current page.
            • colIndx
              Type: Integer
              Zero based index of the column.
            • dataIndx
              Type: Integer or String
              Zero based index in array or key name in JSON.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "refreshCell", { rowIndx: 21, dataIndx: 'company' } );


            refreshColumn( { colIndx: colIndx, dataIndx: dataIndx } )

            Refreshes a whole column in pqGrid. Either of dataIndx or colIndx can be provided.

            • colIndx
              Type: Integer
              Zero based index of the column.
            • dataIndx
              Type: Integer or String
              Zero based index in array or key name in JSON.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "refreshColumn", {colIndx:2} );


            refreshDataAndView()

            Refresh the data and view in pqGrid. It's a superset of refreshView method. It's useful to refresh View after change in dataModel properties or addition, deletion or update of records. It also reloads the data when location is 'remote'. This method being a memory intensive operation should be used judiciously and should be avoided within a loop.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "refreshDataAndView" );


            refreshHeader()

            Refreshes the column headers.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "refreshHeader" );


            refreshRow( { rowIndx:rowIndx: rowIndxPage: rowIndxPage } )

            Refreshes the whole row in pqGrid. Either of rowIndx or rowIndxPage can be provided.

            • rowIndx
              Type: Integer
              Zero based index of the row.
            • rowIndxPage
              Type: Integer
              Zero based index of the row on current page.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "refreshRow", {rowIndx:21} );


            refreshView()

            Refreshes the view of pqGrid. It's a superset of refresh method and is useful to refresh the view of grid after change in dataModel properties e.g., sortIndx, sortDir, pageModel options, addition or deletion of records.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "refresh" );


            removeAttr( { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx, attr: attr } )

            Removes an attribute from a row or cell previously added with attr method. Either rowData or rowIndx can be passed.

            • rowData
              Type: Object or Array
              Reference to 1-dimensional array or object representing row data.
            • rowIndx
              Type: Integer
              Zero based index of the row.
            • dataIndx
              Type: Integer or String
              Zero based index in array or key name in JSON.
            • attr
              Type: String
              Name of a single attribute or space-separated list of attributes.

            Code examples:

            Invoke the method:

            //Remove title and style attribute from 3rd row.
            $( ".selector" ).pqGrid( "removeAttr", 
                {rowIndx: 2, attr: 'title style'} 
            );
                        
            //remove title from 'profits' field in 3rd row.
            $( ".selector" ).pqGrid( "removeAttr", 
                {rowIndx: 2, dataIndx: 'profits', attr: 'title'} 
            );


            removeClass( { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx, cls: cls } )

            Removes a class or multiple classes (separated by empty space) from a row or cell. Either rowData or rowIndx can be passed.

            • rowData
              Type: Object or Array
              Reference to 1-dimensional array or object representing row data.
            • rowIndx
              Type: Integer
              Zero based index of the row.
            • dataIndx
              Type: Integer or String
              Zero based index in array or key name in JSON.
            • cls
              Type: String
              Name of a single class or more classes separated by space.

            Code examples:

            Invoke the method:

            //Remove classes 'pq-delete' & 'pq-edit' from 3rd row.
            $( ".selector" ).pqGrid( "removeClass", 
                {rowIndx: 2, cls: 'pq-delete pq-edit'} 
            );
                        
            //remove a class 'pq-delete' from 'profits' field in 3rd row.
            $( ".selector" ).pqGrid( "removeClass", 
                {rowIndx: 2, dataIndx: 'profits', cls: 'pq-delete'} 
            );


            removeData( { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx, data: data } )

            Removes a previously-stored piece of data from a row or cell. The data can be partially or completely removed from row or cell with this method. Either rowData or rowIndx can be passed.

            • rowData
              Type: Object or Array
              Reference to 1-dimensional array or object representing row data.
            • rowIndx
              Type: Integer
              Zero based index of the row.
            • dataIndx
              Type: Integer or String
              Zero based index in array or key name in JSON.
            • data
              Type: String or Array
              A string naming the piece of data to delete or an array or space-separated string naming the pieces of data to delete. All data is removed when this argument is not passed.

            Code examples:

            Invoke the method:

            //Remove data with key 'name' from 3rd row.
            $( ".selector" ).pqGrid( "removeData", 
                {rowIndx: 2, data: 'name'} 
            );
            //Remove all data from 3rd row.
            $( ".selector" ).pqGrid( "removeData", 
                {rowIndx: 2} 
            );            
            //remove data with key 'delete' & 'valid' from 'profits' field in 3rd row.
            $( ".selector" ).pqGrid( "removeData", 
                {rowIndx: 2, dataIndx: 'profits', data: 'delete valid'} 
            );


            rollback({ type: type })

            Undo or rollback all the add, edit and delete operations done after turning on tracking. type can limit the rollback operation w.r.t 'add', 'update' or 'delete'.

            • type
              Type: String
              optional parameter to limit or control the type of rollback.

            Code examples:

            Invoke the method:

            //rollback all add, update and delete operations.            
            $( ".selector" ).pqGrid( "rollback" );
                        
            //rollback delete operations only.            
            $( ".selector" ).pqGrid( "rollback", {type: 'delete'} );            
            


            rowCollapse( { rowIndx:rowIndx, rowIndxPage: rowIndxPage } )

            Collapses the detail view of the row. Either rowIndx or rowIndxPage can be provided.

            • rowIndx
              Type: Integer
              Zero based index of the row.
            • rowIndxPage
              Type: Integer
              Zero based index of the row on current page.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "rowCollapse", {rowIndx:21} );


            rowExpand( { rowIndx:rowIndx, rowIndxPage: rowIndxPage } )

            Expands the detail view of the row. Either rowIndx or rowIndxPage can be provided.

            • rowIndx
              Type: Integer
              Zero based index of the row.
            • rowIndxPage
              Type: Integer
              Zero based index of the row on current page.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "rowExpand", {rowIndx:21} );


            rowInvalidate( { rowIndx:rowIndx, rowIndxPage: rowIndxPage } )

            Removes the detail view of the row from view as well as cache. It can be useful when the detail view fails to load due to network error. Either rowIndx or rowIndxPage can be provided.

            • rowIndx
              Type: Integer
              Zero based index of the row.
            • rowIndxPage
              Type: Integer
              Zero based index of the row on current page.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "rowInvalidate", {rowIndx:21} );


            saveEditCell()Returns: Boolean

            Saves the currently edited cell. It's internally used by the grid whenever the cell is saved during inline editing. It participates in tracking for commit and rollback when tracking is on. It can be useful to invoke in custom editors. It fires two events i.e., cellBeforeSave and cellSave. It aborts the save operation and returns false if cellBeforeSave returns false. cellSave event is not fired when save operation is unsuccessful. It fires cellSave event and returns true when save operation is successful. It returns null if no cell is being edited.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            //saves the edited cell
            var success = $( ".selector" ).pqGrid( "saveEditCell" );


            scrollColumn( { colIndx: colIndx, dataIndx: dataIndx } )

            Scrolls the view horizontally (if required) to make the column visible in pqGrid. Either of colIndx or dataIndx can be provided.

            • colIndx
              Type: Integer
              Zero based index of the column.
            • dataIndx
              Type: Integer or String
              Zero based index in array or key name in JSON.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "scrollColumn", { dataIndx: "lastname" } );


            scrollRow( { rowIndxPage: rowIndxPage } )

            Scrolls the view vertically (if required) to make the row visible in pqGrid.

            • rowIndxPage
              Type: Integer
              Zero based index of the row on current page.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "scrollRow", { rowIndxPage: 30 } );


            selection( { type: type, method: method, rowIndx: rowIndx, colIndx: colIndx } )

            A generic method to manipulate selections.

            method can be add, replace, remove, removeAll, indexOf, isSelection, getSelection.
            add is used to append new selections to the selection set.
            replace removes all selections and adds a new one.
            remove removes a given selection.
            removeAll removes all selections.
            isSelected returns true/false depending upon selection state of a row or cell.
            indexOf returns the index of a given selection in the selection set. It returns -1 if the selection is not found.
            getSelection returns an array of selection objects containing rowIndx and/or dataIndx.

            • type
              Type: String
              'row' or 'cell'.
            • method
              Type: String
              Name of the method which can be 'add', 'replace', 'remove', 'removeAll', 'indexOf', 'getSelection'.
            • rowIndx
              Type: Integer
              Zero based index of the row.
            • rowIndxPage
              Type: Integer
              Zero based index of the row on current page.
            • colIndx
              Type: Integer
              Zero based index of the column.
            • dataIndx
              Type: Integer or String
              Zero based index in array or key name in JSON.

            Code examples:

            Invoke the method:

            //add 3rd row to selection
            $( ".selector" ).pqGrid( "selection", 
                { type: 'row', method: 'add', rowIndx: 2}
            );
            //removes cell in 10th row and 4th column from selection. 
            $( ".selector" ).pqGrid( "selection", 
                { type: 'cell', method: 'remove', rowIndx: 9, colIndx: 3}
            );
            //Remove all row selections and raise unSelect event for every unselected row. 
            $( ".selector" ).pqGrid( "selection", 
                { type: 'row', method: 'removeAll' }
            );
            //Find the index of selected cell in 12th row and 3rd column among the selections. 
            var indx = $( ".selector" ).pqGrid( "selection",
                { type: 'cell', method: 'indexOf', rowIndx: 11, colIndx: 2 }
            );
            //Find whether 3rd row is selected.
            var isSelected = $( ".selector" ).pqGrid( "selection",
                { type: 'row', method: 'isSelected', rowIndx: 2 }
            );
            //Get all cell selections 
            var selectionArray = $( ".selector" ).pqGrid( "selection",
                { type: 'cell', method: 'getSelection' }
            );


            setSelection( {rowIndx:rowIndx, rowIndxPage:rowIndxPage, colIndx:colIndx, focus: focus} )

            Selects a row or cell depending upon the parameters. It brings the cell or row into viewport and sets focus on it in addition to selecting it. It deselects everything if null is passed as parameter. It doesn't set the focus on row/cell when focus is false.

            • rowIndx
              Type: Integer
              Zero based index of the row.
            • rowIndxPage
              Type: Integer
              Zero based index of the row on current page.
            • colIndx
              Type: Integer
              Zero based index of the column.
            • focus
              Type: Integer
              Optional argument with default value of true.

            Code examples:

            Invoke the method:

            //select 3rd row
            $( ".selector" ).pqGrid( "setSelection", {rowIndx:2} );
            //select cell in 10th row and 4th column. 
            $( ".selector" ).pqGrid( "setSelection", {rowIndx: 9,colIndx: 3} );
            //deselect everything. 
            $( ".selector" ).pqGrid( "setSelection", null );


            showLoading()

            Displays the loading icon in center of the pqGrid. It is useful while asynchronous operations are in progress.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "showLoading" );


            toggle()

            Toggles the grid between maximized state and normal state. In maximized state the grid occupies whole browser width and height and fits snugly into it.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            $( ".selector" ).pqGrid( "toggle" );


            undo( )

            Used to reverse add, update or delete operations. It can be invoked multiple times until all the operations have been reversed. Multiple rows/cells added or updated during paste of rows/cells are considered as a single operation.

              Code examples:

              Invoke the method:

              $( ".selector" ).pqGrid( "undo" );


              updateRow( { rowIndx: rowIndx, row: { dataIndx1: value1, dataIndx2: value2, ... }, track: track, source: source, history: history, checkEditable: checkEditable } )

              Used to update one or more fields in a row. If source parameter is passed, its value is available in the change event instead of default 'update' value when a row is updated by this method. If history parameter is passed, this operation is added or not added to the history depending upon value of the parameter. checkEditable parameter affects the checks for editability of row and cells.

              • rowIndx
                Type: Integer
                Zero based index of the row.
              • row
                Type: Object
                Object holding the modifed data of the row.
              • track
                Type: Boolean
                Optional parameter. Sets or overrides the tracking for this operation.
              • source
                Type: String
                Optional parameter with default value of 'update'.
              • history
                Type: Boolean
                Optional parameter with default value of historyModel.on.
              • checkEditable
                Type: Boolean
                Optional parameter with default value of true.

              Code examples:

              Invoke the method:

              $( ".selector" ).pqGrid( "updateRow", 
                  { rowIndx: 2, row: { 'ProductName': 'Cheese', 'UnitPrice': 30 } );


              widget()Returns: jQuery

              Returns a jQuery object containing the pqGrid.

              • This method does not accept any arguments.

              Code examples:

              Invoke the method:

              var widget = $( ".selector" ).pqGrid( "widget" );

              Events
              beforeCheck( event, ui )Type: pqgridbeforecheck

              Triggered just before checkbox is checked in a checkbox column in pqGrid. It can be canceled by returning false.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • source
                  Type: String
                  Origin of checkbox event e.g., 'header'.

              Code examples:

              Initialize the pqGrid with the beforeCheck callback specified:

              $( ".selector" ).pqGrid({
                  beforeCheck: function( event, ui ) {}
              });

              Bind an event listener to the pqgridbeforecheck event:

              $( ".selector" ).on( "pqgridbeforecheck", function( event, ui ) {} );

              beforeRowExpand( event, ui )Type: pqgridbeforerowexpand

              Triggered just before pqGrid is about to expand the row in case of row detail implemented via detailModel. Row expansion can be canceled by returning false.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.

              Code examples:

              Initialize the pqGrid with the beforeRowExpand callback specified:

              $( ".selector" ).pqGrid({
                  beforeRowExpand: function( event, ui ) {}
              });

              Bind an event listener to the pqgridbeforerowexpand event:

              $( ".selector" ).on( "pqgridbeforerowexpand", function( event, ui ) {} );

              beforeSort( event, ui )Type: pqgridbeforesort

              Triggered just before pqGrid is about to sort the data initiated by a user action. Sorting can be canceled by returning false.

              Code examples:

              Initialize the pqGrid with the beforeSort callback specified:

              $( ".selector" ).pqGrid({
                  beforeSort: function( event, ui ) {}
              });

              Bind an event listener to the pqgridbeforesort event:

              $( ".selector" ).on( "pqgridbeforesort", function( event, ui ) {} );

              beforeTableView( event, ui )Type: pqgridbeforetableview

              Triggered just before pqGrid is about to display or render the data. Any last moment changes can be done in the data during this event. It can be used only to update the records and should not insert or delete records.

              • event
                Type: Event
              • ui
                Type: Object
                • pageData
                  Type: Array
                  2-dimensional array or JSON data for current page.
                • initV
                  Type: Integer
                  Index of first row displayed in the unfrozen viewport.
                • finalV
                  Type: Integer
                  Index of last row displayed in the unfrozen viewport.
                • initH
                  Type: Integer
                  Index of first column displayed in the unfrozen viewport.
                • finalH
                  Type: Integer
                  Index of last column displayed in the unfrozen viewport.

              Code examples:

              Initialize the pqGrid with the beforeTableView callback specified:

              $( ".selector" ).pqGrid({
                  beforeTableView: function( event, ui ) {}
              });

              Bind an event listener to the pqgridbeforetableview event:

              $( ".selector" ).on( "pqgridbeforetableview", function( event, ui ) {} );

              beforeunCheck( event, ui )Type: pqgridbeforeuncheck

              Triggered just before any checkbox is unchecked in a checkbox column in pqGrid. It can be canceled by returning false.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • source
                  Type: String
                  Origin of checkbox event e.g., 'header'.

              Code examples:

              Initialize the pqGrid with the beforeunCheck callback specified:

              $( ".selector" ).pqGrid({
                  beforeunCheck: function( event, ui ) {}
              });

              Bind an event listener to the pqgridbeforeuncheck event:

              $( ".selector" ).on( "pqgridbeforeuncheck", function( event, ui ) {} );

              beforeValidate( event, ui )Type: pqgridbeforevalidate

              Triggered before change in grid data takes place due to inline editing a cell, add/update/delete a row through method invocation or paste of rows/cells. Checks for editability of row/cell and validations take place after this event. All ui arguments are passed by reference so any modification to the arguments affects subsequent data processing by the grid. It fires only once when a number of cells are affected together (e.g., paste of multiple cells) rather than firing for each individual cell.

              • event
                Type: Event
              • ui
                Type: Object
                • rowList
                  Type: Array
                  Array of objects { rowData: rowData, newRow: newRow, oldRow: oldRow, type: type } where type may be 'add', 'update' or 'delete'.
                • source
                  Type: String
                  origin of the change e.g., 'edit', 'update', 'add' , 'delete', 'paste', 'undo', 'redo' or a custom source passed to addRow, updateRow, deleteRow methods.
                • allowInvalid
                  Type: Boolean
                  Allows invalid value and adds an invalid class to the cell/cells.
                • history
                  Type: Boolean
                  Whether add this operation in history.
                • checkEditable
                  Type: Boolean
                  Checks whether the row/cell is editable before making any change.

              Code examples:

              Initialize the pqGrid with the beforeValidate callback specified:

              $( ".selector" ).pqGrid({
                  beforeValidate: function( event, ui ) {}
              });

              Bind an event listener to the pqgridbeforevalidate event:

              $( ".selector" ).on( "pqgridbeforevalidate", function( event, ui ) {} );

              cellBeforeSave( event, ui )Type: pqgridcellbeforesave

              Triggered before a cell is saved in pqGrid during inline editing. Saving of data can be canceled by returning false, so this event can be used for validations when the data is not in desirable format. Validations take place automatically since v2.2.0 and it's no longer required to call isValid method from this event.

              • event
                Type: Event
              • ui
                Type: Object
                • dataModel
                  Type: Object
                  PQGrid's internal dataModel.
                • rowIndx
                  Type: Integer
                  Zero based index of the row corresponding to cell.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • column
                  Type: Object
                  Object containing properties of this column.
                • newVal
                  Type: Object
                  New value inside the editor.

              Code examples:

              Initialize the pqGrid with the cellBeforeSave callback specified:

              $( ".selector" ).pqGrid({
                  cellBeforeSave: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcellbeforesave event:

               $( ".selector" ).on( "pqgridcellbeforesave", function( event, ui ) {
                      var dataIndx = ui.dataIndx, newVal = ui.newVal;
                      if(dataIndx == 'profits'){    
                          if(newVal < 0){
                              return false;
                          }
                      }
              });

              cellClick( event, ui )Type: pqgridcellclick

              Triggered when a cell is clicked in pqGrid.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • colIndx
                  Type: Integer
                  Zero based index of the column corresponding to clicked cell.

              Code examples:

              Initialize the pqGrid with the cellClick callback specified:

              $( ".selector" ).pqGrid({
                  cellClick: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcellclick event:

              $( ".selector" ).on( "pqgridcellclick", function( event, ui ) {} );

              cellDblClick( event, ui )Type: pqgridcelldblclick

              Triggered when a cell is double clicked in pqGrid.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • colIndx
                  Type: Integer
                  Zero based index of the column corresponding to cell.

              Code examples:

              Initialize the pqGrid with the cellDblClick callback specified:

              $( ".selector" ).pqGrid({
                  cellDblClick: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcelldblclick event:

              $( ".selector" ).on( "pqgridcelldblclick", function( event, ui ) {} );

              cellEditKeyDown( event, ui )Type: pqgricelleditkeydown

              This event is deprecated. Please use editorKeyDown instead of this event.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • colIndx
                  Type: Integer
                  Zero based index of the column corresponding to cell.
                • $td
                  Type: jQuery
                  Table Cell which is being edited.
                • $cell
                  Type: jQuery
                  Editor container.

              Code examples:

              Initialize the pqGrid with the cellEditKeyDown callback specified:

              $( ".selector" ).pqGrid({
                  cellEditKeyDown: function( event, ui ) {}
              });

              Bind an event listener to the pqgricelleditkeydown event:

              $( ".selector" ).on( "pqgricelleditkeydown", function( event, ui ) {} );

              cellKeyDown( event, ui )Type: pqgricellkeydown

              Triggered when a key is pressed in a selected cell. In case of multiple cell selection, the last selected cell receives the keys input. Default handling of keys by the grid can be prevented by returning false.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • colIndx
                  Type: Integer
                  Zero based index of the column corresponding to cell.

              Code examples:

              Initialize the pqGrid with the cellKeyDown callback specified:

              $( ".selector" ).pqGrid({
                  cellKeyDown: function( event, ui ) {}
              });

              Bind an event listener to the pqgricellkeydown event:

              $( ".selector" ).on( "pqgricellkeydown", function( event, ui ) {} );

              cellRightClick( event, ui )Type: pqgridcellrightclick

              Triggered when a cell is right clicked.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row corresponding to cell.
                • colIndx
                  Type: Integer
                  Zero based index of the column corresponding to cell.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.

              Code examples:

              Initialize the pqGrid with the cellRightClick callback specified:

              $( ".selector" ).pqGrid({
                  cellRightClick: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcellrightclick event:

              $( ".selector" ).on( "pqgridcellrightclick", function( event, ui ) {} );

              cellSave( event, ui )Type: pqgridcellsave

              Triggered after a cell is saved in pqGrid locally due to inline editing. This event is suitable to update computed or dependent data in other cells. If you want to make your code execute after data changes irrespective of the reason i.e., inline editing, copy/paste, etc. please use change event which is more versatile than this event.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • colIndx
                  Type: Integer
                  Zero based index of the column.

              Code examples:

              Initialize the pqGrid with the cellSave callback specified:

              $( ".selector" ).pqGrid({
                  cellSave: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcellsave event:

              $( ".selector" ).on( "pqgridcellsave", function( event, ui ) {} );

              cellSelect( event, ui )Type: pqgridcellselect

              Triggered when a cell has been selected in pqGrid.
              ui.cells is undefined when a single cell is affected.
              ui.rowData, ui.rowIndx, ui.dataIndx & ui.colIndx are undefined when number of cells are affected together.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row corresponding to selected cell.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • colIndx
                  Type: Integer
                  Zero based index of the column corresponding to selected cell.
                • cells
                  Type: Array
                  Array of objects when multiple cells are selected at once.

              Code examples:

              Initialize the pqGrid with the cellSelect callback specified:

              $( ".selector" ).pqGrid({
                  cellSelect: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcellselect event:

              $( ".selector" ).on( "pqgridcellselect", function( event, ui ) {} );

              cellUnSelect( event, ui )Type: pqgridcellunselect

              Triggered when a cell has been deselected in pqGrid.
              ui.cells is undefined when a single cell is affected.
              ui.rowData, ui.rowIndx, ui.dataIndx & ui.colIndx are undefined when number of cells are affected together.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row corresponding to deselected cell.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • colIndx
                  Type: Integer
                  Zero based index of the column corresponding to deselected cell.
                • cells
                  Type: Array
                  Array of objects when multiple cells are deselected at once.

              Code examples:

              Initialize the pqGrid with the cellUnSelect callback specified:

              $( ".selector" ).pqGrid({
                  cellUnSelect: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcellunselect event:

              $( ".selector" ).on( "pqgridcellunselect", function( event, ui ) {} );

              change( event, ui )Type: pqgridchange

              Triggered after change in grid data takes place due to inline editing a cell, add/update/delete a row through method invocation, paste of rows/cells, undo, redo. Checks for editability of row/cell and validations take place before this event. It fires only once when a number of cells are affected together (e.g., paste of multiple cells, undo, redo, etc) rather than firing for each individual cell. This event is suitable to intimate the remote server about any data changes in the grid. This event has the same ui parameters as beforeValidate event but with a significant difference being that ui parameters are considered read only for this event.

              • event
                Type: Event
              • ui
                Type: Object
                • rowList
                  Type: Array
                  Array of objects { rowData: rowData, newRow: newRow, oldRow: oldRow, type: type } where type may be 'add', 'update' or 'delete'.
                • source
                  Type: String
                  origin of the change e.g., 'edit', 'update', 'add' , 'delete', 'paste', 'undo', 'redo' or a custom source passed to addRow, updateRow, deleteRow methods.
                • allowInvalid
                  Type: Boolean
                  Allows invalid value and adds an invalid class to the cell/cells.
                • history
                  Type: Boolean
                  Whether add this operation in history.
                • checkEditable
                  Type: Boolean
                  Checks whether the row/cell is editable before making any change.

              Code examples:

              Initialize the pqGrid with the change callback specified:

              $( ".selector" ).pqGrid({
                  change: function( event, ui ) {}
              });

              Bind an event listener to the pqgridchange event:

              $( ".selector" ).on( "pqgridchange", function( event, ui ) {} );

              check( event, ui )Type: pqgridcheck

              Triggered after beforeCheck event is fired and checkbox is checked. rows is passed as argument instead of rowData / rowIndx when multiple checkboxes are affected at once e.g., when JSON data is loaded having few cells with true value initially. Default action after this event is selection of row/rows which can be canceled by returning false.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • source
                  Type: String
                  Origin of checkbox event e.g., 'header'.
                • rows
                  Type: Array
                  Array of objects when multiple rows are affected at once.

              Code examples:

              Initialize the pqGrid with the check callback specified:

              $( ".selector" ).pqGrid({
                  check: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcheck event:

              $( ".selector" ).on( "pqgridcheck", function( event, ui ) {} );

              columnResize( event, ui )Type: pqgridcolumnresize

              Triggered when a column is resized.

              • event
                Type: Event
              • ui
                Type: Object
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • colIndx
                  Type: Integer
                  Zero based index of the column.
                • oldWidth
                  Type: Integer
                  Previous width of the column.
                • newWidth
                  Type: Integer
                  New width of the column.

              Code examples:

              Initialize the pqGrid with the columnResize callback specified:

              $( ".selector" ).pqGrid({
                  columnResize: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcolumnresize event:

              $( ".selector" ).on( "pqgridcolumnresize", function( event, ui ) {} );

              create( event, ui )Type: pqgridcreate

              Triggered after the pqGrid is created. The data is available and the cells are rendered when this event occurs in case of local request. Use load event in case of remote request for availability of data and rendering of cells.

              Code examples:

              Initialize the pqGrid with the create callback specified:

              $( ".selector" ).pqGrid({
                  create: function( event, ui ) {}
              });

              Bind an event listener to the pqgridcreate event:

              $( ".selector" ).on( "pqgridcreate", function( event, ui ) {} );

              editorBegin( event, ui )Type: pqgrideditorbegin

              Triggered when editor is created.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • column
                  Type: Object
                  Object containing properties of this column.
                • $editor
                  Type: jQuery
                  Editor.

              Code examples:

              Initialize the pqGrid with the editorBegin callback specified:

              $( ".selector" ).pqGrid({
                  editorBegin: function( event, ui ) {}
              });

              Bind an event listener to the pqgrideditorbegin event:

              $( ".selector" ).on( "pqgrieditorbegin", function( event, ui ) {} );

              editorBlur( event, ui )Type: pqgrideditorblur

              Triggered when editor is blurred.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • column
                  Type: Object
                  Object containing properties of this column.
                • $editor
                  Type: jQuery
                  Editor.

              Code examples:

              Initialize the pqGrid with the editorBlur callback specified:

              $( ".selector" ).pqGrid({
                  editorBlur: function( event, ui ) {}
              });

              Bind an event listener to the pqgrideditorblur event:

              $( ".selector" ).on( "pqgrieditorblur", function( event, ui ) {} );

              editorEnd( event, ui )Type: pqgrideditorend

              Triggered when editor is about to be destroyed.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • column
                  Type: Object
                  Object containing properties of this column.
                • $editor
                  Type: jQuery
                  Editor.

              Code examples:

              Initialize the pqGrid with the editorEnd callback specified:

              $( ".selector" ).pqGrid({
                  editorEnd: function( event, ui ) {}
              });

              Bind an event listener to the pqgrideditorend event:

              $( ".selector" ).on( "pqgrieditorend", function( event, ui ) {} );

              editorFocus( event, ui )Type: pqgrideditorfocus

              Triggered when editor is focused.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • column
                  Type: Object
                  Object containing properties of this column.
                • $editor
                  Type: jQuery
                  Editor.

              Code examples:

              Initialize the pqGrid with the editorFocus callback specified:

              $( ".selector" ).pqGrid({
                  editorFocus: function( event, ui ) {}
              });

              Bind an event listener to the pqgrideditorfocus event:

              $( ".selector" ).on( "pqgrieditorfocus", function( event, ui ) {} );

              editorKeyDown( event, ui )Type: pqgrideditorkeydown

              Triggered when a key is input in an editor. Default behaviour of the keys in editor can be prevented by returning false in this event. editorKeyPress and editorKeyUp are fired after this event.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • column
                  Type: Object
                  Object containing properties of this column.
                • $editor
                  Type: jQuery
                  Editor.

              Code examples:

              Initialize the pqGrid with the editorKeyDown callback specified:

              $( ".selector" ).pqGrid({
                  editorKeyDown: function( event, ui ) {}
              });

              Bind an event listener to the pqgrideditorkeydown event:

              $( ".selector" ).on( "pqgrideditorkeydown", function( event, ui ) {} );

              editorKeyPress( event, ui )Type: pqgrideditorkeypress

              Triggered when a key is pressed in an editor. This event is fired after editorKeyDown event.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • column
                  Type: Object
                  Object containing properties of this column.
                • $editor
                  Type: jQuery
                  Editor.

              Code examples:

              Initialize the pqGrid with the editorKeyPress callback specified:

              $( ".selector" ).pqGrid({
                  editorKeyPress: function( event, ui ) {}
              });

              Bind an event listener to the pqgrideditorkeypress event:

              $( ".selector" ).on( "pqgrideditorkeypress", function( event, ui ) {} );

              editorKeyUp( event, ui )Type: pqgrideditorkeyup

              Triggered when a key is released after input in an editor.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • column
                  Type: Object
                  Object containing properties of this column.
                • $editor
                  Type: jQuery
                  Editor.

              Code examples:

              Initialize the pqGrid with the editorKeyUp callback specified:

              $( ".selector" ).pqGrid({
                  editorKeyUp: function( event, ui ) {}
              });

              Bind an event listener to the pqgrideditorkeyup event:

              $( ".selector" ).on( "pqgrideditorkeyup", function( event, ui ) {} );

              headerCellClick( event, ui )Type: pqgridheadercellclick

              Triggered when a header cell is clicked.

              • event
                Type: Event
              • ui
                Type: Object
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • column
                  Type: Object
                  Object containing properties of this column.

              Code examples:

              Initialize the pqGrid with the headerCellClick callback specified:

              $( ".selector" ).pqGrid({
                  headerCellClick: function( event, ui ) {}
              });

              Bind an event listener to the pqgridheadercellclick event:

              $( ".selector" ).on( "pqgridheadercellclick", function( event, ui ) {} );

              history( event, ui )Type: pqgridhistory

              Triggered whenever

              • type = add A reversible operation i.e., add/update/delete is done in the grid. It may be a single operation e.g., while inline editing of a cell, add/update/delete of a row by method invocation or a combination of operations e.g., paste of multiple cells/rows.
              • canUndo = true, false There is a change of state from ability to perform and not perform undo operation.
              • canRedo = true, false There is a change of state from ability to perform and not perform redo operation.
              • type = undo, redo Undo (by Ctrl-Z or method invocation) or redo (by Ctrl-Y or method invocation) is performed.
              • type = reset, resetUndo

              • event
                Type: Event
              • ui
                Type: Object
                • canUndo
                  Type: Boolean
                  Whether undo can be performed.
                • canRedo
                  Type: Boolean
                  Whether redo can be performed.
                • type
                  Type: String
                  'add', 'undo', 'redo', 'reset', 'resetUndo'.
                • num_undo
                  Type: Integer
                  Number of possible undo.
                • num_redo
                  Type: Integer
                  Number of possible redo.

              Code examples:

              Initialize the pqGrid with the history callback specified:

              $( ".selector" ).pqGrid({
                  history: function( event, ui ) {}
              });

              Bind an event listener to the pqgridhistory event:

              $( ".selector" ).on( "pqgridhistory", function( event, ui ) {} );

              load( event, ui )Type: pqgridload

              Triggered after the pqGrid has loaded the remote data.

              Code examples:

              Initialize the pqGrid with the load callback specified:

              $( ".selector" ).pqGrid({
                  load: function( event, ui ) {}
              });

              Bind an event listener to the pqgridload event:

              $( ".selector" ).on( "pqgridload", function( event, ui ) {} );

              quitEditMode( event, ui )Type: pqgridquiteditmode

              This event is deprecated. Please use editorEnd in its place.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • colIndx
                  Type: Integer
                  Zero based index of the column.

              Code examples:

              Initialize the pqGrid with the quitEditMode callback specified:

              $( ".selector" ).pqGrid({
                  quitEditMode: function( event, ui ) {}
              });

              Bind an event listener to the pqgridquiteditmode event:

              $( ".selector" ).on( "pqgridquiteditmode", function( event, ui ) {} );

              refresh( event, ui )Type: pqgridrefresh

              Triggered whenever the view of grid is refreshed.

              • event
                Type: Event
              • ui
                Type: Object
                • pageData
                  Type: Array
                  2-dimensional array or JSON data for current page.
                • initV
                  Type: Integer
                  Index of first row displayed in the unfrozen viewport.
                • finalV
                  Type: Integer
                  Index of last row displayed in the unfrozen viewport.
                • initH
                  Type: Integer
                  Index of first column displayed in the unfrozen viewport.
                • finalH
                  Type: Integer
                  Index of last column displayed in the unfrozen viewport.

              Code examples:

              Initialize the pqGrid with the refresh callback specified:

              $( ".selector" ).pqGrid({
                  refresh: function( event, ui ) {}
              });

              Bind an event listener to the pqgridrefresh event:

              $( ".selector" ).on( "pqgridrefresh", function( event, ui ) {} );

              refreshRow( event, ui )Type: pqgridrefreshrow

              Triggered whenever a row is refreshed via call to refreshRow method.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • rowIndxPage
                  Type: Integer
                  Zero based index of the row on current page.

              Code examples:

              Initialize the pqGrid with the refreshRow callback specified:

              $( ".selector" ).pqGrid({
                  refreshRow: function( event, ui ) {}
              });

              Bind an event listener to the pqgridrefreshrow event:

              $( ".selector" ).on( "pqgridrefreshrow", function( event, ui ) {} );

              render( event, ui )Type: pqgridrender

              Triggered just after pqGrid's DOM structure is created but before grid is fully initialized. This event is suitable for adding toolbars, etc. Any grid API can't be accessed in this event because the grid initialization is incomplete when this event is fired. This event fires before create event.

              Code examples:

              Initialize the pqGrid with the render callback specified:

              $( ".selector" ).pqGrid({
                  render: function( event, ui ) {}
              });

              Bind an event listener to the pqgridrender event:

              $( ".selector" ).on( "pqgridrender", function( event, ui ) {} );

              rowClick( event, ui )Type: pqgridrowclick

              Triggered when a row is clicked in pqGrid. It occurs after cellClick event.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • $tr
                  Type: jQuery
                  jQuery wrapper on the row.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • rowIndxPage
                  Type: Integer
                  Zero based index of the row on current page.

              Code examples:

              Initialize the pqGrid with the rowClick callback specified:

              $( ".selector" ).pqGrid({
                  rowClick: function( event, ui ) {}
              });

              Bind an event listener to the pqgridrowclick event:

              $( ".selector" ).on( "pqgridrowclick", function( event, ui ) {} );

              rowDblClick( event, ui )Type: pqgridrowdblclick

              Triggered when a row is double clicked in pqGrid. It occurs after cellDblClick event.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • $tr
                  Type: jQuery
                  jQuery wrapper on the row.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • rowIndxPage
                  Type: Integer
                  Zero based index of the row on current page.

              Code examples:

              Initialize the pqGrid with the rowDblClick callback specified:

              $( ".selector" ).pqGrid({
                  rowDblClick: function( event, ui ) {}
              });

              Bind an event listener to the pqgridrowdblclick event:

              $( ".selector" ).on( "pqgridrowdblclick", function( event, ui ) {} );

              rowRightClick( event, ui )Type: pqgridrowrightclick

              Triggered when a row is right clicked.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.

              Code examples:

              Initialize the pqGrid with the rowRightClick callback specified:

              $( ".selector" ).pqGrid({
                  rowRightClick: function( event, ui ) {}
              });

              Bind an event listener to the pqgridrowrightclick event:

              $( ".selector" ).on( "pqgridrowrightclick", function( event, ui ) {} );

              rowSelect( event, ui )Type: pqgridrowselect

              Triggered when a single row or number of rows have been selected in pqGrid.
              ui.rows is undefined when a single row is affected.
              ui.rowData and ui.rowIndx are undefined when number of rows are affected together.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the selected row.
                • rows
                  Type: Array
                  Array of objects when multiple rows are selected at once.

              Code examples:

              Initialize the pqGrid with the rowSelect callback specified:

              $( ".selector" ).pqGrid({
                  rowSelect: function( event, ui ) {}
              });

              Bind an event listener to the pqgridrowselect event:

              $( ".selector" ).on( "pqgridrowselect", function( event, ui ) {} );

              rowUnSelect( event, ui )Type: pqgridrowunselect

              Triggered when a single row or number of rows have been deselected in pqGrid.
              ui.rows is undefined when a single row is affected.
              ui.rowData and ui.rowIndx are undefined when number of rows are affected together.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the deselected row.
                • rows
                  Type: Array
                  Array of objects when multiple rows are deselected at once.

              Code examples:

              Initialize the pqGrid with the rowUnSelect callback specified:

              $( ".selector" ).pqGrid({
                  rowUnSelect: function( event, ui ) {}
              });

              Bind an event listener to the pqgridrowunselect event:

              $( ".selector" ).on( "pqgridrowunselect", function( event, ui ) {} );

              selectChange( event, ui )Type: pqgridselectchange

              Triggered whenever selection is changed by user action or by invoking the selection method. This event is triggered only when selectionModel.fireSelectChange is set to true since v2.4.0.

              • event
                Type: Event
              • ui
                Type: Object
                • cells
                  Type: Array
                  Array of objects { rowIndx: rowIndx, rowData: rowData, dataIndx: dataIndx }.
                • rows
                  Type: Array
                  Array of objects { rowIndx: rowIndx, rowData: rowData }.

              Code examples:

              Initialize the pqGrid with the selectChange callback specified:

              $( ".selector" ).pqGrid({
                  selectChange: function( event, ui ) {}
              });

              Bind an event listener to the pqgridselectchange event:

              $( ".selector" ).on( "pqgridselectchange", function( event, ui ) {} );

              sort( event, ui )Type: pqgridsort

              Triggered after the pqGrid has sorted the data initiated by a user action.

              Code examples:

              Initialize the pqGrid with the sort callback specified:

              $( ".selector" ).pqGrid({
                  sort: function( event, ui ) {}
              });

              Bind an event listener to the pqgridsort event:

              $( ".selector" ).on( "pqgridsort", function( event, ui ) {} );

              toggle( event, ui )Type: pqgridtoggle

              Triggered when toggle button is clicked and pqGrid alternates between maximized and normal state.

              Code examples:

              Initialize the pqGrid with the toggle callback specified:

              $( ".selector" ).pqGrid({
                  toggle: function( event, ui ) {}
              });

              Bind an event listener to the pqgridtoggle event:

              $( ".selector" ).on( "pqgridtoggle", function( event, ui ) {} );

              unCheck( event, ui )Type: pqgriduncheck

              Triggered after beforeunCheck event is fired and checkbox is unchecked. Default action after this event is deselection of row/rows which can be canceled by returning false.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • source
                  Type: String
                  Origin of checkbox event e.g., 'header'.

              Code examples:

              Initialize the pqGrid with the unCheck callback specified:

              $( ".selector" ).pqGrid({
                  unCheck: function( event, ui ) {}
              });

              Bind an event listener to the pqgriduncheck event:

              $( ".selector" ).on( "pqgriduncheck", function( event, ui ) {} );
              Utility Methods
              tableToArray( $table )Returns: PlainObject

              Generates a two dimensional array and colModel from a table DOM node and returns them as an Object { data: data, colModel: colModel }.

              • $table
                Type: jQuery
                jQuery wrapper on the table DOM node.

              Code examples:

              Invoke the method:

              //get data and colModel from table.
              var obj = $.paramquery.tableToArray( tbl );
              var dataModel = { data: obj.data};
              var colModel = obj.colModel;


              xmlToArray( xmlDoc, obj )Returns: Array

              Generates a two dimensional array from XML Document.

              • xmlDoc
                Type: XMLDocument
                XML Document.
              • obj
                Type: PlainObject
                {itemParent: parentXMLNode, itemNames: [Array of node names] }. It assistes the XML Parser by providing necessary XML nodes structural information.

              Code examples:

              Invoke the method:

              //get data from XML.
              var obj = { itemParent: "book", itemNames: ["author", "title", "genre", "price", "publish_date", "description"] };
              var data = $.paramquery.xmlToArray(xmlDoc, obj);


              xmlToJson( xmlDoc, obj )Returns: Object

              Generates an array of objects having key/value pairs from XML Document.

              • xmlDoc
                Type: XMLDocument
                XML Document.
              • obj
                Type: PlainObject
                {itemParent: parentXMLNode, itemNames: [Array of node names] }. It assistes the XML Parser by providing necessary XML nodes structural information.

              Code examples:

              Invoke the method:

              //get data from XML.
              var obj = { itemParent: "book", itemNames: ["author", "title", "genre", "price", "publish_date", "description"] };
              var data = $.paramquery.xmlToJson(xmlDoc, obj);