Adds one or more 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.
grid.addClass( {rowIndx: 2, cls: 'pq-delete pq-edit'} );

//Add a class 'pq-delete' to 'profits' field in 3rd row
grid.addClass( {rowIndx: 2, dataIndx: 'profits', cls: 'pq-delete'} );

(v8.7.0) Adds one or more classes (separated by empty space) to any head cell including filter row cells.

• ri
  Type: Integer
  Zero based index of the row in header.
• cls
  Type: String
  Name of a single or more classes separated by space.
• colIndx
  Type: integer
  Zero based index of column.

Code examples:

Invoke the method:

//Add class to a cell in header.
grid.addClassHead( {ri: 0, colIndx: 4, cls: 'mycls'} );

//Add a class to a cell in header filter row
grid.addClassHead( {ri: 1, colIndx: 3, cls: 'somecls'} );

(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.
grid.addRow(
    { newRow: {id: 20, product: 'Colgate' } }
);

//Insert an empty row at rowIndx : 3
grid.addRow(
    { newRow: {}, rowIndx: 3 }
);

//Insert multiple rows at once.
grid.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.
grid.attr( {rowIndx: 2, attr: { title: 'Row title' } );

//get style attribute of 3rd row.
var style = grid.attr( {rowIndx: 2, attr: 'style' } ).attr;

//Add a cell title
grid.attr(
        {rowIndx: 2, dataIndx: 'profits', attr: { title: 'cell title' } }
);

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

Note that this is used only for non-heirarchical checkboxes. For hierarchy checkboxes like that in case of treegrid and row grouping, use checkbox related methods of grid.Tree() and grid.Group().

    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 in case of hierarchy checkboxes.

• dataIndx
  Type: String
  field name of column which displays the checkbox UI.

Code examples:

Invoke the method:

Checkbox.checkAll();
            

Collapse the grid.

• This method does not accept any arguments.

Code examples:

Invoke the method:

grid.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.
grid.commit();

//commit all updated records.
grid.commit( { type: 'update' } );

//commit updated records with matching rows only.
grid.commit( { type: 'update', rows: rows } );

//commit added records only and update the primary key of added records from rows.
grid.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.
grid.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.
grid.data( {rowIndx: 2, data: { key1: value1, key2: value2 } );

//get whole meta data of 3rd row.
var data = grid.data({rowIndx: 2} ).data;

//get partial meta data of 3rd row with key name 'key1'.
var value1 = grid.data({rowIndx: 2, data: 'key1'} ).data;

//Add meta data to a cell
grid.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.
grid.deleteRow({ rowIndx: 4 } );

//Delete multiple rows.
grid.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:

grid.destroy( );

(v8.7.0) Returns row detail or hierarchy object instance.

Following methods can be invoked on the Detail instance.

var rip = Detail.getRip( $ele_in_detail.closest('.pq-detail')[0] );

Detail.rowCollapse({rowIndx: 3});

Detail.rowExpand({rowIndx: 3});

Detail.toggleAll();

• This method does not accept any arguments.

Code examples:

Invoke the method:

var Detail = grid.Detail();

Disables the pqGrid.

Code examples:

Invoke the method:

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

grid.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.
grid.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.
grid.editFirstCellInRow( { rowIndx: 2 } );

Expand the grid.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

grid.exportCsv( { url: "/export/csv" } );

This method is convenient wrapper over exportData method with default value of xlsx format. It exports the data in the grid to js workbook or spreadsheet format file with xlsx extension. Please refer to the parameters applicable for xlsx format to exportData method.

Code examples:

Invoke the method:

grid.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 strings in the spreadsheet. Entries in the array correspond to the parameters of the native js String replace method i.e., [ /Hello World/g, "Hello Globe"] would replace every occurence of "Hello World" with "Hello Globe" in the cells of spreadsheet.
• separator
  Type: String
  Applicable to csv format. It specifies the separator between the fields, default is ",".
• 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.
grid.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();

(v7.2.0) Returns Formulas instance that's used to manipulate Excel formulas.

    var F = grid.Formulas();

Following methods can be invoked on the Formulas instance.

• This method does not accept any arguments.

Code examples:

Invoke the method:

var ret = grid.Formulas().exec( "SUM(A1:H1)" );

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 = grid.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 = grid.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 = grid.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 = grid.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 = grid.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 = grid.getChanges( );
//Format of js object returned by this method is as below:
{
    updateList: [rowData1, rowData2..],
    addList: [rowData1, rowData2..],
    deleteList: [rowData1, rowData2..],
    oldList: [rowData1, rowData2..]
}

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

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 = grid.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 = grid.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 = grid.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 = grid.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 = grid.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 = grid.getEditCellData( );

(v7.2.0)Used to get indices of a header cell. Returns an object containing following properties:

{
    ri: number
    column: column
    colIndx: number
    filterRow: boolean
}

• th
  Type: Element
  Header cell

Code examples:

Invoke the method:

var obj = grid.getHeadIndices( th );

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 = grid.getInstance( ).grid;

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

(v8) Helps get index of next visible column.

• ci
  Type: Integer
  column index

Code examples:

Invoke the method:

ci = grid.getNextVisibleCI( ci );

(v8) Helps get index of next visible row.

• rip
  Type: Integer
  row index

Code examples:

Invoke the method:

rip = grid.getNextVisibleRIP( rip );

(v8) Helps get index of previous visible column.

• ci
  Type: Integer
  column index

Code examples:

Invoke the method:

ci = grid.getPrevVisibleCI( ci );

(v8) Helps get index of previous visible row.

• rip
  Type: Integer
  row index

Code examples:

Invoke the method:

rip = grid.getPrevVisibleRIP( rip );

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 = grid.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 = grid.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 = grid.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 = grid.getRowsByClass( { cls : 'pq-delete' } );

//get first row having the above class.
var rowData = arr[0].rowData;
var rowIndx = arr[0].rowIndx;

(v6.0.0) gets previously saved state of a grid in localStorage.

• 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 = grid.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.
grid.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 = grid.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 = grid.hasClass(
    {rowIndx: 2, cls: 'pq-delete'}
);

//Check whether 3rd row & 'profits' field has class 'pq-delete'.
var hasClass = grid.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:

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

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

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

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

grid.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.
grid.isValid( { rowIndx: 3, dataIndx: "profits", value: 12.45 } );

//validate 4th row.
grid.isValid( { rowIndx: 3 } );

//validate a row whose reference (rowData) is known.
grid.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 = grid.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 = grid.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 = grid.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:

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

grid.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 = grid.pageData( );

Returns the widget instance of pager.

• This method does not accept any arguments.

Code examples:

Invoke the method:

 var pager = grid.pager( );

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

Code examples:

Invoke the method:

//paste data.
grid.paste( );

(v7.2.0) Returns Pic instance that's used to manipulate floating pictures in the grid.

    var Pic = grid.Pic();

Following methods can be invoked on the Pic instance.

• This method does not accept any arguments.

Code examples:

Invoke the method:

grid.Pic().remove( 3 );

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
grid.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( "2:2" )  //range of single row.
    var range = grid.Range( "2:4" ) //range of 3 rows.
    var range = grid.Range( "C2" ) //range of single cell.
    var range = grid.Range( "B2:D5" ) //block range.
    var range = grid.Range( "A2,B2:D5,2:4" ) //collection of ranges.

    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]

• range
  Type: string
  (v8.2.0) range in spreadsheet format i.e., "A4:D10"
• 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:

range.align( "center" )

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:

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

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

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

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

grid.refreshDataAndView( );

Refreshes the column headers.

• This method does not accept any arguments.

Code examples:

Invoke the method:

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

grid.refreshRow( {rowIndx:21} );

(v8.4.0) Refresh summary view.

• This method does not accept any arguments.

Code examples:

Invoke the method:

grid.refreshSummary( );

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:

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

grid.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.
grid.removeAttr(
    {rowIndx: 2, attr: 'title style'}
);

//remove title from 'profits' field in 3rd row.
grid.removeAttr(
    {rowIndx: 2, dataIndx: 'profits', attr: 'title'}
);

Removes one or more 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.