Adds one or more classes (separated by empty space) to a row or cell. Either rowData or rowIndx can be passed.
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.
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.
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.
beforeValidate
and change
events are fired.
Change Log: v3.2.0:
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.
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.
Method | Parameters | Returned Type | Description |
---|---|---|---|
checkAll | Check all checkboxes. | ||
checkNodes | nodes(array) | checks the specified nodes. | |
getCheckedNodes | all? boolean | Array | Returns array of checked rows, includes checked rows from un-filtered data when all is true. |
isHeadChecked | boolean | Returns true, false or null (indeterminate state) depending upon checkbox state in header cell. | |
unCheckAll | un check all checkboxes. | ||
unCheckNodes | nodes(array) | un checks the specified nodes. |
Code examples:
Invoke the method:
Checkbox.checkAll();
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.
Method | Parameters | Returned Type | Description |
---|---|---|---|
add | columns: Array |
(v7.0.0) Inserts one or more adjacent columns to the colModel at passed index or ci.
It can add parent level or nested level columns depending upon passed cm.
It appends new columns when ci is null/undefined.
Parent level columns are added when cm is null/undefind.
source is a string value to help identify the origin of method call in events. beforeColAdd and colAdd events are fired.
|
|
alter | callback:() => any | apply property changes to any column(s) within the callback. | |
each | callback:(column) => any, cm?: colModel | Calls callback on each column and children columns recursively in gcm (default) or in cm when latter is passed as 2nd parameter | |
find | callback:(column) => boolean, cm?: colModel | object (column) | used to find a column recursively in gcm ( default ) or in cm. Return true within the callback when column is found. |
hide | ui: { diHide?: Array |
(v5.2.0) Array of dataIndx of columns to hide and display. beforeHideCols and hideCols events are fired. | |
move | num: number, fromindx: number, toindx: number, fromParent?: column, toParent?: column, source?: string | Array (column[]) | (v7.1.0) Move columns from colModel of parent column `fromParent` at index `fromindx`
to colModel of parent column `toParent` at index `toindx`.
There is no need to pass parent column of top level columns.
Returns moved columns.
`toindx` is calculated before removal of dragged column(s). source is a string value to help identify the origin of method call in events. beforeColMove and colMove events are fired during the process.
|
reduce | callback:(column) => object | void, cm?: colModel | Array (colModel) | (v5.3.0) used to reduce colModel recursively into a new set of colModel. |
remove | num: number, ci: number, cm?: colModel, source?: string | (v7.0.0) Removes one or more adjacent columns from the colModel at passed index or ci.
It can remove parent or nested level columns depending upon passed cm.
Parent level columns are removed when cm is not passed.
source is a string value to help identify the origin of method call in events. beforeColRemove and colRemove events are fired.
|
|
reverse | (v6.2.4) reverse colModel array recursively. |
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.
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 } );
(v9.0.0) Returns context menu object instance for manipulation of the context menu.
Following methods can be invoked on the Context instance.
Method | Parameters | Description |
---|---|---|
showMenu | of: any, ui: { at: string, my: string, type: string} | Displays the context menu. of Which element to position the context menu against.
It can be Element or jQuery or Event.
|
Code examples:
Invoke the method:
grid.Context().showMenu( element, { type: 'custom', my: "right top", at: "right bottom" })
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.
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.
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.
beforeValidate
and change
events are fired.
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.
Method | Parameters | Description |
---|---|---|
getRip | DOM node of the detail |
Gets the rowIndxPage of the row from current detail view.
var rip = Detail.getRip( $ele_in_detail.closest('.pq-detail')[0] ); |
rowCollapse | rowIndx |
Collapse the detail view of a particular row.
Detail.rowCollapse({rowIndx: 3}); |
rowExpand | rowIndx |
Expand the detail view of a particular row.
Detail.rowExpand({rowIndx: 3}); |
toggleAll |
Toggles the details of all rows between expanded and collapsed state.
Detail.toggleAll(); |
Code examples:
Invoke the method:
var Detail = grid.Detail();
(v6.0.0) Returns Drag instance of grid with draggable rows.
Method | Parameters | Description |
---|---|---|
addAcceptIcon | Add accept icon to the draggable helper | |
addIcon | icon: string | Add custom icon to the draggable helper |
addRejectIcon | Add reject icon to the draggable helper | |
getUI | Returns an object as below where
{ nodes: Array |
|
grid | Returns grid instance associated with draggable |
Code examples:
Invoke the method:
var Drag = grid.Drag();
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.
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.
Code examples:
Invoke the method:
//edit first editable cell in 3rd row. grid.editFirstCellInRow( { rowIndx: 2 } );
This method is shorthand for grid.exportData({ format: 'csv }) Other parameters can be added same as exportData method.
Code examples:
Invoke the method:
grid.exportCsv( { render: true } );
This method is shorthand for grid.exportData({ format: 'xlsx' }) Other parameters can be added same as exportData method.
Code examples:
Invoke the method:
grid.exportExcel( { sheetName: "pqGrid", render: true } );
Updated in v9.0.0,
It exports the grid data into specified format ( passed as parameter ) e.g., 'csv', 'htm', 'pdf', 'xlsx', 'wb', 'json', 'js'
format: 'js' is added in v9.0.0 that returns a javascript object which can be customized and finally exported to 'html', 'pdf' or 'csv' with pq.export(*) methods.
format: 'wb' returns intermediate workbook object.
Different parameters can be passed and are used differently depending upon the format of export.
Return data type depends upon format parameter and usage of tabs in the grid:
format | Tabs | Return type |
---|---|---|
csv, htm | no | plain string |
csv, htm | yes | object
object: { sheets: { name: string //name of tab hidden: boolean content: string, pics: { width: number, height: number, image: string } [ ] //v10.0.0 } [ ] } |
no | object (document definition of pdfmake table)
object: { headerRows: number body: { alignment: string, border: boolean [ ], borderColor: string [ ], colSpan: number, link: string, rowSpan: number, text: string, ... } [ ] [ ] } |
|
yes | object
object: { sheets: { name: string //name of tab hidden: boolean content: object //document definition of pdfmake table. pics: { width: number, height: number, image: string } [ ] //v10.0.0 } [ ] } |
|
js | no | object
object: { head: { alignment: string, colSpan: number, css: string, rowSpan: number, text: string, valign: string } [ ] [ ] body: { alignment: string, colSpan: number, css: string, html: string, link: string, rowSpan: number, text: string, valign: string } [ ] [ ] } |
js | yes | object
object: { sheets: { name: string //name of tab hidden: boolean content: object //same as js format without tabs. } [ ] } |
xlsx | no / yes | Blob |
xlsx | no / yes | base64 string when type parameter to the method is 'base64' |
wb | no / yes | object
object: { activeId?: number //0 based index of active sheet sheets: { name: string //name of tab columns: worksheetColumn [ ] frozenRows?: number frozenCols?: number /**number of header rows in rows. */ headerRows?: number hidden?: boolean mergeCells?: string [ ] pics?: object [ ] rows: worksheetRow [ ] } [ ] } |
Parameter | Arguments | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
eachCell | cell, ci, ri, column, rowData | This callback is called for each exported cell from grid body.
Following cell properties can be updated in this callback depending upon the export format.
|
||||||||||
eachCellHead | cell, ci, ri, column | This callback is called for each exported cell from grid head.
Following cell properties can be updated in this callback depending upon the export format.
|
||||||||||
eachRow | row, ri, rowData, rows | This callback is called for each exported row from grid body.
Following row properties can be updated in this callback depending upon the export format.
|
||||||||||
eachRowHead | row, ri | This callback is called for each exported row from grid head.
Following row properties can be updated in this callback depending upon the export format.
|
||||||||||
eachCol | col, ci, column | This callback is called for each exported column from grid head in xlsx format
Following col properties can be updated in this callback: align, bgColor, bold, border, color, hidden, italic, font, fontSize, format, underline, valign, wrap |
Method | Parameters | Description |
---|---|---|
exec | String | This method executes Excel formula and returns its value. |
computeAll | This method executes all Excel formulas in a worksheet. |
Code examples:
Invoke the method:
var ret = grid.Formulas().exec( "SUM(A1:H1)" );
(v9.0.0) This method freezes first visible column.
Code examples:
Invoke the method:
grid.freezeFirstCol();
(v9.0.0) This method freezes top visible row.
Code examples:
Invoke the method:
grid.freezeTopRow();
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.getCellFilter( { 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 }
.
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.
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
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.
Code examples:
Invoke the method:
var colIndx = grid.getColIndx( { dataIndx: "profits" } );
Used to get column whose dataIndx is known.
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.
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.
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.
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.
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.
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.
Code examples:
Invoke the method:
var dataCell = grid.getEditCellData( );
Gets the coordinates of focused cell in form of object with properties:
rowIndxPage
, colIndx
Returns null if no cell is focused.
Code examples:
Invoke the method:
var obj = grid.getFocus( );
Gets the coordinates of focused header cell in form of object with properties:
ri
, colIndx
Returns null if no header cell is focused.
Code examples:
Invoke the method:
var obj = grid.getFocusHead( );
(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 }
Code examples:
Invoke the method:
var obj = grid.getHeadIndices( th );
(v9.0.0) Note: this method has been replaced by instance method. Gets the instance of grid for direct access to grid API. Returns an object { 'grid': grid }
Code examples:
Invoke the method:
var grid = $grid.pqGrid( 'getInstance' ).grid; //any method can be called on grid directly var $tr = grid.getRow( { rowIndx: 2 });
(v8) Helps get index of next visible column.
Code examples:
Invoke the method:
ci = grid.getNextVisibleCI( ci );
(v8) Helps get index of next visible row.
Code examples:
Invoke the method:
rip = grid.getNextVisibleRIP( rip );
(v8) Helps get index of previous visible column.
Code examples:
Invoke the method:
ci = grid.getPrevVisibleCI( ci );
(v8) Helps get index of previous visible row.
Code examples:
Invoke the method:
rip = grid.getPrevVisibleRIP( rip );
(v10.0.0) Returns array of image objects in the grid with every image object having following properties:
{ width: number, height: number, image: string //base64 encoded value of the image data. }It's useful while exporting to pdf or html.
Code examples:
Invoke the method:
var pics = grid.getPics( );
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.
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.
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.
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 }.
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.
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.
Code examples:
Invoke the method:
var obj = grid.getViewPortIndx( ), initV = obj.initV, finalV = obj.finalV, initH = obj.initH, finalH = obj.finalH;
(v9.1.0) Returns XHR instance used by grid for remote Ajax interactions.
Code examples:
Invoke the method:
var xhr = grid.getXHR();
Navigate to page mentioned in page parameter or page number calculated from rowIndx. Either of the parameters can be passed.
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
Method | Parameters | Description |
---|---|---|
addGroup | dataIndx ( string or integer ), indx ( integer ) | Adds a new level of grouping at the specified indx.
Appends it at the end when no indx is specified.
groupChange event is fired during the process. groupOption is also fired (v5.4.0).
Group.addGroup( "company" ); //add new group at index 1. Group.addGroup( "sport", 1 ); |
addNodes | nodes: any[], parent: any, indx?: number | (v6.0.0) Inserts new nodes to a parent node at an optional index.
New nodes are appended to the parent when no indx is provided.
Undo is not supported and |
checkAll | Check all checkboxes.
beforeCheck and check events are fired during the process.
|
|
checkNodes | nodes(array) | checks the specified nodes.
beforeCheck and check events are fired during the process.
|
collapse | level ( integer ) | Collapses a specific grouping level. Default value of level is 0.
beforeGroupExpand and group events are fired during the process.
//collapse 1st level. Group.collapse( 1 ); |
collapseAll | level = 0 ( integer ) | Collapses all levels of grouping after specified level. Default value of level is 0.
beforeGroupExpand and group events are fired during the process.
//collapse all levels. Group.collapseAll(); //collapse all levels after 1st level. Group.collapseAll( 1 ); |
collapseTo | address ( string ) | Collapses the node at provided address of specific group node.
group event is fired during the process.
//expand 10th node of 2nd level in 5th node of 1st level. Group.expandTo( '4,9' ); |
deleteNodes | nodes: any[] | (v6.0.0) Deletes an array of nodes.
Undo is not supported and |
expand | level ( integer ) | Expand a specific grouping level. Default value of level is 0.
beforeGroupExpand and group events are fired during the process.
//expand 1st level. Group.expand( 1 ); |
expandAll | level = 0 ( integer ) | Expands all levels of grouping after specified level. Default value of level is 0.
beforeGroupExpand and group events are fired during the process.
//expand all levels. Group.expandAll(); //expand all levels after 1st level. Group.expandAll( 1 ); |
expandTo | address ( string ) | Expands upto address of specific group node.
group event is fired during the process.
//expand 10th node of 2nd level in 5th node of 1st level. Group.expandTo( '4,9' ); |
getCheckedNodes | all?: boolean |
returns all the checked nodes as an array, includes checked rows from un-filtered data when all is true. var nodes = Group.getCheckedNodes(); |
getChildren | node?: any | (v6.0.0) returns an array containing the children nodes of a passed node. (v7.4.0) returns root nodes when node is not passed. |
getChildrenAll | node: any | (v6.0.0) returns an array containing all the children, grandchildren ( and so on ..) nodes of a passed node. |
getNode | id |
(v6.0.0) Returns node when id of the node is known. Node is same as rowData. var node = Group.getNode( id ); |
getParent | node |
(v6.0.0) Returns parent node of specified node. var node = Group.getParent( childnode ); |
getSummary | node |
(v6.0.0) Returns summary node of the passed node. var node = Group.getSummary( node ); |
isAncestor | childNode, ancestorNode |
(v6.0.0) Checks whether a node is ancestor of another node. Returns boolean value. var bool = Group.isAncestor( childNode, ancestorNode ); |
isFolder | node: any |
(v6.0.0) Checks whether a node is parent node. Returns boolean value. var bool = Group.isFolder( node ); |
isOn | Returns true if row grouping is turned on on at least single level. | |
moveNodes | nodes: any[], parent: any, indx?: number |
(v6.0.0) Remove nodes from old parents and assign them a new parent by appending / inserting
nodes to children of new parent.
If new parent is same as old parent, then nodes are rearranged under that parent. Nodes are appended to new parent if indx is not passed Undo is not supported and Group.moveNodes( nodes, parentNew ); |
isHeadChecked | Returns true, false or null (indeterminate state) depending upon checkbox state in header cell. | |
option | options ( Object ) | An important method, it updates any number of groupModel options together after initialization.
This method is used by toolPanel to update groupModel options.
groupOption event ( added in v5.1.0) is fired during the process.
//group by ShipCountry and keep it collapsed. Group.option({ dataIndx: ['ShipCountry'], collapsed: [ true ] }); |
removeGroup | dataIndx ( string or integer ) | Removes existing level of grouping.
groupChange event is fired during the process. groupOption is also fired (v5.4.0).
Group.removeGroup( "company" ); |
unCheckAll | un check all checkboxes.
beforeCheck and check events are fired during the process.
|
|
unCheckNodes | nodes(array) | unchecks the specified nodes.
beforeCheck and check events are fired during the process.
|
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.
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.
Code examples:
Invoke the method:
grid.hideLoading( );
Returns history instance.
var history = grid.History();
Following methods can be invoked on the history instance.
Method | Returned Type | Description |
---|---|---|
canRedo | boolean | Can further redo action can be performed? |
canUndo | boolean | Can further undo action can be performed? |
redo | repeats add, update or delete operations which have been previously reversed. Fires history event. | |
reset | clears all history without making any change in current data in grid. Fires history event. | |
undo | reverses add, update or delete operations. Fires history event. |
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.
Code examples:
Invoke the method:
history.undo();
Imports data from a json workbook into grid.
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' } ] } ] } ] } })
(v9.0.0) This method replaces the getInstance method. Returns the instance of grid for direct access to grid API.
Code examples:
Invoke the method:
var grid = $grid.pqGrid( 'instance' ); //any method can be called on grid directly var $tr = grid.getRow( { rowIndx: 2 });
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.
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.
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.
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.
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.
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.
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.
refeshDataAndView()
unless refresh parameter is false.
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.
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.
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.
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.
Code examples:
Invoke the method:
instance.one( 'beforeSort', function( evt, ui ){ });
Gets an object containing key/value pairs representing the current pqGrid options hash.
Code examples:
Invoke the method:
var options = grid.option( );
Gets the value currently associated with the specified optionName.
Code examples:
Invoke the method:
var disabled = grid.option( "disabled" );
Sets the value of the pqGrid option associated with the specified optionName.
Code examples:
Invoke the method:
grid.option( "disabled", true );
Sets one or more options for the Grid.
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.
Code examples:
Invoke the method:
var pager = grid.pager( );
It pastes the copied cells / rows within the grid or from one grid to another. beforePaste and paste events are fired during the process.
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.
Method | Parameters | Description |
---|---|---|
add | name: string, src: string, from: array, to: array, cx: number, cy: number | Adds a floating image to the grid. See pics option for more details of the parameters. |
getId | img: HTMLElement | Returns id of the passed image node |
remove | id: number | Removes image from the grid. It supports undo and redo. |
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.
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.
Range constructor can be called either in object or string format.
(v10.0.0) css style can be passed to constructor in object format
var range = grid.Range( { r1: 2, r2: 4, style: 'background-color:rgba(255,0,0,0.2);border:1px solid red;' } ) 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.
Method | Parameters | Returned Type | Description |
---|---|---|---|
address | Array |
It returns an array of range objects having properties r1, c1, r2, c2, type where r1 is rowIndx of the initial row,
r2 is rowIndx of last row, c1 is colIndx of first column, c2 is colIndx last column in the range and type is a string having
these possible values:
row ,
cell ,
column ,
block
|
|
addressLast | Object |
It returns last range object in collection of ranges having properties r1, c1, r2, c2, type where r1 is rowIndx of initial row,
r2 is rowIndx of last row, c1 is colIndx of first column, c2 is colIndx of last column in the range and type is a string having
these possible values:
row ,
cell ,
column ,
block
|
|
add | obj: object | It adds a collection of cells { r1: r1, c1: c1, r2: r2, c2: c2 } to an existing range. There should not be any overlap or duplicate in the new collection with existing collections in the range. | |
addCol | right?: boolean, col?: object | (v9.0.0) It adds columns either to the left of the selection or to the right of it when 'right' parameter is true. Number of added columns is equal to number of columns in the selection. Properties of added columns are copied from col parameter. | |
addRow | below?: boolean, row?: object | (v9.0.0) It adds rows either above the selection or below it when 'below' parameter is true. Number of added rows is equal to number of rows in the selection. Properties of added rows are copied from row parameter. | |
align | str?: string | String | (v7.0.0) It defines the horizontal alignment ( 'left', 'center' or 'right' ) of all cells in the range. It returns horizontal alignment of first cell in the range when no parameter is passed. |
border | type: string, style: string, color: string | (v9.0.0) It adds or updates ( if already existing ) borders to the cells in the range.
type values can be 'all', 'outer', 'inner', 'none', 'vertical', 'horizontal', 'top', 'right', 'bottom', 'left'
style values can be "1px solid", "2px solid", "3px solid", "1px dotted", "1px dashed", "3px double"
color can be any hexadecimal color.
grid.Range( "A1:D2" ).border( "inner", "1px dashed", "#007700" ); |
|
clear | It clears or removes the contents of cells lying within the range. | ||
comment | text?: string | String | (v7.0.0) It defines the comment of all cells in the range. It returns comment of first cell in the range when no parameter is passed. |
copy | obj?: {dest?: object, render?: boolean, header?: boolean} | It copies the contents of cells lying within the range.
The copied content can be used later on with paste.
The copied content is immediately pasted to destination range when dest parameter is specified.
e.g., grid.Range( { c1: 0 } ).copy( { dest: { c1: 2 } ) copies the content of 1st column to the 3rd column.
Copied cells have formatted /rendered values when
(v7.3.0) header cells are included in copied data when |
|
count | Integer | It returns the number of cells within the range. | |
cut | obj?: {dest?: object, render?: boolean, header?: boolean} | It works the same as copy method except that it removes the content from the copied cells. | |
deleteCol | (v9.0.0) Selected columns are deleted. | ||
deleteRow | (v9.0.0) Selected rows are deleted. | ||
eachCol | callback: (column: column, colIndx: number) => void | (8.0.0) Invokes the callback once for every column in the Range. If there are 12 cells (4 rows x 3 cols) in the Range, this callback is called 3 times. | |
eachRow | callback: (rowData: object, rowIndx: number) => void | (v8.0.0) Invokes the callback once for every row in the Range. If there are 12 cells (4 rows x 3 cols) in the Range, this callback is called 4 times. | |
enable | enable?: boolean | boolean | (v7.0.0) It defines the editability of all cells in the range. It returns editability of first cell in the range when no parameter is passed. |
format | val?: string | string | (v8.1.0) It sets format for all cells in the range. It returns format of first cell in the range when no parameter is passed. |
freezePanes | (v9.0.0) Panes are frozen at the initial coorodinates of first selection. | ||
hideCols | (8.0.0) Hides the columns in the selection. | ||
hideRows | (8.0.0) Hides the rows in the selection. | ||
index | range | Integer | It finds the index of a single range in the collection of ranges if the range is exactly the same as any other range, returns -1 otherwise. |
indexOf | range | Integer | It finds the index of a single range in the collection of ranges if the range lies within or is exactly the same as any other range, returns -1 otherwise. |
link | url?: string | String | (v9.0.0) It sets the url of the cells in the range or returns the url of the first cell in the range when url parameter is not passed |
merge | refresh?: boolean | (v3.3.0) It merges all the cells lying in the range into a single cell. | |
pic | file (File), offsetX?: number, offsetY?: number |
(v7.2.0) It adds an image file at the first cell in Range.
Image spans multiple cells if its size ( width x height ) exceeds that of the first cell.
Image is added at first cell in grid if Range is empty.
offsetX is pixels from left edge of cell and offsetY is pixels from top edge of cell. |
|
replace | range: object, index?: number | It replaces existing old range at provided index in collection of ranges with provided new range. Last range in the collection is replaced when index is not provided. | |
resize | range: object, index?: number | Boolean | It resizes existing old range at provided index in collection of ranges to provided new range. Last range in the collection is resized when index is not provided. Existing range is resized only when at least one corner and 2 edges are common between old and new range. true is returned when range is resized, false otherwise. |
select | It selects all the rows or cells lying within the range after removing previous selections if any. | ||
showCols | (8.0.0) Shows the columns in the selection. | ||
showRows | (8.0.0) Shows the rows in the selection. | ||
style | key: string, val?: string | String | (v7.0.0) It adds css style corresponding to key value pair to all cells in the range. It returns css style corresponding to the passed key parameter of first cell in the range when val parameter is not passed. |
toggleStyle | key: string, val: any[] | (v7.0.0) It toggles css style values from val array for the passed key for all cells in the range. e.g. grid.Selection().toggleStyle( "font-style", [ "italic", "normal" ] );
|
|
unmerge | refresh?: boolean | It unmerges the top left merged cell if any lying in the range. Added in v3.3.0 | |
valign | str?: string | String | (v7.0.0) It defines the vertical alignment ( 'top', 'center' or 'bottom' ) of all cells in the range. It returns vertical alignment of first cell in the range when no parameter is passed. |
value | val?: any[] | Array |
Gets or sets the value of cells in a range.
Since v4.0.0, it uses 1 dimensional array to get or set value of all cells in the range.
//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] |
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.
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.
Code examples:
Invoke the method:
grid.refreshCell( { rowIndx: 21, dataIndx: 'company' } );
Refreshes colModel in pqGrid.
Code examples:
Invoke the method:
grid.refreshCM( );
Refreshes a whole column in pqGrid. Either of dataIndx or colIndx can be provided.
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.
Code examples:
Invoke the method:
grid.refreshDataAndView( );
Refreshes the column headers.
Code examples:
Invoke the method:
grid.refreshHeader( );
Refreshes a single specified header filter, mostly useful to create cascade filtering.
Code examples:
Invoke the method:
grid.refreshHeaderFilter({dataIndx: 'ShipRegion'});
Refreshes the whole row in pqGrid. Either of rowIndx or rowIndxPage can be provided.
Code examples:
Invoke the method:
grid.refreshRow( {rowIndx:21} );
(v8.4.0) Refresh summary view.
Code examples:
Invoke the method:
grid.refreshSummary( );
It can be used to refresh toolbar when toolbar items are changed after initialization.
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.
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.
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.
Code examples:
Invoke the method:
//Remove classes 'pq-delete' & 'pq-edit' from 3rd row. grid.removeClass( {rowIndx: 2, cls: 'pq-delete pq-edit'} ); //remove a class 'pq-delete' from 'profits' field in 3rd row. grid.removeClass( {rowIndx: 2, dataIndx: 'profits', cls: 'pq-delete'} );
(v8.7.0) Removes one or more classes (separated by empty space) from any head cell including filter row cells.
Code examples:
Invoke the method:
//Remove class from a cell in header. grid.removeClassHead( {ri: 0, colIndx: 4, cls: 'mycls'} ); //Remove multiple classes from a cell in header filter row grid.removeClassHead( {ri: 1, colIndx: 3, cls: 'mycls somecls'} );
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.
Code examples:
Invoke the method:
//Remove data with key 'name' from 3rd row. grid.removeData( {rowIndx: 2, data: 'name'} ); //Remove all data from 3rd row. grid.removeData( {rowIndx: 2} ); //remove data with key 'delete' & 'valid' from 'profits' field in 3rd row. grid.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.
Code examples:
Invoke the method:
//resets grouping and filtering in the grid. grid.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'.
Code examples:
Invoke the method:
//rollback all add, update and delete operations. grid.rollback( ); //rollback delete operations only. grid.rollback( {type: 'delete'} );
Collapses the detail view of the row. Either rowIndx or rowIndxPage can be provided.
Code examples:
Invoke the method:
grid.rowCollapse( {rowIndx:21} );
Expands the detail view of the row. Either rowIndx or rowIndxPage can be provided.
Code examples:
Invoke the method:
grid.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.
Code examples:
Invoke the method:
grid.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.
Code examples:
Invoke the method:
//saves the edited cell var success = grid.saveEditCell( );
Saves the current state of grid as string in browser local storage (default)
and returns the state as string.
Amount and type of saved grid state depends upon value of stateKeys
and stateColKeys
options.
The state string returned by this method can also be saved in a database.
Main data of grid is not saved in the state
(v10.0.0) State of grouped columns is also saved
Code examples:
Invoke the method:
//save the current state of grid. var state = grid.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.
Code examples:
Invoke the method:
grid.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.
Code examples:
Invoke the method:
grid.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.
Code examples:
Invoke the method:
grid.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.
Code examples:
Invoke the method:
grid.scrollX( 200 );
Scrolls the view to given value horizontally and/or vertically (if required) and calls the callback function (optional) when scroll is complete.
Code examples:
Invoke the method:
grid.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.
Code examples:
Invoke the method:
grid.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.
Code examples:
Invoke the method:
//search row with id: 5 var rowList = grid.search( { row: { id : 5 } }); var rowIndx = rowList.rowIndx;
var Sel = grid.Selection();returns Selection instance that represents all the selected rectangular regions in a grid. Every grid has a unique Selection instance.
It's important to note that Selection inherits all functionality and methods of Range object.
Following methods as well as all Range methods can be invoked on Selection instance.
Method | Parameters | Description |
---|---|---|
getSelection |
It returns array of objects having properties { rowIndx, rowData, colIndx, dataIndx } of all selected cells
e.g., this method returns array of 12 objects if there are 12 selected cells (4 rows x 3 cols).
var selArray = Sel.getSelection(); |
|
isSelected | rowIndx, colIndx?, dataIndx? |
It returns boolean value to indicate whether the cell is selected.
var isSelected = Sel.isSelected({rowIndx: 0, colIndx: 2}); |
removeAll |
It deselects all selected rectangular regions in the grid.
Sel.removeAll(); |
|
selectAll | all?: boolean |
It selects all the cells in the grid.
All cells on all pages are selected when all is true, while only cells on current page are selected when all is false. Sel.selectAll({ all: true }); |
Code examples:
Invoke the method:
//merge all cells lying within selection. grid.Selection().merge();
Returns row selection instance. Also see selectionModel options.
beforeRowSelect
and rowSelect
events are fired during selection/ unselection process.
var sel = grid.SelectRow();
Following methods can be invoked on the instance.
Method | Parameters | Description |
---|---|---|
add | rowIndx?: number, isFirst?: boolean, rows?: [{rowIndx: number}] | adds one or more row selections. |
extend | rowIndx: number | Extends selection from first row ( set using isFirst parameter of add method ) to the passed row. |
getFirst | gets first row selection. | |
getSelection | gets all row selections. Returns array of plain objects containing rowIndx, rowData properties. | |
isSelected | rowIndx: number | returns true/false or null depending upon selection state of row. |
remove | rowIndx?: number, rows?: [{rowIndx: number}] | removes one or more row selections. |
removeAll | all: boolean | removes all selections on current page or all pages when all is true. |
replace | rowIndx?: number, isFirst?: boolean, rows?: [{rowIndx: number}] | replaces all previous row selections with one or more new row selections.(v5.4.0) |
selectAll | all: boolean | selects all rows on current page or all pages when all is true. |
setFirst | rowIndx: number | sets this row as first selection. |
toggle | rowIndx: number, isFirst?: boolean | selects an unselected row or unselects a selected row. |
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(); //returns [{rowIndx: number, rowData: rowData}..]
Sets new data in pqGrid.
Code examples:
Invoke the method:
grid.setData( [ ] );
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.
Code examples:
Invoke the method:
//select 3rd row grid.setSelection( {rowIndx:2} ); //select cell in 10th row and 4th column. grid.setSelection( {rowIndx: 9,colIndx: 3} ); //deselect everything. grid.setSelection( null );
Displays the loading icon in center of the pqGrid. It is useful while asynchronous operations are in progress.
Code examples:
Invoke the method:
grid.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.
Code examples:
Invoke the method:
grid.sort( { sorter: [ { dataIndx: 'products', dir: "up" } ] });
(v8.1.0) Returns Tab instance when called without any parameter. This module is responsible for manipulating tabs / sheets UI. Also see tabModel options.
Following methods can be invoked on the Tab instance.
id
parameter used in the following methods is zero based index of the tab in tabs array.
Tab grid is the grid corresponding to a tab
Method | Parameters | Description |
---|---|---|
add | Appends a new tab to the tabs array by calling the tabModel.newTab callback.
Tab grid is not created by this method.
grid.Tab().add(); |
|
activate | id: number | Sets the active tab. Tab grid is created if not created yet. Only one tab can be active at a time. This method is also called when a user clicks on a particular tab. |
activeTab | Returns active tab object | |
eachGrid | callback: grid => void | (v10.1.0) Iterates over all the created grid instances.
grid.Tab().eachGrid( _grid => { //execute all excel formulas on each sheet. _grid.Formulas().computeAll(); }) |
create | id: number | Creates the tab grid without activating it
//create 3rd grid. grid.Tab().create( 2 ); |
grid | tab: tab | Returns the tab grid instance if grid has been created |
main | Returns the first created grid instance (also called main grid) among all the tab grids. Main grid controls all other sibling tabs and grids | |
refresh | Refresh tab UI. | |
remove | id: number | Removes a tab permanently. Last visible tab can't be removed. If main tab is removed, it's removed from tabs collection but remains in memory so that it can control other tabs. |
rename | id: number, val: string | Renames a tab |
tabs | Returns reference to tabModel.tabs |
(v10.1.0) The Tab
can also be used to invoke methods on all created grids.
In this context, the first parameter should be the method name, while the subsequent parameters should correspond to the arguments for that method.
option method is special case, it updates the option for all the grids including uninitialized grids.
//update options in all grids. grid.Tab( 'option', 'localeFmt', 'en-US' ); //call refreshDataAndView on all created grid instances. grid.Tab( 'refreshDataAndView' );
Exercise: What's the difference between grid.Tab( 'refresh' )
and grid.Tab().refresh()
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.
Code examples:
Invoke the method:
grid.toggle( );
Returns the toolbar DOM node or find element / elements in the toolbar ( when selector is passed ) wrapped in jQuery object.
Code examples:
Invoke the method:
var $toolbar = grid.toolbar( );
Returns toolpanel instance. Also see toolPanel options.
Following methods can be invoked on the instance.
Method | Parameters | Description |
---|---|---|
hide | Hides the toolPanel | |
isVisible | Returns true/false depending upon visibility of toolPanel | |
show | Shows the toolPanel | |
toggle | Toggles visibility of toolPanel |
Code examples:
Invoke the method:
var tp = grid.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:
Header checkbox support is added in v5.2.0
Following methods can be invoked on the instance.
Method | Parameters | Description |
---|---|---|
addNodes | nodes: any[], parent?: any, indx?: number | Adds new nodes to the treegrid. New nodes should be in flat format and contain id and parentId properties. If new nodes have a common parent and don't have parentId properties, then 2nd parameter (parentNode) should be passed. (v6.0.0) indx parameter added to support inserting of new nodes to parent. Nodes are appended to parent when indx is not passed Undo is supported and ui.source = "addNodes" in the events fired during the process Tree.addNodes( [ { id: 100, parentId: 1, ... }, { id: 101, parentId: 1, ... }, { id: 102, parentId: 100, ... }, ... ] ); Tree.addNodes( [ { id: 100, ... }, { id: 101, ... }, ... ], Tree.getNode(1) ); //v7.4.0: add root nodes (neither parentId or parent node is passed) Tree.addNodes( [ { id: 100, ... }, { id: 101, ... }, ... ] ); |
checkAll | Check all checkboxes. beforeCheck and check events are fired during the process. |
|
checkNodes | nodes: any[] | checks the specified nodes.
beforeCheck and check events are fired during the process.
|
collapseAll | collapse all the tree nodes.
beforeTreeExpand and treeExpand events are fired during the process.
|
|
collapseNodes | nodes: any[] |
collapse one or more specified tree nodes.
//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} ) ] ); |
deleteNodes | nodes: any[] | Added in v5.2.0, removes the specified nodes
Undo is supported and ui.source = "deleteNodes" in the events fired during the process |
eachChild | node: any, cb: ((node: any, parent: any) => void) | Recursively calls function on each child of passed node.
Also calls function on the passed node.
(v7.4.0) parent received as 2nd argument in the callback
//Example: Tree.eachChild( Tree.getNode( 1 ), function( node, parent ){ } ); |
eachParent | node: any, cb: ((node: any) => void) | Recursively calls function on each parent of passed node.
//Example: Tree.eachParent( Tree.getNode( 1 ), function( node ){ } ); |
expandAll | expand all the tree nodes.
beforeTreeExpand and treeExpand events are fired during the process.
|
|
expandNodes | nodes: any[] |
expand one or more specified tree nodes.
//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} ) ] ); |
expandTo | node: any |
expands all parent nodes leading to specified node.
//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} ) ); |
getCheckedNodes |
returns all the checked nodes as an array. var nodes = Tree.getCheckedNodes(); |
|
getChildren | node: any | (v6.0.0) returns an array containing the children nodes of a passed node. (v7.4.0) returns root nodes when node is not passed. |
getChildrenAll | node: any | (v6.0.0) returns an array containing all the children, grandchildren ( and so on ..) nodes of a passed node. |
getLevel | node: any |
returns level of a node as an integer. Root level nodes have level 0, their children have level 1 and so on. var level = Tree.getLevel( node ); |
getNode | id: numberorstring |
returns node when id of the node is known. Node is same as rowData. var node = Tree.getNode( id ); |
getParent | node: any |
returns parent node of specified node. var node = Tree.getParent( childnode ); |
getRoots |
returns all root nodes as an array. var nodes = Tree.getRoots( ); |
|
getSummary | node |
(v6.0.0) Returns summary node of the passed node. var node = Tree.getSummary( node ); |
isAncestor | childNode, ancestorNode |
(v6.0.0) Checks whether a node is ancestor of another node. Returns boolean value. var bool = Tree.isAncestor( childNode, ancestorNode ); |
isCollapsed | node: any |
Checks whether node is collapsed. Returns boolean value. var isCollapsed = Tree.isCollapsed( getNode( 1 ) ); |
isFolder | node: any |
Checks whether node is collapsible & expandable node. Returns boolean value. var isFolder = Tree.isFolder( getNode( 1 ) ); |
isHeadChecked | Returns true, false or null (indeterminate state) depending upon checkbox state in header cell. | |
isOn | Returns true if treegrid is created. | |
moveNodes | nodes: any[], parent?: any, indx?: number |
(v6.0.0) Remove nodes from old parents and assign them a new parent by appending / inserting
nodes to children of new parent.
If new parent is same as old parent, then nodes are rearranged under that parent. Nodes are appended if indx is not passed
(v7.4.0) parent is optional in which case the nodes are moved to root level. (v7.4.0) History (undo / redo) is supported for movement of adjacent nodes originating from same parent only with Tree.moveNodes( nodes, parentNew ); |
option | options(Object) |
Update number of options after initialization.
//Example: create tree after initialization. Tree.option( {dataIndx: 'name' }); |
unCheckAll | un check all checkboxes. beforeCheck and check events are fired during the process. |
|
unCheckNodes | nodes: any[] | un checks the specified nodes.
beforeCheck and check events are fired during the process.
|
updateId | node: any, id: numberorstring | (v7.4.0) updates the id of a node with a new id passed as 2nd parameter |
Code examples:
Invoke the method:
var treegrid = grid.Tree( ); treegrid.expandAll();
(v9.0.0) This method removes any frozen panes.
Code examples:
Invoke the method:
grid.unfreezePanes();
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.
beforeValidate
and change
events are fired.
Change Log: v3.2.0:
Code examples:
Invoke the method:
grid.updateRow( { rowIndx: 2, newRow: { 'ProductName': 'Cheese', 'UnitPrice': 30 } }); //update multiple rows at once. grid.updateRow( { rowList: [ { rowIndx: 2, newRow: { 'ProductName': 'Cheese', 'UnitPrice': 30 }}, { rowIndx: 5, newRow: { 'ProductName': 'Butter', 'UnitPrice': 25 }} ] });
Returns a jQuery object containing the pqGrid.
Code examples:
Invoke the method:
var widget = grid.widget( );
Fired when auto height of all rows in viewport is complete.
Code examples:
Initialize the pqGrid with the autoRowHeight callback specified:
pq.grid( selector,{ autoRowHeight: function( event, ui ) {} });
Triggered when a cell is clicked but before any default action is taken by the grid. Default action of the grid can be prevented by returning false.
Code examples:
Initialize the pqGrid with the beforeCellClick callback specified:
pq.grid( selector,{ beforeCellClick: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeCellClick event:
grid.on( "beforeCellClick", function( event, ui ) {} );
Triggered when a key is pressed in a focused cell but before any default key navigation action is taken by the grid. Custom handling of keys i.e., ( LEFT, RIGHT, UP, DOWN, PAGE_UP, PAGE_DOWN, DELETE, etc.) in the grid can be implemented in this event. Default action of the grid can be prevented by returning false.
Code examples:
Initialize the pqGrid with the beforeCellKeyDown callback specified:
pq.grid( selector,{ beforeCellKeyDown: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeCellKeyDown event:
grid.on( "beforeCellKeyDown", function( event, ui ) {} );
Triggered before checkbox is checked or unchecked in a checkbox column, treegrid or row grouping with checkboxes.
It can be canceled by returning false.
In case of treegrid and row grouping with cascade checkboxes, only the directly affected nodes are present in rows.
Indirectly affected nodes can be found by eachChild
and eachParent
methods of Grid/Tree.
Code examples:
Initialize the pqGrid with the beforeCheck callback specified:
pq.grid( selector,{ beforeCheck: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeCheck event:
grid.on( "beforeCheck", function( event, ui ) {} );
(v7.0.0) Triggered before new columns are added in the grid.
It can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeColAdd callback specified:
pq.grid( selector,{ beforeColAdd: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeColAdd event:
grid.on( "beforeColAdd", function( event, ui ) {} );
(v7.1.0) Triggered before columns are moved within the grid through
Columns().move
method.
It can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeColMove callback specified:
pq.grid( selector,{ beforeColMove: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeColMove event:
grid.on( "beforeColMove", function( event, ui ) {} );
(v7.0.0) Triggered before columns are removed from the grid.
It can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeColRemove callback specified:
pq.grid( selector,{ beforeColRemove: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeColRemove event:
grid.on( "beforeColRemove", function( event, ui ) {} );
Triggered before a grouped column is collapsed or expanded.
Current collapsed state of affected column can be obtained from
ui.column.collapsible.on
.
It can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeColumnCollapse callback specified:
pq.grid( selector,{ beforeColumnCollapse: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeColumnCollapse event:
grid.on( "beforeColumnCollapse", function( event, ui ) {} );
(v8.4.0) Triggered before a range of cells are copied from grid.
ui.areas
can be modified in this event.
It can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeCopy callback specified:
pq.grid( selector,{ beforeCopy: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeCopy event:
grid.on( "beforeCopy", function( event, ui ) {} );
Triggered before data is exported. It can be used to show/hide the necessary rows/columns in the exported data.
Code examples:
Initialize the pqGrid with the beforeExport callback specified:
pq.grid( selector,{ beforeExport: function( event, ui ) {} });
Triggered before a square box is about to be displayed at bottom right corner of a range selection. It can be cancelled by returning false. This event is added in v3.4.0. The coordinates of the cell i.e., rowIndx, rowIndxPage, rowData, column, colIndx, dataIndx are passed through ui argument to this event.
Code examples:
Initialize the pqGrid with the beforeFillHandle callback specified:
pq.grid( selector,{ beforeFillHandle: function( event, ui ) { if( ui.column.dataType == 'float' ){//disable fillHandle for float columns. return false; } else if( ui.dataIndx == "company" ){ this.option( 'fillHandle', 'vertical' );//only vertical dragging. } } });
Triggered before data is filtered.
The structure of ui
object is same as parameters passed to the filter method.
Please refer to filter method for details.
Code examples:
Initialize the pqGrid with the beforeFilter callback specified:
pq.grid( selector,{ beforeFilter: function( event, ui ) {} });
Triggered before a grouped cell, whole level or all levels are expanded/collapsed. It can be cancelled by returning false. This event is added in v3.3.5.
Code examples:
Initialize the pqGrid with the beforeGroupExpand callback specified:
pq.grid( selector,{ beforeGroupExpand: function( event, ui ) {} });
(v8.7.0) Triggered before default action is taken when any key is pressed in a focused header cell. Default action can be prevented by returning false.
key | Default action |
---|---|
ENTER |
Toggles the sort state of corresponding column
Toggles the collapsed state of grouped column Sets focus on first focusable control in the cell in case of header filter row Toggles the state between (collapse all/expand all) in case of detail view |
CTRL + ENTER | Open popup menu attached to the cell |
SPACE | Toggles the checkbox state in cell |
LEFT | Moves focus to left cell, stops at the edge |
RIGHT | Moves focus to right cell, stops at the edge |
TAB | Moves focus to right cell in default layout and to left cells in RTL layout.
Moves focus to next focusable elemet in the document when it reaches the edge. |
SHIFT + TAB | Moves focus in opposite direction to that in case of TAB alone |
Code examples:
Initialize the pqGrid with the beforeHeadKeyDown callback specified:
pq.grid( selector,{ beforeHeadKeyDown: function( event, ui ) {} });
Triggered before columns are hidden or displayed via header menu or API (new in v5.2.0).
Code examples:
Initialize the pqGrid with the beforeHideCols callback specified:
pq.grid( selector,{ beforeHideCols: function( event, ui ) {} });
(v8.6.0) Triggered before new data is assigned to grid or before fetching remote data. It's generally fired during initialization or when refreshDataAndView method is invoked in grid.
Code examples:
Initialize the pqGrid with the beforeNewData callback specified:
pq.grid( selector,{ beforeNewData: function( event, ui ) {} });
Triggered before data is pasted into the grid, pasted data can be modified in this event. For example when formatted numbers are pasted, this event can extract pure integers and float values from them.
Return false cancels the paste operation.
pq.deFormatNumber
method may be used instead of regular expression if exact format of the pasted values is known.
$.datepicker.parseDate
and $.datepicker.formatDate
can be used to extract dates from formatted date strings.
Code examples:
Initialize the pqGrid with the beforePaste callback specified:
beforePaste: function(evt, ui){ //sanitize pasted data. var CM = this.getColModel(), rows = ui.rows, area = ui.areas[0], c1 = area.c1; for(var i=0; i < rows.length; i++){ var row = rows[i]; for(var j=0; j < row.length; j++){ var column = CM[j+c1], dt = column.dataType; if( dt == "integer" || dt == "float" ){ row[j] = row[j].replace(/[^(\d|\.)]/g,""); } } } },
Triggered before row detail is expanded or collapsed.
It can be canceled by returning false.
Event is fired for row collapse since v5.5.0
Code examples:
Initialize the pqGrid with the beforeRowExpand callback specified:
pq.grid( selector,{ beforeRowExpand: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeRowExpand event:
grid.on( "beforeRowExpand", function( event, ui ) {} );
Triggered before rows are selected or unselected. It's cancelled when false is returned.
Code examples:
Initialize the pqGrid with the beforeRowSelect callback specified:
pq.grid( selector,{ beforeRowSelect: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeRowSelect event:
grid.on( "beforeRowSelect", function( event, ui ) {} );
Triggered before data is sorted. Sorting can be canceled by returning false. See sortModel option for description of various ui properties.
Code examples:
Initialize the pqGrid with the beforeSort callback specified:
pq.grid( selector,{ beforeSort: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeSort event:
grid.on( "beforeSort", function( event, ui ) {} );
Triggered just before pqGrid is about to display or render the data. Any last moment changes can be done in the data during this event. It can be used only to update the records and should not insert or delete records.
Code examples:
Initialize the pqGrid with the beforeTableView callback specified:
pq.grid( selector,{ beforeTableView: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeTableView event:
grid.on( "beforeTableView", function( event, ui ) {} );
Triggered before tree nodes are either collapsed or expanded. It can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeTreeExpand callback specified:
pq.grid( selector,{ beforeTreeExpand: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeTreeExpand event:
grid.on( "beforeTreeExpand", function( event, ui ) {} );
Triggered before change in grid data takes place due to:
beforeValidate
and change
events.
All ui arguments are passed by reference so any modification to the arguments affects subsequent data processing by the grid.
Code examples:
Initialize the pqGrid with the beforeValidate callback specified:
pq.grid( selector,{ beforeValidate: function( event, ui ) {} });
Bind an event listener to the pqGrid:beforeValidate event:
grid.on( "beforeValidate", function( event, ui ) {} );
(v8.7.0) Triggered when focus moves from grid body to some other element in the same document.
Code examples:
Initialize the pqGrid with the blur callback specified:
pq.grid( selector,{ blur: function( event, ui ) {} });
(v8.7.0) Triggered when focus moves from grid header to some other element in the same document.
Code examples:
Initialize the pqGrid with the blurHead callback specified:
pq.grid( selector,{ blurHead: function( event, ui ) {} });
Triggered before a cell is saved in pqGrid during inline editing. Saving of data can be canceled by returning false.
Code examples:
Initialize the pqGrid with the cellBeforeSave callback specified:
pq.grid( selector,{ cellBeforeSave: function( event, ui ) {} });
Bind an event listener to the pqGrid:cellBeforeSave event:
grid.on( "cellBeforeSave", function( event, ui ) { var dataIndx = ui.dataIndx, newVal = ui.newVal; if(dataIndx == 'profits'){ if(newVal < 0){ return false; } } });
Triggered when a cell is clicked in pqGrid.
Code examples:
Initialize the pqGrid with the cellClick callback specified:
pq.grid( selector,{ cellClick: function( event, ui ) {} });
Bind an event listener to the pqGrid:cellClick event:
grid.on( "cellClick", function( event, ui ) {} );
Triggered when a cell is double clicked in pqGrid.
Code examples:
Initialize the pqGrid with the cellDblClick callback specified:
pq.grid( selector,{ cellDblClick: function( event, ui ) {} });
Bind an event listener to the pqGrid:cellDblClick event:
grid.on( "cellDblClick", function( event, ui ) {} );
Triggered when a key is pressed in a selected cell. In case of multiple cell selection, the last selected cell receives the keys input.
Code examples:
Initialize the pqGrid with the cellKeyDown callback specified:
pq.grid( selector,{ cellKeyDown: function( event, ui ) {} });
Bind an event listener to the pqGrid:cellKeyDown event:
grid.on( "cellKeyDown", function( event, ui ) {} );
(v7.2.0) This event is deprecated and replaced by context event
Triggered when context menu is activated for a cell, which is right click on desktops and long tap in touch devices. Inbuilt context menu of browser is not opened if the event handler returns false.(v6.0.0) Event is also fired on number cell.
Code examples:
Initialize the pqGrid with the cellRightClick callback specified:
pq.grid( selector,{ cellRightClick: function( event, ui ) {} });
Bind an event listener to the pqGrid:cellRightClick event:
grid.on( "cellRightClick", function( event, ui ) {} );
Triggered after a cell is saved in pqGrid locally due to inline editing. This event is suitable to update computed or dependent data in other cells. If you want to make your code execute after data changes irrespective of the reason i.e., inline editing, copy/paste, etc. please use change event which is more versatile than this event.
Code examples:
Initialize the pqGrid with the cellSave callback specified:
pq.grid( selector,{ cellSave: function( event, ui ) {} });
Bind an event listener to the pqGrid:cellSave event:
grid.on( "cellSave", function( event, ui ) {} );
Triggered after change in grid data takes place due to:
beforeValidate
and change
events.
This event is suitable to intimate the remote server about any data changes in the grid.
This event has the same ui parameters as beforeValidate
event but with a difference being that
ui parameters are considered read only for this event.
Code examples:
Initialize the pqGrid with the change callback specified:
pq.grid( selector,{ change: function( event, ui ) {} });
Bind an event listener to the pqGrid:change event:
grid.on( "change", function( event, ui ) {} );
Triggered after beforeCheck event is fired and checkbox state is changed in checkbox column, treegrid or row grouping with checkboxes.
In case of treegrid and row grouping with cascade checkboxes, only the directly affected nodes are present in rows.
Indirectly affected nodes can be found by ui.getCascadeList
method.
When header checkbox is (un)checked, all the affected rows are present in ui.rows
and ui.getCascadeList
is undefined.
Code examples:
Initialize the pqGrid with the check callback specified:
pq.grid( selector,{ check: function( event, ui ) {} });
Bind an event listener to the pqGrid:check event:
grid.on( "check", function( event, ui ) {} );
(v7.0.0) Triggered after new columns are added in the grid.
Code examples:
Initialize the pqGrid with the colAdd callback specified:
pq.grid( selector,{ colAdd: function( event, ui ) {} });
Bind an event listener to the pqGrid:colAdd event:
grid.on( "colAdd", function( event, ui ) {} );
(v7.1.0) Triggered when columns are moved within the grid through
Columns().move
method.
Code examples:
Initialize the pqGrid with the colMove callback specified:
pq.grid( selector,{ colMove: function( event, ui ) {} });
Bind an event listener to the pqGrid:colMove event:
grid.on( "colMove", function( event, ui ) {} );
(v7.0.0) Triggered after columns are removed from the grid.
Code examples:
Initialize the pqGrid with the colRemove callback specified:
pq.grid( selector,{ colRemove: function( event, ui ) {} });
Bind an event listener to the pqGrid:colRemove event:
grid.on( "colRemove", function( event, ui ) {} );
Triggered when a grouped column is collapsed or expanded.
Current collapsed state of affected column can be obtained from
ui.column.collapsible.on
.
Refresh of colModel and view after this event can be prevented by returning false.
Code examples:
Initialize the pqGrid with the columnCollapse callback specified:
pq.grid( selector,{ columnCollapse: function( event, ui ) {} });
Bind an event listener to the pqGrid:columnCollapse event:
grid.on( "columnCollapse", function( event, ui ) {} );
Triggered just before any column is about to be dragged. It can be used to limit the droppable columns by adding or removing nodrop property to them. This event can also be canceled by returning false.
Code examples:
Initialize the pqGrid with the columnDrag callback specified:
pq.grid( selector,{ columnDrag: function( event, ui ) {} });
Bind an event listener to the pqGrid:columnDrag event:
grid.on( "columnDrag", function( event, ui ) {} );
Triggered when any column is reordered by drag and drop.
Code examples:
Initialize the pqGrid with the columnOrder callback specified:
pq.grid( selector,{ columnOrder: function( event, ui ) {} });
Bind an event listener to the pqGrid:columnOrder event:
grid.on( "columnOrder", function( event, ui ) {} );
Triggered when a column is resized.
Code examples:
Initialize the pqGrid with the columnResize callback specified:
pq.grid( selector,{ columnResize: function( event, ui ) {} });
Bind an event listener to the pqGrid:columnResize event:
grid.on( "columnResize", function( event, ui ) {} );
Triggered when grid has completed data binding and view rendering. This event is generated once for each call to refreshDataAndView method.
Code examples:
Initialize the pqGrid with the complete callback specified:
pq.grid( selector,{ complete: function( event, ui ) {} });
(v7.2.0)Triggered when context menu is activated on any element of grid by right click with mouse, two finger tap on touchpad or long single finger tap in touch devices.
Inbuilt context menu of browser is not opened if the event handler returns false.colIndx = -1 when event is fired on number cell.
Code examples:
Initialize the pqGrid with the context callback specified:
pq.grid( selector,{ context: function( event, ui ) {} });
Bind an event listener to the pqGrid:context event:
grid.on( "context", function( event, ui ) {} );
(v8.4.0) Triggered after a range of cells are copied from grid.
Code examples:
Initialize the pqGrid with the copy callback specified:
pq.grid( selector,{ copy: function( event, ui ) {} });
Bind an event listener to the pqGrid:copy event:
grid.on( "copy", function( event, ui ) {} );
Triggered when the grid is created. In case of local request, the data binding and view rendering is complete when this event occurs. Use load event in case of remote request for availability of data.
Code examples:
Initialize the pqGrid with the create callback specified:
pq.grid( selector,{ create: function( event, ui ) {} });
Bind an event listener to the pqGrid:create event:
grid.on( "create", function( event, ui ) {} );
Triggered when data is ready for rendering in the grid. It happens after data is changed by addition, deletion, filtering, sorting of records or call to refreshDataAndView(), refreshView() methods. No changes in the data should be made in this event, it can be used to generate manual summary data.
Code examples:
Initialize the pqGrid with the dataReady callback specified:
pq.grid( selector,{ dataReady: function( event, ui ) {} });
Triggered when editor is created.
Code examples:
Initialize the pqGrid with the editorBegin callback specified:
pq.grid( selector,{ editorBegin: function( event, ui ) {} });
Bind an event listener to the pqGrid:editorBegin event:
grid.on( "editorBegin", function( event, ui ) {} );
Triggered when editor is blurred.
Code examples:
Initialize the pqGrid with the editorBlur callback specified:
pq.grid( selector,{ editorBlur: function( event, ui ) {} });
Bind an event listener to the pqGrid:editorBlur event:
grid.on( "editorBlur", function( event, ui ) {} );
Triggered when editor is about to be destroyed.
Code examples:
Initialize the pqGrid with the editorEnd callback specified:
pq.grid( selector,{ editorEnd: function( event, ui ) {} });
Bind an event listener to the pqGrid:editorEnd event:
grid.on( "editorEnd", function( event, ui ) {} );
Triggered when editor is focused.
Code examples:
Initialize the pqGrid with the editorFocus callback specified:
pq.grid( selector,{ editorFocus: function( event, ui ) {} });
Bind an event listener to the pqGrid:editorFocus event:
grid.on( "editorFocus", function( event, ui ) {} );
Triggered when a key is input in an editor. Default behaviour of the keys in editor can be prevented by returning false in this event. editorKeyPress and editorKeyUp are fired after this event.
Code examples:
Initialize the pqGrid with the editorKeyDown callback specified:
pq.grid( selector,{ editorKeyDown: function( event, ui ) {} });
Bind an event listener to the pqGrid:editorKeyDown event:
grid.on( "editorKeyDown", function( event, ui ) {} );
Triggered when a key is pressed in an editor. This event is fired after editorKeyDown event.
Code examples:
Initialize the pqGrid with the editorKeyPress callback specified:
pq.grid( selector,{ editorKeyPress: function( event, ui ) {} });
Bind an event listener to the pqGrid:editorKeyPress event:
grid.on( "editorKeyPress", function( event, ui ) {} );
Triggered when a key is released after input in an editor.
Code examples:
Initialize the pqGrid with the editorKeyUp callback specified:
pq.grid( selector,{ editorKeyUp: function( event, ui ) {} });
Bind an event listener to the pqGrid:editorKeyUp event:
grid.on( "editorKeyUp", function( event, ui ) {} );
Triggered after data is exported by the grid but before file is ready to download.
Code examples:
Initialize the pqGrid with the exportData callback specified:
pq.grid( selector,{ exportData: function( event, ui ) {} });
Triggered after data is filtered.
The structure of ui
object is same as parameters passed to the filter method.
Please refer to filter method for details.
Code examples:
Initialize the pqGrid with the filter callback specified:
pq.grid( selector,{ filter: function( event, ui ) {} });
(v8.7.0) Triggered when any cell or empty region in grid body is focused
Code examples:
Initialize the pqGrid with the focus callback specified:
pq.grid( selector,{ focus: function( event, ui ) {} });
(v8.7.0) Triggered when any grid head cell is focused
Code examples:
Initialize the pqGrid with the focusHead callback specified:
pq.grid( selector,{ focusHead: function( event, ui ) {} });
Triggered when a grouped cell, whole level or all levels are expanded/collapsed.
Code examples:
Initialize the pqGrid with the group callback specified:
pq.grid( selector,{ group: function( event, ui ) {} });
(v3.3.5) This event is triggered when
Code examples:
Initialize the pqGrid with the groupChange callback specified:
pq.grid( selector,{ groupChange: function( event, ui ) {} });
This event is triggered when data is grouped for row grouping or pivot view.
Code examples:
Initialize the pqGrid with the groupData callback specified:
pq.grid( selector,{ groupData: function( event, ui ) {} });
(v7.2.0) This event is triggered just after children nodes are hidden or make visible depending upon open / close state of their parent nodes.
Code examples:
Initialize the pqGrid with the groupHideRows callback specified:
pq.grid( selector,{ groupHideRows: function( event, ui ) {} });
(v5.1.0) This is triggered when group options are changed via Group().option() method. Since toolPanel calls Group().option() to group / pivot data, this event can be used to listen to changes made by user in toolPanel.
Code examples:
Initialize the pqGrid with the groupOption callback specified:
pq.grid( selector,{ groupOption: function( event, ui ) {} });
Triggered when a header cell is clicked.
Code examples:
Initialize the pqGrid with the headerCellClick callback specified:
pq.grid( selector,{ headerCellClick: function( event, ui ) {} });
Bind an event listener to the pqGrid:headerCellClick event:
grid.on( "headerCellClick", function( event, ui ) {} );
(v7.2.0) This event is deprecated and replaced by context event
(v6.0.0) Triggered when context menu is activated for a header cell including grouped header cells. Inbuilt context menu of browser is not opened if the event handler returns false.Code examples:
Initialize the pqGrid with the headRightClick callback specified:
pq.grid( selector,{ headRightClick: function( event, ui ) {} });
Bind an event listener to the pqGrid:headRightClick event:
grid.on( "headRightClick", function( event, ui ) {} );
Triggered after columns are hidden or displayed via header menu or API (new in v5.2.0).
Code examples:
Initialize the pqGrid with the hideCols callback specified:
pq.grid( selector,{ hideCols: function( event, ui ) {} });
Triggered whenever
add
A reversible operation i.e., add/update/delete is done in the grid. It may be a single operation e.g., while inline editing
of a cell, add/update/delete of a row by method invocation or a combination of operations e.g., paste of multiple cells/rows.
true
, false
There is a change of state from ability to perform and not perform undo operation.
true
, false
There is a change of state from ability to perform and not perform redo operation.
undo
, redo
Undo (by Ctrl-Z or method invocation) or redo (by Ctrl-Y or method invocation) is performed.
reset
, resetUndo
Code examples:
Initialize the pqGrid with the history callback specified:
pq.grid( selector,{ history: function( event, ui ) {} });
Bind an event listener to the pqGrid:history event:
grid.on( "history", function( event, ui ) {} );
(v8.5.0) Applicable to lazy loading, it's triggered before pqGrid begins loading first batch of remote data.
Code examples:
Initialize the pqGrid with the lazyInit callback specified:
pq.grid( selector,{ lazyInit: function( event, ui ) {} });
Bind an event listener to the pqGrid:lazyInit event:
grid.on( "lazyInit", function( event, ui ) {} );
(v8.5.0) Applicable to lazy loading, it's triggered while pqGrid is loading batches of remote data.
Code examples:
Initialize the pqGrid with the lazyProgress callback specified:
pq.grid( selector,{ lazyProgress: function( event, ui ) {} });
Bind an event listener to the pqGrid:lazyProgress event:
grid.on( "lazyProgress", function( event, ui ) {} );
(v8.5.0) Applicable to lazy loading, it's triggered when pqGrid is finished loading all remote data.
Code examples:
Initialize the pqGrid with the lazyComplete callback specified:
pq.grid( selector,{ lazyComplete: function( event, ui ) {} });
Bind an event listener to the pqGrid:lazyComplete event:
grid.on( "lazyComplete", function( event, ui ) {} );
Triggered after the pqGrid has loaded the remote data.
Code examples:
Initialize the pqGrid with the load callback specified:
pq.grid( selector,{ load: function( event, ui ) {} });
Bind an event listener to the pqGrid:load event:
grid.on( "load", function( event, ui ) {} );
Triggered when nodes or rows are moved via moveNodes
method in grid, row groupings or treegrid.
This event is also triggered after drag & drop of rows because moveNodes
method is called internally by pqgrid in default dropModel.drop
callback implementation.
Code examples:
Initialize the pqGrid with the moveNode callback specified:
pq.grid( selector,{ moveNode: function( event, ui ) {} });
Bind an event listener to the pqGrid:moveNode event:
grid.on( "moveNode", function( event, ui ) {} );
Triggered after data is pasted in the grid
Code examples:
Initialize the pqGrid with the paste callback specified:
pq.grid( selector,{ paste: function( event, ui ) {} });
Triggered when pivot colModel is generated before pivot grid is displayed.(v 5.3.0). This event is very useful to customize pivot view by change, add, removal of columns in pivot view.
Code examples:
Initialize the pqGrid with the pivotCM callback specified:
pq.grid( selector,{ pivotCM: function( event, ui ) {} });
Bind an event listener to the pqGrid:pivotCM event:
grid.on( "pivotCM", function( event, ui ) {} );
Triggered whenever the view of grid is refreshed.
Code examples:
Initialize the pqGrid with the refresh callback specified:
pq.grid( selector,{ refresh: function( event, ui ) {} });
Bind an event listener to the pqGrid:refresh event:
grid.on( "refresh", function( event, ui ) {} );
Triggered whenever header is refreshed.
Code examples:
Initialize the pqGrid with the refreshHeader callback specified:
pq.grid( selector,{ refreshHeader: function( event, ui ) {} });
Bind an event listener to the pqGrid:refreshHeader event:
grid.on( "refreshHeader", function( event, ui ) {} );
Triggered whenever a row is refreshed via call to refreshRow method.
Code examples:
Initialize the pqGrid with the refreshRow callback specified:
pq.grid( selector,{ refreshRow: function( event, ui ) {} });
Bind an event listener to the pqGrid:refreshRow event:
grid.on( "refreshRow", function( event, ui ) {} );
Triggered just after pqGrid's DOM structure is created but before grid is fully initialized. This event is suitable for adding toolbars, etc. Any grid API can't be accessed in this event because the grid initialization is incomplete when this event is fired. This event fires before create event.
Code examples:
Initialize the pqGrid with the render callback specified:
pq.grid( selector,{ render: function( event, ui ) {} });
Bind an event listener to the pqGrid:render event:
grid.on( "render", function( event, ui ) {} );
Triggered when a row is clicked in pqGrid. It occurs after cellClick event.
Code examples:
Initialize the pqGrid with the rowClick callback specified:
pq.grid( selector,{ rowClick: function( event, ui ) {} });
Bind an event listener to the pqGrid:rowClick event:
grid.on( "rowClick", function( event, ui ) {} );
Triggered when a row is double clicked in pqGrid. It occurs after cellDblClick event.
Code examples:
Initialize the pqGrid with the rowDblClick callback specified:
pq.grid( selector,{ rowDblClick: function( event, ui ) {} });
Bind an event listener to the pqGrid:rowDblClick event:
grid.on( "rowDblClick", function( event, ui ) {} );
(v7.2.0) Removed. Please use context event instead of this.
Code examples:
Initialize the pqGrid with the rowRightClick callback specified:
pq.grid( selector,{ rowRightClick: function( event, ui ) {} });
Bind an event listener to the pqGrid:rowRightClick event:
grid.on( "rowRightClick", function( event, ui ) {} );
Triggered when rows have been selected or unselected in pqGrid.
Code examples:
Initialize the pqGrid with the rowSelect callback specified:
pq.grid( selector,{ rowSelect: function( event, ui ) {} });
Bind an event listener to the pqGrid:rowSelect event:
grid.on( "rowSelect", function( event, ui ) {} );
Triggered when grid is scrolled. Use this event wisely or use scrollStop event otherwise it may slow down the scrolling.
Code examples:
Initialize the pqGrid with the scroll callback specified:
pq.grid( selector,{ scroll: function( event, ui ) {} });
Bind an event listener to the pqGrid:scroll event:
grid.on( "scroll", function( event, ui ) {} );
Triggered when grid scrolling is stopped or paused after scrollModel.timeout milliseconds.
Code examples:
Initialize the pqGrid with the scrollStop callback specified:
pq.grid( selector,{ scrollStop: function( event, ui ) {} });
Bind an event listener to the pqGrid:scrollStop event:
grid.on( "scrollStop", function( event, ui ) {} );
Triggered whenever selection is changed by user action or by invoking the selection API.
Code examples:
Initialize the pqGrid with the selectChange callback specified:
pq.grid( selector,{ selectChange: function( event, ui ) {} });
Bind an event listener to the pqGrid:selectChange event:
grid.on( "selectChange", function( event, ui ) {} );
Similar to selectChange except that it's fired when user is done making the selection with keyboard or mouse.
Code examples:
Initialize the pqGrid with the selectEnd callback specified:
pq.grid( selector,{ selectChange: function( event, ui ) {} });
Bind an event listener to the pqGrid:selectEnd event:
grid.on( "selectEnd", function( event, ui ) {} );
(v9.0.0) It's fired when user selects the exported columns from header popup menu.
Code examples:
Initialize the pqGrid with the skipExport callback specified:
pq.grid( selector,{ skipExport: function( event, ui ) {} });
Bind an event listener to the pqGrid:skipExport event:
grid.on( "skipExport", function( event, ui ) {} );
Triggered after data is sorted in the grid. It fires only when sorting takes place by click on the header cell in versions < v3.0.0, but since v3.0.0 it fires whenever the data is sorted irrespective of the origin, it may be initiated by click on header cell or by invoking sort method. See sortModel option for description of various ui properties.
Code examples:
Initialize the pqGrid with the sort callback specified:
pq.grid( selector,{ sort: function( event, ui ) {} });
Bind an event listener to the pqGrid:sort event:
grid.on( "sort", function( event, ui ) {} );
(v8.6.0) Triggered when tab is acivated.
Code examples:
Initialize the pqGrid with the tabActivate callback specified:
pq.grid( selector,{ tabActivate: function( event, ui ) {} });
Bind an event listener to the pqGrid:tabActivate event:
grid.on( "tabActivate", function( event, ui ) {} );
(v8.6.0) Triggered when tabs are ready to be rendered after import from Excel. Any last moment changes in the tabs can be done in this event.
Code examples:
Initialize the pqGrid with the tabsReady callback specified:
pq.grid( selector,{ tabsReady: function( event, ui ) { this.Tab().tabs().forEach(function(tab){ tab.noClose = true; //disable the close button of all tabs. }) } });
Bind an event listener to the pqGrid:tabsReady event:
grid.on( "tabsReady", function( event, ui ) {} );
(v8.6.0) Triggered after tab is renamed
Code examples:
Initialize the pqGrid with the tabRename callback specified:
pq.grid( selector,{ tabRename: function( event, ui ) {} });
Bind an event listener to the pqGrid:tabRename event:
grid.on( "tabRename", function( event, ui ) {} );
Triggered when toggle button is clicked and pqGrid alternates between maximized and normal state. By default, grid occupies whole document height (height: '100%') and width (width:'100%') in maximized state, which can be customized in this event.
Code examples:
Initialize the pqGrid with the toggle callback specified:
pq.grid( selector,{ toggle: function( event, ui ) {} });
Bind an event listener to the pqGrid:toggle event:
grid.on( "toggle", function( event, ui ) { if(ui.state == 'max' ){ //customize height of grid in maximize state. this.option("height", "100%-50"); } });
Triggered when tree nodes are either collapsed or expanded.
Code examples:
Initialize the pqGrid with the treeExpand callback specified:
pq.grid( selector,{ treeExpand: function( event, ui ) {} });
Bind an event listener to the pqGrid:treeExpand event:
grid.on( "treeExpand", function( event, ui ) {} );
aggregate is an object having following methods: Any null or undefined values are ignored by these formulas.
aggregate object can be customized by adding a new method or overriding the existing methods with custom implementation.
Every method receives the following parameters.Code examples:
Invoke the method:
var sum = pq.aggregate.sum([2, 5, 7, 1]);//result is 15 var avg = pq.aggregate.avg([1, null, 5]);//result is 3 //define custom aggregate "all", now it can be used as column.summary.type var agg = pq.aggregate; agg.all = function(arr, col){ return "Sum: " + format( agg.sum(arr, col) ) +", Max: " + format( agg.max(arr, col) ) +", Min: " + format( agg.min(arr, col) ); };
used to un format a formatted string into pure number.
Code examples:
Invoke the method:
var value = pq.deFormatNumber( "$1,679.45", "$#,###.00"); //result is 1679.45
(v9.0.0) Returns csv string from js object
Code examples:
Invoke the method:
var jsobject = grid.exportData({format: 'js'}); var csv = pq.exportCsv( jsobject.head, jsobject.body, {separator: ":", skipBOM: true } );
(v9.0.0) Returns html string from js object
Code examples:
Invoke the method:
var jsobject = grid.exportData({format: 'js'}); var html = pq.exportHtm( jsobject.head, jsobject.body, { grid: grid } );
(v9.0.0) Returns documentation definition of table in pdfmake format from js object
Code examples:
Invoke the method:
var jsobject = grid.exportData({format: 'js'}); var ddTable = pq.exportPdf( jsobject.head, jsobject.body );
Returns xlsx file contents from json workbook
Code examples:
Invoke the method:
var xlsx = pq.excel.exportWb({ workbook: { sheets: [...] }, type: 'base64' });
Iterates through each cell in number of worksheets or rows and invokes callback function on them.
Code examples:
Invoke the method:
pq.excel.eachCell(sheets, function( cell, ci, ri, si ){ //do something with each cell. });
Imports xlsx or csv file into a json workbook. Import of csv file is supported since v7.4.0 Either one of file, content or url is necessary to import xlsx/csv file.
Code examples:
Invoke the method:
pq.excel.importXl({ file: evt.target.files[0], sheets: [1, 4] //import 2nd and 5th worksheet. }, function( wb ){ //do something with the workbook. } );
(v10.0.0) formats a date, datetime or time
To Display | As | Use this code |
---|---|---|
Years | (00-99) | yy |
Years | (1900-9999) | yyyy |
Months | (1-12) | m |
Months | (01-12) | mm |
Months | (Jan-Dec) | mmm |
Months | (January-December) | mmmm |
Months | (J-D) | mmmmm |
Days | (1-31) | d |
Days | (01-31) | dd |
Days | (Sun-Sat) | ddd |
Days | (Sunday-Saturday) | dddd |
Hours | (0-23) | h |
Hours | (00-23) | hh |
Minutes | (0-59) | m |
Minutes | (00-59) | mm |
Seconds | (0-59) | s |
Seconds | (00-59) | ss |
Time | (4 AM) | h AM/PM |
Time | (4:36 PM) | h:mm AM/PM |
Time | (4:36:03 PM) | h:mm:ss AM/PM |
Code examples:
Invoke the method:
var fmt = 'mmm,dd yyyy'; var formatValue = pq.formatDate( '2024-11-03', fmt ); //result is Nov,03 2024 fmt = "dddd dd mmmm yyyy" formatValue = pq.formatDate("2013-03-11", fmt, 'en-US' ); //result is Monday 11 March 2013 formatValue = pq.formatDate("2013-03-11", fmt, 'ko' ); //result is 월요일 11일 3월 2013년
formats a number, currency, percent, exponential, text.
(v10.0.0) This method has been rewritten to support a much wider variety of formats similar to Excel.
When creating a number format, you can specify up to four sections of code, separated by semicolons (;). These sections define the formats for:
If you only provide one section, it's used for all numbers. If you provide two sections, the first is for positive numbers and zeros, and the second is for negative numbers. If you omit any section, include a semicolon in its place.
Format Code Components
The following characters can be used in format codes:
#
Displays significant digits only.0
Displays non-significant zeros, even if a number has fewer digits than specified..
Decimal separator.,
Thousand separator.%
Percent.E
Exponential.Code examples:
Invoke the method:
var fmt = '#.00;(#.00);-;Hello @'; var formatValue = pq.formatNumber( 67945, fmt); //result is 67945.00 formatValue = pq.formatNumber( -67945, fmt); //result is (67945.00) formatValue = pq.formatNumber( 0, fmt); //result is - formatValue = pq.formatNumber( "World", fmt); //result is "Hello World"
(v9.0.0) Loads the scripts by adding a script tag for each script in the document head. Scripts are loaded sequentially one after the other in the same order as specified in the scripts array. A script is loaded only once even if this method is called multiple times.
Code examples:
Invoke the method:
//Lazy load the pdfmake files pq.getScripts(['/pdfmake027/pdfmake.min.js', '/pdfmake027/vfs_fonts.min.js'], function () { //pdfMake API is available now. pdfMake.createPdf(dd).download("pqGrid.pdf"); })
(v10.0.0) Parses a formatted datetime and returns string in ISO datetime format.
Code examples:
Invoke the method:
var date = pq.parseDate( "Jun-24" ); //result: "2024-06-01" date = pq.parseDate("June,2013 12:45:05 AM", 'mmmm,yyyy hh:mm:ss AM/PM'); //result: '2013-06-01 00:45:05' date = pq.parseDate( '12-9-1224', 'yy/m/d'); //result: '#VALUE!'
(v9.0.0)
This method is used typically to either save the exported data to remote location or download it as file. Remote export via server takes place in 2 steps/requests.
pq_data
, pq_ext
, pq_decode
, pq_filename
parameters to the server. The server
pq_filename
parameter to server as GET variable
and server returns the file as downloadable attachment.Code examples:
Invoke the method:
pq.postData("../exportData", { pq_filename: 'pqgrid', pq_ext: 'csv', pq_data: data, pq_decode: false }, //optional parameter { success: function(response){ //do something with response. } } )
(v9.0.0) Saves a file locally.
Code examples:
Invoke the method:
var data = grid.exportExcel({...}); pq.saveAs( data, "pqgrid.xlsx");
Generates a two dimensional array and colModel from a table DOM node and returns them as an Object { data: data, colModel: colModel }.
Code examples:
Invoke the method:
//get data and colModel from table. var obj = $.paramquery.tableToArray( tbl ); var dataModel = { data: obj.data}; var colModel = obj.colModel;
returns letter representation of numbers for use in Excel formulas e.g., "A" for 1, "B" for 2 and so on.
Code examples:
Invoke the method:
var val = pq.toLetter( 5 ); //returns "E"
Generates a two dimensional array from XML Document.
Code examples:
Invoke the method:
//get data from XML. var obj = { itemParent: "book", itemNames: ["author", "title", "genre", "price", "publish_date", "description"] }; var data = $.paramquery.xmlToArray(xmlDoc, obj);
Generates an array of objects having key/value pairs from XML Document.
Code examples:
Invoke the method:
//get data from XML. var obj = { itemParent: "book", itemNames: ["author", "title", "genre", "price", "publish_date", "description"] }; var data = $.paramquery.xmlToJson(xmlDoc, obj);