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.
• refresh
  Type: Boolean
  Optional parameter with default value of true.

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'} );

(v6.0.0) Add or insert new nodes/rows in the grid. New rows are inserted at passed rowIndx, they are appended when rowIndx is not passed. It works similar to addRow except that ui.source value is "addNodes" in the events fired during the process.

• nodes
  Type: Array
  Array of nodes or rows.
• rowIndx
  Type: Integer
  Zero based index of the row.

Code examples:

Invoke the method:

//Insert 2 empty rows at rowIndx: 10
grid.addNodes([{}, {}], 10);

Appends a row or multiple rows to the local data and returns rowIndx of the added row or inserts a row or multiple rows at rowIndx if rowIndx is/are provided.
newRow is the data contained in the new row. It was named rowData in versions prior to 3.2.0.
rowList can be used instead of rowIndx, newRow while adding/inserting multiple rows at once as shown in below examples.
The tracking of this operation for commit and rollback is determined by trackModel.on 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 to the history or not depending upon value of the parameter.
checkEditable parameter affects the checks for editability of cells.
By default the view is refreshed by this method which can be prevented by passing refresh parameter as false to this method.

Change Log: v3.2.0:

1. rowList parameter is added to support multiple rows.
2. rowData parameter is renamed to newRow. It's backward compatible and previous versions should use rowData.

• newRow
  Type: Object or Array
  Reference to 1-dimensional array or object representing row data.
• rowIndx
  Type: Integer
  Optional. Zero based index of the row.
• rowList
  Type: Array
  Array of objects {rowIndx: rowIndx, newRow: newRow}.
• track
  Type: Boolean
  Optional parameter with default value of trackModel.on.
• 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.
• refresh
  Type: Boolean
  Optional parameter with default value of true.

Code examples:

Invoke the method:

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

//Insert an empty row at rowIndx : 3
$( selector ).pqGrid( "addRow",
    { newRow: {}, rowIndx: 3 }
);

//Insert multiple rows at once.
$( selector ).pqGrid( "addRow", {
    rowList:[
        { newRow: {}, rowIndx: 3 },
        { newRow: { product: 'Apple' }, rowIndx: 5 }
    ]
});

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' } }
);

Added in v5.2.0, it returns checkbox column instance on which further methods can be called.

    var Checkbox = grid.Checkbox( 'ShipCountry' );

beforeCheck, beforeValidate, change and check events are fired when checkAll, checkNodes, unCheckAll, unCheckNodes methods are called.

Individual checkboxes can also be checked / unchecked with updateRow method of grid. In this case, beforeValidate, change and check events are fired.

Following methods are also available in Group() and Tree() objects when checkbox is used.

• dataIndx
  Type: String
  field name in JSON data.

Code examples:

Invoke the method:

Checkbox.checkAll();
            

Collapse the grid.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

Returns columns instance to manipulate columns.

    var Cols = grid.Columns();

Following methods can be invoked on the columns instance. gcm and cm are used in the API. Both are arrays, gcm is the whole colModel that includes parent grouped columns while cm is colModel fragment array, normally used for children columns.

• This method does not accept any arguments.

Code examples:

Invoke the method:

            //collapse the column having known title.
            Cols.alter(function(){
                Cols.find(function(column){
                    return (column.title=="Revenues ($ millions)");
                }).collapsible = {on: true};
            })
        

Accepts or commits the add, edit and delete operations done after turning on tracking.

type limits the commit operation. Possible values are add, update or delete.

rows parameter further limits 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
  Optional parameter. An array of rows to limit the type of commit to matching rows only. It acts as a helper while updating primary keys of added records from server. It also helps to control the updated and deleted records from server.

Code examples:

Invoke the method:

//commit all added, updated and deleted records.
$( selector ).pqGrid( "commit" );

//commit all updated records.
$( selector ).pqGrid( "commit", { type: 'update' } );

//commit updated records with matching rows only.
$( selector ).pqGrid( "commit", { type: 'update', rows: rows } );

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

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

Code examples:

Invoke the method:

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

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} }
        });

(v6.0.0) Delete contiguous or non contiguous nodes/rows from the grid. It works similar to deleteRow except that ui.source value is "deleteNodes" in the events fired during the process.

• nodes
  Type: Array
  Array of nodes or rows.

Code examples:

Invoke the method:

//Delete 2 nodes from grid
grid.deleteNodes([node1, node2]);

Deletes a single or multiple rows from the local data at provided rowIndx.
The tracking of this operation for commit and rollback is determined by global trackModel.on 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 to history or not depending upon value of this parameter.
By default the view is refreshed by this method which can be prevented by passing refresh parameter as false to this method.

1. rowList parameter is added to support multiple deletes.

• rowIndx
  Type: Integer
  Zero based index of the row.
• rowList
  Type: Array
  Array of objects {rowIndx: rowIndx}.
• track
  Type: Boolean
  Optional parameter with default value of trackModel.on.
• source
  Type: String
  Optional parameter with default value of 'delete'.
• history
  Type: Boolean
  Optional parameter with default value of historyModel.on.
• refresh
  Type: Boolean
  Optional parameter with default value of true.

Code examples:

Invoke the method:

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

//Delete multiple rows.
$( selector ).pqGrid( "deleteRow", {
    rowList:[
        { rowIndx: 0 },
        { rowIndx: 5 }
    ]
});

Removes the grid functionality completely and returns the element back to its pre initialization state.

Code examples:

Invoke the method:

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

Disables the pqGrid.

Code examples:

Invoke the method:

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

(v6.0.0) Returns Drag instance of grid with draggable rows.

{
    nodes: Array
    rowData: any
    rowIndx: number
}

Code examples:

Invoke the method:

 var Drag = grid.Drag(); 

Enables the pqGrid.

Code examples:

Invoke the method:

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

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" } );

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 the grid.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

This method is deprecated, use exportData instead. 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.
• render
  Type: Boolean
  Set true to include rendered cells. Default is false.

Code examples:

Invoke the method:

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

This method is deprecated, use exportData instead. It exports the data in the grid into Excel format file with xlsx 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 xlsx file.
• sheetName
  Type: String
  Name of the Worksheet.
• render
  Type: Boolean
  Set true to include rendered cells. Default is false.

Code examples:

Invoke the method:

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

It exports the grid data into specified format ( passed as parameter ), optionally posts it to server and user is prompted to download the exported file. This method returns the exported data as a string which can be used to process exported data locally.

Remote export via server takes place in 2 steps/requests.

1. Grid posts pq_data, pq_ext, pq_decode, pq_filename parameters to the server which
   • copies data from pq_data.
   • base64 decodes the data if pq_decode is true.
   • saves it in a session and returns the name of file.
2. Grid sends the filename as pq_filename parameter to server as GET variable and server returns the file as downloadable attachment.

• cssRules
  Type: String
  Html export: String of css rules
• filename
  Type: String
  Name of exported file without extension.
• format
  Type: String
  Supported formats are 'csv', 'htm', 'json' or 'xlsx'. Extension of the file is same as format.
• noheader
  Type: Boolean
  non-json export: The column headers are included in exported data by default. Set true to exclude them.
• nopqdata
  Type: Boolean
  json export: Set true to exclude pq_ related meta data in the rows.
• nopretty
  Type: Boolean
  json export: The data is separated by newline characters and indented by 2 spaces. Set true to skip any formatting of the exported data.
• render
  Type: Boolean
  non-json export: Set true to include all rendered cells in exported data. column.exportRender option can be used to selectively include the rendered cells or override this parameter.
• replace
  Type: Array
  Excel export: (v6.2.4) Used to replace any unwanted strings from the worksheets. Entries in the array correspond to the parameters of the native js String replace method.
• sheetName
  Type: String
  Excel export: Name of the worksheet.
• title
  Type: String
  Html export: Title of html page.
• type
  Type: String
  Excel export: maps to type parameter of jsZip generate method.
• url
  Type: String
  Absolute or relative url where grid posts the data to be returned back by server as a download file. The data is not posted when url is not provided.
• workbook
  Type: Boolean
  Excel export: generate intermediate json workbook or final Excel file ( which is default ). Option added in v4.0.0
• zip
  Type: Boolean
  non-xlsx export: Set it true to reduce the size of download file by compressing it.

Code examples:

Invoke the method:

var data = grid.exportData({ format: 'json' });

It filters the data in grid locally or remotely depending upon filterModel.type value.

It filters and returns the filtered data if data is passed as parameter.

rules is an array of one or more filter rules. Multiple rules can be applied to single column/ dataIndx since v5.2.0 with help of properties rule.mode and rule.crules.

Singular rule can be used if there is only one rule.

• oper
  Type: String
  Optional parameter and applicable only when It can have value of either 'replace' or 'add' with default value of 'add'. 'replace' replaces the previous filter rules (if any) with new filter rules. 'add' appends new filter rules to previous filter rules (if any). 'add' replaces previous filter rule if there is new filter rule for the same dataIndx.
• mode
  Type: String
  'AND' or 'OR' with default value of filterModel.mode.
• data
  Type: Array
  Optional parameter with default value of data in grid. Grid in data is not affected and filtered data out of passed data is returned as method value.
• rule > dataIndx
  Type: Integer or String
  Zero based index in array or key name in JSON.
• rule > condition
  Type: String
  "begin", "contain", "notcontain", "equal", "notequal", "empty", "notempty", "end", "less", "great", "between", "range", "regexp", "notbegin", "notend", "lte", "gte"
• rule > crules
  Type: Array
  Array of objects with properties condition, value and value2.
• rule > mode
  Type: String
  'AND' or 'OR', mode of filtering within a single column.
• rule > 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'
• rule > value2
  Type: Object
  Second value of field applicable to between condition only.

Code examples:

Invoke the method:

var filtered_data = grid.filter({
    mode: 'OR',
    data: [
        { country: 'India', city: 'New Delhi' },
        { country: 'India', city: 'Pune' },
        { country: 'France', city: 'Paris' },
        { country: 'France' },
        { country: 'USA', city: 'New Jersey' },
        { country: 'USA', city: 'New York' },
    ],
    rules: [
        { dataIndx: 'country', condition: 'begin', value: 'Fr' },
        { dataIndx: 'city', condition: 'notempty' }
    ]
});

//filter the data in grid. (Note the data parameter is not passed)
grid.filter({
    oper: 'replace',
    mode: 'OR',
    rules: [
        { dataIndx: 'country', condition: 'begin', value: 'Fr' },
        { dataIndx: 'city', condition: 'notempty' }
    ]
});

//filter data in grid with multiple conditions in single column. (new in v5.2.0)
grid.filter({
    oper: 'replace',
    rules: [
        { dataIndx: 'country', condition: 'begin', value: 'Fr' },
        {
            dataIndx: 'city',
            mode: 'OR',
            crules: [
                { condition: 'notempty' },
                { condition: 'begin', value: 'a' }
            ]
        }
    ]
});

Added in v3.0.0, it applies flex whereby the columns adjust their widths so that all content is visible in the cells without text wrap. It is applied to the columns whose dataIndx or colIndx are passed as parameters. All the columns in viewport are affected if no parameter is passed.
This method is dependent upon the view of grid, hence is useful to call when the grid is laid down or view is ready.

• dataIndx
  Type: Array
  Array of dataIndx.
• colIndx
  Type: Array
  Array of colIndx.

Code examples:

Invoke the method:

//apply flex to "products" and "contactName" field.
    $( selector ).pqGrid( "flex", { dataIndx: [ "products", "contactName" ] } );

It sets focus upon a single cell. This method refreshes the focus if it is called without any parameters.

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

Code examples:

Invoke the method:

grid.focus( { rowIndxPage: 1, colIndx:  2 } );

//or

grid.focus();

It returns a grid cell wrapped in jQuery object if cell is displayed in the viewport. Either rowIndx or rowIndxPage and either colIndx, dataIndx or vci can be passed. vci is new addition in v5.4.0

Code examples:

Invoke the method:

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

It returns header filter cell wrapped in jQuery object if cell is displayed in the viewport (v5.4.0). Either colIndx, dataIndx or vci can be provided.

Code examples:

Invoke the method:

//get filter header cell in 4th column.
var $cell = $( selector ).pqGrid( "getCellHeader", { colIndx: 3 } );

It returns header cell wrapped in jQuery object if cell is displayed in the viewport. Either colIndx, dataIndx or vci can be provided. ri is useful in case of grouped columns; when omitted, only lower level header cells are returned. vci and ri are new additions in v5.4.0

Code examples:

Invoke the method:

//get header cell in 4th column.
var $cell = $( selector ).pqGrid( "getCellHeader", { colIndx: 3 } );

Used to get cells having a given class added by addClass() method or JSON notation rowData.pq_cellcls. It returns all cells, even the cells that are not visible. 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 cellList = $( selector ).pqGrid( "getCellsByClass", { cls : 'pq-delete' } );

//get first cell having the above class.
var cell = cellList[0],
    rowData = cell.rowData,
    rowIndx = cell.rowIndx,
    dataIndx = cell.dataIndx;

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;

Used to get uncommitted changes w.r.t added rows, updated rows and deleted rows when tracking is on. Dirty rows are returned by reference (rowData) when format is null or is not passed to the method.

Dirty rows are cloned and returned when format is 'byVal'. In this case by default only the fields which are dirty are returned along with primary key of the record. All the fields in row are returned when all is true.

Internal representation and detail information including old values of cells present in dirty data is returned when format is 'raw'.

Change Log v3.2.0

1. all parameter is added.
2. Only the dirty fields along with primary key are returned when format is 'byVal'. In previous versions, all fields in row are returned.

• format
  Type: String
  'byVal', 'raw' or null.
• all
  Type: Boolean
  Applicable only when format is 'byVal', it returns all fields in updateList when true.

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..]
}

Used to get colIndx when dataIndx or column is known. Returns -1 when no match is found.

• dataIndx
  Type: Integer or String
  Zero based index in array or key name in JSON.
• column
  Type: Object
  Reference to column object in colModel.

Code examples:

Invoke the method:

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

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" } );

Used to get primary colModel of lower most columns in the header (v5.4.0). Primary colModel is the original colModel of lowest columns when pivoting is on. Current and primary colModel are same when pivoting is off.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

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

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

It's used to get an array of unique row objects containing dataIndx from local data cache dataModel.data + dataModel.dataUF of the grid.

When data parameter is passed, array of unique row objects is taken from data instead of local data cache of grid.

It returns filtered data concatenated with unfiltered data of grid when no parameters are passed.

In case of row grouping in grid, this method excludes title and summary rows.

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

Code examples:

Invoke the method:

var data = grid.getData({ dataIndx: ['ProductName', 'UnitPrice'] });

//returns
[ { 'ProductName': 'ABC', UnitPrice: 30 }, { 'ProductName': 'DEF', UnitPrice: 15 },... ]

Added in v5.2.0, it returns an options array of unique values from data obtained after applying filter on pre-filtered columns. These options are used by header filter range condition for cascade filtering.

• dataIndx
  Type: Integer or String
  Zero based index in array or key name in JSON.
• groupIndx
  Type: Integer or String
  dataIndx of group by column (optional).

Code examples:

Invoke the method:

var options = grid.getDataCascade('ShipRegion', 'ShipCountry');
//returns [{ShipCountry: 'Brazil', ShipRegion: 'RJ'}, { ShipCountry: 'Brazil', ShipRegion: 'SP' }]

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

• This method does not accept any arguments.

Code examples:

Invoke the method:

var obj = $( selector ).pqGrid( "getEditCell" );

var $td = obj.$td; //table cell

var $cell = obj.$cell; //editor wrapper.

var $editor = obj.$editor; //editor.

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" );

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 });

Used to get a row when rowIndxPage or rowIndx is known. It returns a tr element wrapped in jQuery object. It returns an empty jQuery object if row is not rendered in the viewport.

• 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} );

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} );

Used to get row index of a given row when either $tr or rowData is known. Returns an object containing rowIndx and rowIndxPage. Returns an empty object if no match is found.

• $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;

Used to get rows having a given class name added by addClass() method or JSON notation rowData.pq_rowcls. It returns all rows, even the rows that are not visible. 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;

Used to get previously saved state of a grid in localStorage. (6.0.0)

• This method does not accept any arguments.

Code examples:

Invoke the method:

var obj = grid.getState();

Grid renders only the visible rows and columns in the viewport. This method is used to get rendered row and column indices in the viewport.

• initV
  Type: Integer
  rowIndx of first rendered row.
• finalV
  Type: Integer
  rowIndx of last rendered row.
• initH
  Type: Integer
  colIndx of first rendered column.
• finalH
  Type: Integer
  colIndx of last rendered column.

Code examples:

Invoke the method:

var obj = $( selector ).pqGrid( "getViewPortIndx" ),
    initV = obj.initV,
    finalV = obj.finalV,
    initH = obj.initH,
    finalH = obj.finalH;

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} );

Returns group instance.

    var Group = grid.Group();

Following methods can be invoked on the group instance.

Checkbox support is added in v5.2.0

Group.addGroup( "company" );

//add new group at index 1.
Group.addGroup( "sport", 1 );

//collapse 1st level.
Group.collapse( 1 );

//collapse all levels.
Group.collapseAll();

//collapse all levels after 1st level.
Group.collapseAll( 1 );

//expand 10th node of 2nd level in 5th node of 1st level.
Group.expandTo( '4,9' );

//expand 1st level.
Group.expand( 1 );

//expand all levels.
Group.expandAll();

//expand all levels after 1st level.
Group.expandAll( 1 );

//expand 10th node of 2nd level in 5th node of 1st level.
Group.expandTo( '4,9' );

    var nodes = Group.getCheckedNodes();

    var node = Group.getNode( id );

    var node = Group.getParent( childnode );

    var node = Group.getSummary( node );

    var bool = Group.isAncestor( childNode, ancestorNode );

    var bool = Group.isFolder( node );

    Group.moveNodes( nodes, parentNew );

//group by ShipCountry and keep it collapsed.
Group.option({
    dataIndx: ['ShipCountry'], collapsed: [ true ]
});

Group.removeGroup( "company" );

• This method does not accept any arguments.

Code examples:

Invoke the method:

var group = $( selector ).pqGrid( "Group" );
group.expandTo( '4,9' );

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'}
);

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" );

Returns history instance.

    var history = grid.History();

Following methods can be invoked on the history instance.

undo and redo can be invoked multiple times until all the operations have been undone or redone. Multiple cells affected by copy/paste or updateRow() method are considered as a single operation.

• This method does not accept any arguments.

Code examples:

Invoke the method:

            history.undo();
        

Imports data from a json workbook into grid.

• extraCols
  Type: Integer
  Extra empty columns to be added in grid.
• extraRows
  Type: Integer
  Extra empty rows to be added in grid.
• keepCM
  Type: Boolean
  keep original colModel of grid for data binding.
• headerRowIndx
  Type: Integer
  Number of top zero based row index in worksheet to be treated as grid header row.
• sheet
  Type: String or Integer
  Index/name of sheet to be imported. If omitted, first worksheet is imported be default.
• workbook
  Type: PlainObject
  json workbook to be imported

Code examples:

Invoke the method:

        grid.importWb({
            sheet: 0,
            workbook: {
                 sheets:[
                    {
                        name:'PQ pro',
                        frozenRows: 1,
                        frozenCols: 1,
                        mergeCells:[
                            "A5:E7"
                        ],
                        columns:[
                            {width:210},
                            {hidden:true}
                        ],
                        rows:[
                            {
                                cells:[
                                    {
                                        value: 'Hello World',
                                        bgColor: '#ff0000',
                                        color: '#00ff00',
                                        align: 'center',
                                        fontSize: 32
                                    },
                                    {
                                        value: '12/12/2011'
                                    },
                                    {
                                        value: 3000000,
                                        bgColor: '#ff00ff'
                                    },
                                    {
                                        value: 3000000,
                                        bgColor: '#ff00ff',
                                        format:"$##,###.00"
                                    },
                                    {
                                        value: pq.formulas.TODAY(),
                                        bgColor: '#ffff00',
                                        format:"ddd mm yyyy",
                                        formula: 'TODAY()'
                                    }
                                ]
                            },
                            {
                                indx: 4,
                                //hidden: true,
                                cells:[
                                    {
                                        formula: 'TODAY()+5'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        })
        

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" );

(v6.0.0) Checks whether a cell is finally editable taking into consideration both column.editable and global editable options.

This method is used internally by the grid to decide editability of a cell.

• 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( "isEditable", { rowIndx: 3, dataIndx: "profits" } );

Checks editability of a cell based upon the column.editable option.

(v6.0.0) Returns undefined if option or callback return value is undefined.

• 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" } );

Checks whether a row is editable depending upon the global editable option.

(v6.0.0) Returns undefined if option or callback return value is undefined.

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

Code examples:

Invoke the method:

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

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 a single cell when rowData / rowIndx and dataIndx are passed as parameters.
It validates a value when dataIndx and value are passed as parameters.
It validates a single row when only rowIndx / rowData is 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 and focusInvalid is true, first invalid cell is focused and a tooltip is displayed beside the cell with validation.msg 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.
• focusInvalid
  Type: Boolean
  Puts focus on the first invalid cell.

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 } );

It checks validity of the changes w.r.t. additions and updates in the grid. It returns { valid: true } when all changes are valid and returns { valid: false } otherwise.
When allowInvalid is true, it adds invalid class to invalid cells and returns { cells: cells, valid: valid } where cells is a collection (array) of invalid cells.
When allowInvalid parameter is false and focusInvalid is true, first invalid cell is focused and a tooltip is displayed beside the cell with validation.msg and returns { valid: false, dataIndx: dataIndx } of that first invalid cell.

• allowInvalid
  Type: Boolean
  Adds an invalid class to the invalid cell/cells.
• focusInvalid
  Type: Boolean
  Puts focus on the first invalid cell.

Code examples:

Invoke the method:

//validate changes in the grid.
var valid = grid.isValidChange().valid;

Restores the state of grid to a point where it was saved previously with its counterpart method saveState. It restores the height, width of grid, frozen rows & columns, columns information i.e., column order, widths, sorted columns, paging, filtering and grouping. Column order is not restored in case of nested columns.
Grid may contain extra or removed columns in recent state which are not changed by loadState.

• state
  Type: string
  optional parameter with default value of previous state stored in browser local storage. Grid is restored from this argument rather than local storage when passed.
• refresh
  Type: Boolean
  optional parameter. It can be set to false to manually take control of the refresh process.

Code examples:

Invoke the method:

//restore the previous state of grid.
var success = $( selector ).pqGrid( "loadState" );

(v6.0.0) Moves contiguous or non contiguous nodes/rows from existing to new location specified by rowIndx within the grid. Nodes are moved to end of data in grid if rowIndx is not passed or is undefined

This method is incompatible with remote paging

Undo is not supported and moveNode event is fired at end of the process.

• nodes
  Type: Array
  Array of nodes or rows.
• rowIndx
  Type: Integer
  Zero based index of the row.

Code examples:

Invoke the method:

//Move 2 nodes to rowIndx: 10
grid.moveNodes([node1, node2], 10);

Removes event listener(s) from the grid. It's called directly on the instance of grid. It removes only the event listeners bound via on and one methods.

• event
  Type: string
  One or more than one space separated list of event names.
• fn
  Type: function
  Optional parameter. Reference to the callback function which is called when any one of the specified events is fired. All the event (specified in first parameter) listeners are removed when this parameter is omitted.

Code examples:

Invoke the method:

instance.off( 'beforeSort', fn ); 

Bind a listener to the grid events. The event is bound directly to the instance of grid.

• event
  Type: string
  One or more than one space separated list of event names.
• fn
  Type: function
  A callback function that is called when any one of the specified events is fired. The callback receives 2 arguments evt and ui.

Code examples:

Invoke the method:

instance.on( 'beforeSort', function( evt, ui ){

});

It's similar to the on; the only difference being that callback is fired only once when event is fired the first time.

• event
  Type: string
  One or more than one space separated list of event names.
• fn
  Type: function
  A callback function that is called when any one of the specified events is fired. The callback receives 2 arguments evt and ui.

Code examples:

Invoke the method:

instance.one( 'beforeSort', function( evt, ui ){

});

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" );

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" );

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 );

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} );

It gets the data for current page. In case of grouped rows data, this method returns all rows on current page.

Code examples:

Invoke the method:

//get data for current page.
var data = $( selector ).pqGrid( "pageData" );

Returns the widget instance of pager.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

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" );

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" );

Returns range instance that represents a collection of rectangular areas or regions in the grid and helps in collective manipulation of the cells lying within the range.

    var range = grid.Range( { r1: 2 } )  //range of single row.
    var range = grid.Range( { r1: 2, r2: 4 } ) //range of 3 rows.
    var range = grid.Range( { r1: 2, rc: 2 } ) //range of 2 rows.
    var range = grid.Range( { r1: 2, c1: 3 } ) //range of single cell.
    var range = grid.Range( { c1: 2, c2: 4 } ) //range of 3 columns.
    var range = grid.Range( { c1: 2, cc: 4 } ) //range of 4 columns.
    var range = grid.Range( { r1: 2, c1: 2, r2: 5, c2: 4 } ) //block range.
    var range = grid.Range( [{ r1: 2, c1: 2, r2: 5, c2: 4 }, { r1: 7, c1: 2, r2: 3, c2: 4 }] ) //collection of block range.

Following methods can be invoked on the Range instance.

//setter
grid.Range({r1:0, c1:0, rc:2, cc:2}).value( ['a', 1, 'b', 2] );

//getter
var val = grid.Range({r1:0, c1:0, rc:2, cc:2}).value();
returns ['a', 1, 'b', 2]

• r1
  Type: Integer
  rowIndx of first row
• c1
  Type: Integer
  colIndx of first column
• r2
  Type: Integer
  rowIndx of last row
• c2
  Type: Integer
  colIndx of last column
• rc
  Type: Integer
  number of rows in the range
• cc
  Type: Integer
  number of columns in the range

Code examples:

Invoke the method:

It's used to refresh the whole 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.

• header
  Type: boolean
  refresh the header too with default true.

Code examples:

Invoke the method:

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

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' } );

Refreshes colModel in pqGrid.

• colModel
  Type: Array
  Optional parameter to replace the colModel of grid.

Code examples:

Invoke the method:

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

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} );

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" );

Refreshes the column headers.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

Refreshes a single specified header filter, mostly useful to create cascade filtering.

• 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:

grid.refreshHeaderFilter({dataIndx: 'ShipRegion'});

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} );

It can be used to refresh toolbar when toolbar items are changed after initialization.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

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( "refreshView" );

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'}
);

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.
• refresh
  Type: Boolean
  Optional parameter with default value of true.

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'}
);

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'}
);

Clears sorting, filtering and grouping in grid depending upon the passed parameter. One or more parameters can be passed.

• filter
  Type: Boolean
  reset filter state
• group
  Type: Boolean
  resert group state
• sort
  Type: Boolean
  reset sort state

Code examples:

Invoke the method:

//resets grouping and filtering in the grid.
$( selector ).pqGrid( "reset", { group: true, filter: true } );

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'} );

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} );

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} );

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} );

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" );

Saves the current state of grid as string in browser local storage (optional) and returns the state as string.
It saves the columns information i.e., column order, widths, etc, sorted columns, paging, filtering & grouping.
It doesn't save the data of grid.
The state string returned by this method can even be saved in a database.

• save
  Type: Boolean
  optional parameter with default value of true. State is not saved in local storage if this is false.

Code examples:

Invoke the method:

//save the current state of grid.
var state = $( selector ).pqGrid( "saveState" );

Scrolls the view horizontally and/or vertically (if required) to make the cell visible in viewport and calls the callback function (optional) when scroll is complete. Either of rowIndx/rowIndxPage and colIndx/dataIndx can be provided.

• 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.
• fn
  Type: Function
  Callback function.

Code examples:

Invoke the method:

$( selector ).pqGrid( "scrollCell", { rowIndx: 2, dataIndx: "lastname" } );

Scrolls the view horizontally (if required) to make the column visible in viewport and calls the callback function (optional) when scroll is complete. 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.
• fn
  Type: Function
  Callback function.

Code examples:

Invoke the method:

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

Scrolls the view vertically (if required) to make the row visible in viewport and calls the callback function (optional) when scroll is complete.

• rowIndxPage
  Type: Integer
  Zero based index of the row on current page.
• fn
  Type: Function
  Callback function.

Code examples:

Invoke the method:

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

Scrolls the view to given value horizontally (if required) and calls the callback function (optional) when scroll is complete. Returns current horizontal position if no parameter is passed.

• x
  Type: Integer
  Value in pixels.
• fn
  Type: Function
  Callback function.

Code examples:

Invoke the method:

$( selector ).pqGrid( "scrollX", 200 );

Scrolls the view to given value horizontally and/or vertically (if required) and calls the callback function (optional) when scroll is complete.

• x
  Type: Integer
  Value in pixels.
• y
  Type: Integer
  Value in pixels.
• fn
  Type: Function
  Callback function.

Code examples:

Invoke the method:

$( selector ).pqGrid( "scrollXY", 100, 200 );

Scrolls the view to given value vertically (if required) and calls the callback function (optional) when scroll is complete. Returns current vertical position if no parameter is passed.

• y
  Type: Integer
  Value in pixels.
• fn
  Type: Function
  Callback function.

Code examples:

Invoke the method:

$( selector ).pqGrid( "scrollY", 200 );

Used to search one or more fields in a row. Returns an array of objects containing rowIndx and rowData of the matching rows. It returns only the first match when first is true.

• first
  Type: Boolean
  Find first match only.
• row
  Type: Object
  object containing one or more fields of data.

Code examples:

Invoke the method:

//search row with id: 5
var rowList = $( selector ).pqGrid( "search", {
    row: { id : 5 }
});
var rowIndx = rowList.rowIndx;

var Sel = grid.Selection();

Following methods ( in addition to the Range methods ) can be invoked.

var selArray = Sel.getSelection();

var isSelected = Sel.isSelected({rowIndx: 0, colIndx: 2});

Sel.removeAll();

Sel.selectAll({ all: true });

• This method does not accept any arguments.

Code examples:

Invoke the method:

            //merge all cells lying within selection.
            grid.Selection().merge();
        

Returns row selection instance. Also see selectionModel options.

    var sel = grid.SelectRow();

Following methods can be invoked on the instance.

• This method does not accept any arguments.

Code examples:

Invoke the method:

//add 3rd row to selection
sel.add( {rowIndx: 2});

//add 2nd, 3rd & 7th row to selection
sel.add(rows: [ { rowIndx: 1 },{ rowIndx: 2}, {rowIndx: 6} ] });

//removes 10th row from selection.
sel.remove({rowIndx: 9});

//remove 2nd, 3rd & 7th row from selection
sel.remove({rows: [ { rowIndx: 1 },{ rowIndx: 2}, {rowIndx: 6} ] });

//remove all row selections
sel.removeAll();

//Find whether 3rd row is selected.
var isSelected = sel.isSelected({rowIndx: 2 });

//Get all row selections
var selectionArray = sel.getSelection();

Selects a row or cell depending upon the parameters. It scrolls the cell or row into viewport ( if required ) and sets focus on it in addition to selection. It deselects everything if null is passed as parameter. It doesn't set the focus on row/cell when focus is false. Grids calls the callback function (optional) when scroll is complete.

• 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.
• fn
  Type: Function
  Callback function.

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 );

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" );

Added in v3.0.0, this method sorts data in the grid. See sortModel option for description of the various parameters.

When no parameter is passed, it merely refreshes the sorting with the existing options stored in sortModel.

To remove all sorting, sorter can be passed as an empty array.

• single
  Type: Boolean
  Optional parameter with default value of sortModel.single.
• skipCustomSort
  Type: Boolean
  Optional parameter to skip custom sorting used by row grouping. In UI when ctrl/meta key is pressed while click on header cell for sorting, this parameter value is passed as true by grid. (v5.6.0)
• sorter
  Type: Array
  Optional parameter with default value of sortModel.sorter.

Code examples:

Invoke the method:

$( selector ).pqGrid( "sort", {
        sorter: [ { dataIndx: 'products', dir: "up" } ]
});

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" );

Returns the toolbar DOM node wrapped in jQuery object.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

Returns toolpanel instance. Also see toolPanel options.

Following methods can be invoked on the instance.

• This method does not accept any arguments.

Code examples:

Invoke the method:

 var tp = $( selector ).pqGrid( "ToolPanel" );
tp.show();

Returns treegrid instance. Also see treeModel options.

    var Tree = grid.Tree();

Word "Node" is being used in the Tree API which is same as rowData. Nodes contain some meta data:

1. pq_level: Level of the node beginning from root level nodes having pq_level = 0.
2. pq_close: collapsed/expanded state of a parent node expressed as truthy/falsey values.

Header checkbox support is added in v5.2.0

Following methods can be invoked on the instance.

    Tree.addNodes( [
        { id: 100, parentId: 1, ... },
        { id: 101, parentId: 1, ... },
        { id: 102, parentId: 100, ... },
        ...
    ] );

    Tree.addNodes( [
        { id: 100, ... },
        { id: 101, ... },
        ...
    ], Tree.getNode(1) );

    //collapse nodes with id:1 and id:5
    Tree.collapseNodes( [
        Tree.getNode( 1 ),
        Tree.getNode( 5 )
    ] );
    //collapse nodes with rowIndx:1 and rowIndx:3
    Tree.collapseNodes( [
        grid.getRowData( {rowIndx: 1} ),
        grid.getRowData( {rowIndx: 3} )
    ] );

    //Example:
    Tree.eachChild( Tree.getNode( 1 ), function( node ){

    } );

    //Example:
    Tree.eachParent( Tree.getNode( 1 ), function( node ){

    } );

    //expand nodes with id:1 and id:5
    Tree.expandNodes([
        Tree.getNode(1),
        Tree.getNode(5)
    ]);
    //expand nodes with rowIndx:1 and rowIndx:3
    Tree.expandNodes( [
        grid.getRowData( {rowIndx: 1} ),
        grid.getRowData( {rowIndx: 3} )
    ] );

    //expand all nodes leading to node with id: 10
    Tree.expandTo( Tree.getNode( 10 ) );

    //expand all nodes leading to node with rowIndx: 12
    Tree.expandTo( grid.getRowData( {rowIndx: 12} ) );

    var nodes = Tree.getCheckedNodes();

    var level = Tree.getLevel( node );

    var node = Tree.getNode( id );

    var node = Tree.getParent( childnode );

    var nodes = Tree.getRoots( );

    var node = Tree.getSummary( node );

    var bool = Tree.isAncestor( childNode, ancestorNode );

var isCollapsed = Tree.isCollapsed( getNode( 1 ) );

var isFolder = Tree.isFolder( getNode( 1 ) );

    Tree.moveNodes( nodes, parentNew );

//Example: create tree after initialization.
Tree.option( {dataIndx: 'name' });

• This method does not accept any arguments.

Code examples:

Invoke the method:

 var treegrid = $( selector ).pqGrid( "Tree" );
treegrid.expandAll();

Used to update one or more fields in a row or mutliple rows.
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 to the history or not depending upon value of the parameter.
checkEditable parameter affects the checks for editability of row and cells.
By default the view is refreshed by this method which can be prevented by passing refresh parameter as false to this method.

Change Log: v3.2.0:

1. rowList parameter is added to support multiple row updates.
2. row parameter is renamed to newRow, however it's backward compatible.

• rowIndx
  Type: Integer
  Zero based index of the row.
• newRow
  Type: Object
  Object holding the modified data of the row.
• rowList
  Type: Array
  Array of objects {rowIndx: rowIndx, newRow: newRow}.
• track
  Type: Boolean
  Optional parameter with default value of trackModel.on.
• 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.
• refresh
  Type: Boolean
  Optional parameter with default value of true.

Code examples:

Invoke the method:

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

//update multiple rows at once.
$( selector ).pqGrid( "updateRow", {
    rowList: [
        { rowIndx: 2, newRow: { 'ProductName': 'Cheese', 'UnitPrice': 30 }},
        { rowIndx: 5, newRow: { 'ProductName': 'Butter', 'UnitPrice': 25 }}
    ]
});

Returns a jQuery object containing the pqGrid.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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