水平有限，翻譯得不好，難免有不對的地方。翻譯未完全，不斷更新中。。。后續會有源碼發布上來
jQuery grid API Documentation
Options
Methods
Events
1、rowHover:true-- 決定鼠標在滑動在表格中時，行是否有背景顏色。定義的class：pq-grid-row-hover
2、rowClasses:行的顏色（用於隔行不同顏色等），可以是數組['red', 'green'],或['red', 'green','blue'],或者rowClasses = function (rowIndex, rowData) {return XXX;}
3、匯總欄：totalModel: [ { text: "匯總：", summary: [{ type: "text", dataIndx: "rank", text: "求和00" }, { type: "sum", dataIndx: "revenues", title: "求和" }, { type: "avg", dataIndx: "profits", title: "平均" }] }, { text: "匯總1：", summary: [{ type: "sum", dataIndx: "revenues", title: "求和1" }, { type: "avg", dataIndx: "profits", title: "平均1", pq_cellcls: { "profits": "green" }}] } ]
Utility Methods
Adds a class or multiple classes (separated by empty space) to a row or cell. Either rowData or rowIndx can be passed.
- rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - cls
Type: String
Name of a single class or more classes separated by space.
Code examples:
Invoke the method:
|
1
2
3
4
5
|
//Add classes 'pq-delete' & 'pq-edit' to 3rd row.
$(
".selector"
).pqGrid(
"addClass"
, {rowIndx: 2, cls:
'pq-delete pq-edit'
} );
//Add a class 'pq-delete' to 'profits' field in 3rd row
$(
".selector"
).pqGrid(
"addClass"
, {rowIndx: 2, dataIndx:
'profits'
, cls:
'pq-delete'
} );
|
Appends a row to the local view and returns rowIndx of the added row. It inserts a row at rowIndx if rowIndx is provided. The tracking of this operation for commit and rollback is determined by global track option unless overridden by track parameter passed to this method. If source parameter is passed, its value is available in the change event instead of default add value when new row is added by this method. If history parameter is passed, this operation is added or not added to the history depending upon value of the parameter. checkEditable parameter affects the checks for editability of cells.
- rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - track
Type: Boolean
Optional parameter. Sets or overrides the tracking for this operation. - source
Type: String
Optional parameter with default value of 'add'. - history
Type: Boolean
Optional parameter with default value of historyModel.on. - checkEditable
Type: Boolean
Optional parameter with default value of true.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
|
//Append a new row.
$(
".selector"
).pqGrid(
"addRow"
,
{rowData: {id: 20, product:
'Colgate'
} }
);
//Append an empty row
$(
".selector"
).pqGrid(
"addRow"
,
{ rowData: {} }
);
|
Get the value of an attribute for a row or cell or set one or more attributes for a row or cell. Either rowData or rowIndx can be passed.
- rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - attr
Type: Object
Key value pair of attrbute / attributes.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
10
|
//Add a row title.
$(
".selector"
).pqGrid(
"attr"
, {rowIndx: 2, attr: { title:
'Row title'
} );
//get style attribute of 3rd row.
var
style = $(
".selector"
).pqGrid(
"attr"
, {rowIndx: 2, attr:
'style'
} ).attr;
//Add a cell title
$(
".selector"
).pqGrid(
"attr"
,
{rowIndx: 2, dataIndx:
'profits'
, attr: { title:
'cell title'
} }
);
|
Collapse the grid.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"collapse"
);
|
Accepts or commits the add, edit and delete operations done after turning on tracking. type can limit the commit operation w.r.t add, update or delete. rows parameter can further limit the type of commit operation to the matching rows only. The format of rows is similar to dataModel.data i.e., an array of row objects and usually fetched from remote server. When type = add and rows argument is passed, commit updates the primary key i.e., recIndx of the matching records in grid from rows.
- type
Type: String
optional parameter to limit or control the type of rollback. - rows
Type: Array
An array of rows to further limit the type of commit.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
|
//commit all add, update and delete operations.
$(
".selector"
).pqGrid(
"commit"
);
//commit add operations only and update the primary key of added records from rows.
$(
".selector"
).pqGrid(
"commit"
, { type:
'add'
, rows: rows } );
//commit update operations and further limit them to matching rows only.
$(
".selector"
).pqGrid(
"commit"
, { type:
'update'
, rows: rows } );
|
It copies selected cells / rows within the grid or from one grid to another.
Code examples:
Invoke the method:
|
1
2
|
//copy selections.
$(
".selector"
).pqGrid(
"copy"
);
|
Generates a table having structure similar to and synchronized with the columns in the grid. It's useful for creating frozen rows especially at the bottom. Any subsequent call to createTable using same $cont parameter replaces the previous table with a new table, hence it can also be used to refresh table with new data.
- $cont
Type: jQuery
container in which to append the new table. - data
Type: Array
Two dimensional array or array of key/value pair objects holding data for the new table. The key names should correspond to dataIndx in colModel.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
|
//create a frozen row having 4 columns in div container using 2 dimensional array.
$(
".selector"
).pqGrid(
"createTable"
, {$cont: $(
"<div></div>"
),
data: [[
"Total"
,
""
, 35, 120 ]]
//2 dimensional array
} );
//create a frozen row having 4 columns in div container using JSON data.
$(
".selector"
).pqGrid(
"createTable"
, {$cont: $(
"<div></div>"
),
data: [{ rank:
"Total"
, company:
""
, revenues: 35, profits: 120 }]
} );
|
Store or access arbitrary data ( i.e., array, object, string, etc ) associated with a specified row or cell. It acts as a private or meta data store of a cell or row and is different from normal pqgrid row ( i.e., rowData ) and cell data ( i.e., rowData[dataIndx]). This method returns the entire data of cell or row when data argument is not passed to it and returns partial data when key name of data is passed to it. Either rowData or rowIndx can be passed to this method. Meta data associated with this API can also be stored or manipulated as part of pqgrid JSON data ( i.e., dataModel.data ) as rowData['pq_rowdata'] or rowData['pq_celldata'][dataIndx] which can be used by client or remote server.
- rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - data
Type: Object
Key value pairs of data where key is string and value is an array, object, string, etc.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//Add meta data to a row.
$(
".selector"
).pqGrid(
"data"
, {rowIndx: 2, data: { key1: value1, key2: value2 } );
//get whole meta data of 3rd row.
var
data = $(
".selector"
).pqGrid(
"data"
, {rowIndx: 2} ).data;
//get partial meta data of 3rd row with key name 'key1'.
var
value1 = $(
".selector"
).pqGrid(
"data"
, {rowIndx: 2, data:
'key1'
} ).data;
//Add meta data to a cell
$(
".selector"
).pqGrid(
"data"
, {rowIndx: 2, dataIndx:
'profits'
,
data: {
'a'
: {
'b'
:
true
} }
});
|
Deletes a row from the local view. The tracking of this operation for commit and rollback is determined by global track option unless overridden by track parameter passed to this method. If source parameter is passed, its value is available in the change event instead of default 'delete' value when a row is deleted by this method. If history parameter is passed, this operation is added or not added to the history depending upon value of the parameter.
- rowIndx
Type: Integer
Zero based index of the row. - track
Type: Boolean
Optional parameter. Sets or overrides the tracking for this operation. - source
Type: String
Optional parameter with default value of 'delete'. - history
Type: Boolean
Optional parameter with default value of historyModel.on.
Code examples:
Invoke the method:
|
1
2
|
//Delete the row at 5th position from top.
$(
".selector"
).pqGrid(
"deleteRow"
, { rowIndx: 4 } );
|
Removes the pqGrid functionality completely. This will return the element back to its pre-init state.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"destroy"
);
|
Disables the pqGrid.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"disable"
);
|
Enables the pqGrid.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"enable"
);
|
Puts a cell in edit mode if the cell lies within the viewport. Either rowIndx or rowIndxPage and either dataIndx or colIndx can be passed. It is a low level method which doesn't check whether the cell is marked uneditable. Use isEditableCell method to check that.
- rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - colIndx
Type: Integer
Zero based index of the column.
Code examples:
Invoke the method:
|
1
2
|
//edit cell in 3rd row and 4th column.
$(
".selector"
).pqGrid(
"editCell"
, { rowIndx: 2, dataIndx:
"profits"
} );
|
Puts the first editable cell in the row in edit mode.
- rowIndx
Type: Integer
Zero based index of the row.
Code examples:
Invoke the method:
|
1
2
|
//edit first editable cell in 3rd row.
$(
".selector"
).pqGrid(
"editFirstCellInRow"
, { rowIndx: 2 } );
|
Expand the grid.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"expand"
);
|
It exports the data in the grid into Excel format file with xml extension. The grid prompts the user to download the exported file.
- url
Type: String
Url where grid posts the data to be returned back as xml file. - sheetName
Type: String
Name of the Worksheet.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"exportExcel"
, { url:
"/export/excel"
, sheetName:
"pqGrid"
} );
|
It exports the grid data into CSV format file with csv extension. The grid prompts the user to download the exported file.
- url
Type: String
Url where grid posts the data to be returned back as csv file.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"exportCsv"
, { url:
"/export/csv"
} );
|
Convenient method to filter the data. Data is filtered locally or remotely depending upon the dataModel > location value. data contains array of multiple filter conditions. Only one condition can be applied to one dataIndx. Filter is applied on multiple filter conditions using filterModel > mode which can be either "AND" or "OR"
- oper
Type: String
'replace' or 'add'. 'replace' replaces the previous filter conditions (if any) with new filter conditions. 'add' appends new filter conditions to previous filter conditions (if any). 'add' replaces previous filter condition if there is new filter condition for the same dataIndx. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - data > condition
Type: String
"begin", "contain", "notcontain", "equal", "notequal", "empty", "notempty", "end", "less", "great" More conditions are added in v2.0.4: "between", "range", "regexp", "notbegin", "notend", "lte", "gte" - data > value
Type: Object
Value of field against which the data is to be filtered. 'empty' and 'notempty' conditions don't require value. It's an array of values when condition is 'range' and regular expression when condition is 'regexp' - data > value2
Type: Object
Second value of field applicable to between condition only.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
|
$(
".selector"
).pqGrid(
"filter"
, {
oper:
'replace'
,
data: [
{ dataIndx:
'country'
, condition:
'begin'
, value:
'Fr'
},
{ dataIndx:
'city'
, condition:
'notempty'
}
]
});
|
Used to get a cell when indices are known. Either rowIndx or rowIndxPage and either colIndx or dataIndx can be passed. It returns a td element wrapped in jQuery object if td is displayed in the viewport.
- rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - colIndx
Type: Integer
Zero based index of the column.
Code examples:
Invoke the method:
|
1
2
|
//get cell in 3rd row and 4th column.
var
$td = $(
".selector"
).pqGrid(
"getCell"
, { rowIndx: 2, dataIndx:
"contactName"
} );
|
Used to get cells having a given class name. Returns an array of objects { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx }.
- cls
Type: String
Name of a single class.
Code examples:
Invoke the method:
|
1
2
3
4
5
|
var
arr = $(
".selector"
).pqGrid(
"getCellsByClass"
, { cls :
'pq-delete'
} );
//get first cell having the above class.
var
rowIndx = arr[0].rowIndx;
var
dataIndx = arr[0].dataIndx;
|
Used to get cell indices of a given cell. Returns an object containing rowIndx and dataIndx.
- $td
Type: jQuery
td element wrapped in jQuery object.
Code examples:
Invoke the method:
|
1
2
|
var
obj = $(
".selector"
).pqGrid(
"getCellIndices"
, { $td : $td } );
var
dataIndx=obj.dataIndx, rowIndx=obj.rowIndx;
|
Used to get uncommitted changes w.r.t added rows, updated rows and deleted rows when tracking is on. The rows are returned by reference (rowData) when format is null or is not passed to the method. The rows are cloned and returned when format is 'byVal'. Internal representation of tracking data is returned when format is 'raw'. 'raw' format provides detailed information about the changed data.
- format
Type: String
'byVal', 'raw' or null.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var
changes = $(
".selector"
).pqGrid(
"getChanges"
);
//Format of JSON object returned by this method is as below:
{
updateList: [rowData1, rowData2..]
addList: [rowData1, rowData2..]
deleteList: [rowData1, rowData2..]
}
var
changes = $(
".selector"
).pqGrid(
"getChanges"
, {format:
'byVal'
} );
//Format of JSON object returned by this method is as below:
{
updateList: [row1, row2..]
addList: [row1, row2..]
deleteList: [row1, row2..]
}
|
Used to get colIndx when dataIndx is known.
Code examples:
Invoke the method:
|
1
|
var
colIndx = $(
".selector"
).pqGrid(
"getColIndx"
, { dataIndx:
"profits"
} );
|
Used to get column whose dataIndx is known.
Code examples:
Invoke the method:
|
1
|
var
column = $(
".selector"
).pqGrid(
"getColumn"
,{ dataIndx:
"profits"
} );
|
Used to get colModel of grid. It's different from options > colModel in the case of header grouping as it provides information about the lower most column cells in the header.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
var
colModel = $(
".selector"
).pqGrid(
"getColModel"
);
|
Used to get sub set of data from the local data cache dataModel.data of the grid. Returns an array of unique row objects.
- dataIndx
Type: Array
Array of dataIndx to be included in the returned data.
Code examples:
Invoke the method:
|
1
2
3
4
|
var
data = $(
".selector"
).pqGrid(
"getData"
, { dataIndx: [
'ProductName'
,
'UnitPrice'
] } );
//returns
[ {
'ProductName'
:
'ABC'
, UnitPrice: 30 }, {
'ProductName'
:
'DEF'
, UnitPrice: 15 },... ]
|
Gets an object containing currently edited cell and editor corresponding to edited cell. Returns null if no cell is being edited.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
2
3
4
5
|
var
obj = $(
".selector"
).pqGrid(
"getEditCell"
);
//get table cell
var
$td=obj.$td;
//get editor
var
$cell=obj.$cell;
|
Gets the data (saved or unsaved) associated with currently edited cell. Returns null if no cell is being edited.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
var
dataCell = $(
".selector"
).pqGrid(
"getEditCellData"
);
|
Gets the instance of grid for convenient invocation of grid methods. Returns an object { 'grid': grid }.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
2
3
4
|
var
grid = $(
".selector"
).pqGrid(
"getInstance"
).grid;
//any method can be called on grid in an easier to use and read syntax.
var
$tr = grid.getRow( { rowIndx: 2 });
|
Used to get a row when rowIndxPage is known. It returns a tr element wrapped in jQuery object. Note that it returns a $tr only when the row is rendered in the view, otherwise it returns null.
- rowIndxPage
Type: Integer
Zero based index of the row on current page.
Code examples:
Invoke the method:
|
1
2
|
//get 3rd row on current page.
var
$tr = $(
".selector"
).pqGrid(
"getRow"
, {rowIndxPage: 2} );
|
Returns reference to row / record in JSON or Array format when either of rowIndx, rowIndxPage, recId or rowData is known. It returns same rowData when rowData is passed as parameter.
- rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page. - recId
Type: Object
Value of the record's primary key. - rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data.
Code examples:
Invoke the method:
|
1
2
|
//get reference to 3rd row on current page.
var
rowData = $(
".selector"
).pqGrid(
"getRowData"
, {rowIndxPage: 2} );
|
Used to get row index of a given row when either $tr or rowData is known. Returns an object containing rowIndx.
- $tr
Type: jQuery
tr element wrapped in jQuery object. - rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data.
Code examples:
Invoke the method:
|
1
2
|
var
obj = $(
".selector"
).pqGrid(
"getRowIndx"
, { $tr : $tr } );
var
rowIndx = obj.rowIndx;
|
Used to get rows having a given class name. Returns an array of objects { rowData: rowData, rowIndx: rowIndx }.
- cls
Type: String
Name of a single class.
Code examples:
Invoke the method:
|
1
2
3
4
5
|
var
arr = $(
".selector"
).pqGrid(
"getRowsByClass"
, { cls :
'pq-delete'
} );
//get first row having the above class.
var
rowData = arr[0].rowData;
var
rowIndx = arr[0].rowIndx;
|
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:
|
1
2
|
//navigate to 3rd page.
$(
".selector"
).pqGrid(
"goToPage"
, { page: 3} );
|
Checks whether a row or cell has a class. Either rowData or rowIndx can be passed.
- rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - cls
Type: String
Name of a single class.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
|
//Check whether 3rd row has class 'pq-delete'.
var
hasClass = $(
".selector"
).pqGrid(
"hasClass"
,
{rowIndx: 2, cls:
'pq-delete'
}
);
//Check whether 3rd row & 'profits' field has class 'pq-delete'.
var
hasClass = $(
".selector"
).pqGrid(
"hasClass"
,
{rowIndx: 2, dataIndx:
'profits'
, cls:
'pq-delete'
}
);
|
Hides the loading icon in center of the pqGrid after asynchronous operation is complete.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"hideLoading"
);
|
A generic method to manipulate history.
method can be undo, redo, canUndo, canRedo, reset. undo is used to to reverse add, update or delete operations while redo is used to to repeat add, update or delete operations which have been previously reversed. undo and redo can be invoked multiple times until all the operations have been undone or redone. Multiple rows/cells added or updated during paste of rows/cells are considered as a single operation.
canUndo returns boolean true/false depending upon whether further undo action can be performed. canRedo returns boolean true/false depending upon whether further redo action can be performed. reset clears all history without making any change in current data in grid.
- method
Type: String
Name of the method which can be 'undo', 'redo', 'canUndo', 'canRedo'.
Code examples:
Invoke the method:
|
1
2
3
4
|
//undo
$(
".selector"
).pqGrid(
"history"
, { method:
'undo'
} );
var
canUndo = $(
".selector"
).pqGrid(
"history"
, { method:
'canUndo'
} );
|
Checks whether there is any change in grid data since last commit or since tracking is turned on. Checks individual record when either rowIndx or rowData is passed to this method.
- rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"isDirty"
);
|
Checks whether a cell can be edited depending upon the options editable and column > editable.
- rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"isEditableCell"
, { rowIndx: 3, dataIndx:
"profits"
} );
|
Checks whether a row can be edited depending upon the option editable.
- rowIndx
Type: Integer
Zero based index of the row.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"isEditableRow"
, { rowIndx: 3 } );
|
Checks whether a cell, row or data (collection of rows) is valid against column.validations[] and returns an object { valid: true } when all cells are valid.
It validates single cell when rowData / rowIndx and dataIndx is passed. It considers either rowData[dataIndx] for validation or value if value parameter if passed as one of the arguments.
It validates a whole row when rowIndx / rowData is passed while dataIndx is not passed.
It validates collection of rows when data parameter is passed where data is in format of array of row objects similar to dataModel.data.
When allowInvalid parameter is true, this method adds a class editModel.invalidClass to all invalid cells and returns a collection of all invalid cells.
When allowInvalid parameter is false, this method displays a tooltip to display validation.msg, puts first invalid cell in edit mode and returns { valid: false, dataIndx: dataIndx } of that first invalid cell.
- rowIndx
Type: Integer
Zero based index of the row. - rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - data
Type: Array
2-dimensional array (array of arrays) or JSON (array of key/value paired plain objects) - value
Type:
Cell value of variant type. - allowInvalid
Type: Boolean
Allows invalid value and adds an invalid class to the cell/cells.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
|
//validate a single cell against a value which is usually taken from editor.
$(
".selector"
).pqGrid(
"isValid"
, { rowIndx: 3, dataIndx:
"profits"
, value: 12.45 } );
//validate 4th row.
$(
".selector"
).pqGrid(
"isValid"
, { rowIndx: 3 } );
//validate a row whose reference (rowData) is known.
$(
".selector"
).pqGrid(
"isValid"
, { rowData: rowData } );
|
It pastes the copied cells / rows within the grid or from one grid to another.
Code examples:
Invoke the method:
|
1
2
|
//paste data.
$(
".selector"
).pqGrid(
"paste"
);
|
Ignores the unsaved changes in currently edited cell and brings cell out of edit mode. It fires quitEditMode event. It can be useful to invoke in custom editors.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
2
|
//quit editing of cell
$(
".selector"
).pqGrid(
"quitEditMode"
);
|
Gets an object containing key/value pairs representing the current pqGrid options hash.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
var
options = $(
".selector"
).pqGrid(
"option"
);
|
Gets the value currently associated with the specified optionName.
- optionName
Type: String
The name of the option to get.
Code examples:
Invoke the method:
|
1
|
var
disabled = $(
".selector"
).pqGrid(
"option"
,
"disabled"
);
|
Sets the value of the pqGrid option associated with the specified optionName.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"option"
,
"disabled"
,
true
);
|
Sets one or more options for the Grid.
- optionName
Type: Object
A map of option-value pairs to set.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"option"
, {disabled:
true
} );
|
It's used to refresh the view of grid after update of records, addition of classes, attributes through JSON or other properties that affect the rows in current page or layout of grid e.g., height, width, etc. Being a computational intensive operation, if a number of such options / properties of the grid are being updated, this method should be called only once at the end.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"refresh"
);
|
Refreshes a cell in pqGrid. Either of rowIndx or rowIndxPage and either of dataIndx or colIndx can be provided.
- rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page. - colIndx
Type: Integer
Zero based index of the column. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"refreshCell"
, { rowIndx: 21, dataIndx:
'company'
} );
|
Refreshes a whole column in pqGrid. Either of dataIndx or colIndx can be provided.
- colIndx
Type: Integer
Zero based index of the column. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"refreshColumn"
, {colIndx:2} );
|
Refresh the data and view in pqGrid. It's a superset of refreshView method. It's useful to refresh View after change in dataModel properties or addition, deletion or update of records. It also reloads the data when location is 'remote'. This method being a memory intensive operation should be used judiciously and should be avoided within a loop.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"refreshDataAndView"
);
|
Refreshes the column headers.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"refreshHeader"
);
|
Refreshes the whole row in pqGrid. Either of rowIndx or rowIndxPage can be provided.
- rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"refreshRow"
, {rowIndx:21} );
|
Refreshes the view of pqGrid. It's a superset of refresh method and is useful to refresh the view of grid after change in dataModel properties e.g., sortIndx, sortDir, pageModel options, addition or deletion of records.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"refresh"
);
|
Removes an attribute from a row or cell previously added with attr method. Either rowData or rowIndx can be passed.
- rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - attr
Type: String
Name of a single attribute or space-separated list of attributes.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
|
//Remove title and style attribute from 3rd row.
$(
".selector"
).pqGrid(
"removeAttr"
,
{rowIndx: 2, attr:
'title style'
}
);
//remove title from 'profits' field in 3rd row.
$(
".selector"
).pqGrid(
"removeAttr"
,
{rowIndx: 2, dataIndx:
'profits'
, attr:
'title'
}
);
|
Removes a class or multiple classes (separated by empty space) from a row or cell. Either rowData or rowIndx can be passed.
- rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - cls
Type: String
Name of a single class or more classes separated by space.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
|
//Remove classes 'pq-delete' & 'pq-edit' from 3rd row.
$(
".selector"
).pqGrid(
"removeClass"
,
{rowIndx: 2, cls:
'pq-delete pq-edit'
}
);
//remove a class 'pq-delete' from 'profits' field in 3rd row.
$(
".selector"
).pqGrid(
"removeClass"
,
{rowIndx: 2, dataIndx:
'profits'
, cls:
'pq-delete'
}
);
|
Removes a previously-stored piece of data from a row or cell. The data can be partially or completely removed from row or cell with this method. Either rowData or rowIndx can be passed.
- rowData
Type: Object or Array
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - data
Type: String or Array
A string naming the piece of data to delete or an array or space-separated string naming the pieces of data to delete. All data is removed when this argument is not passed.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//Remove data with key 'name' from 3rd row.
$(
".selector"
).pqGrid(
"removeData"
,
{rowIndx: 2, data:
'name'
}
);
//Remove all data from 3rd row.
$(
".selector"
).pqGrid(
"removeData"
,
{rowIndx: 2}
);
//remove data with key 'delete' & 'valid' from 'profits' field in 3rd row.
$(
".selector"
).pqGrid(
"removeData"
,
{rowIndx: 2, dataIndx:
'profits'
, data:
'delete valid'
}
);
|
Undo or rollback all the add, edit and delete operations done after turning on tracking. type can limit the rollback operation w.r.t 'add', 'update' or 'delete'.
- type
Type: String
optional parameter to limit or control the type of rollback.
Code examples:
Invoke the method:
|
1
2
3
4
5
|
//rollback all add, update and delete operations.
$(
".selector"
).pqGrid(
"rollback"
);
//rollback delete operations only.
$(
".selector"
).pqGrid(
"rollback"
, {type:
'delete'
} );
|
Collapses the detail view of the row. Either rowIndx or rowIndxPage can be provided.
- rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"rowCollapse"
, {rowIndx:21} );
|
Expands the detail view of the row. Either rowIndx or rowIndxPage can be provided.
- rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"rowExpand"
, {rowIndx:21} );
|
Removes the detail view of the row from view as well as cache. It can be useful when the detail view fails to load due to network error. Either rowIndx or rowIndxPage can be provided.
- rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"rowInvalidate"
, {rowIndx:21} );
|
Saves the currently edited cell. It's internally used by the grid whenever the cell is saved during inline editing. It participates in tracking for commit and rollback when tracking is on. It can be useful to invoke in custom editors. It fires two events i.e., cellBeforeSave and cellSave. It aborts the save operation and returns false if cellBeforeSave returns false. cellSave event is not fired when save operation is unsuccessful. It fires cellSave event and returns true when save operation is successful. It returns null if no cell is being edited.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
2
|
//saves the edited cell
var
success = $(
".selector"
).pqGrid(
"saveEditCell"
);
|
Scrolls the view horizontally (if required) to make the column visible in pqGrid. Either of colIndx or dataIndx can be provided.
- colIndx
Type: Integer
Zero based index of the column. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"scrollColumn"
, { dataIndx:
"lastname"
} );
|
Scrolls the view vertically (if required) to make the row visible in pqGrid.
- rowIndxPage
Type: Integer
Zero based index of the row on current page.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"scrollRow"
, { rowIndxPage: 30 } );
|
A generic method to manipulate selections.
method can be add, replace, remove, removeAll, indexOf, isSelection, getSelection.
add is used to append new selections to the selection set.
replace removes all selections and adds a new one.
remove removes a given selection.
removeAll removes all selections.
isSelected returns true/false depending upon selection state of a row or cell.
indexOf returns the index of a given selection in the selection set. It returns -1 if the selection is not found.
getSelection returns an array of selection objects containing rowIndx and/or dataIndx.
- type
Type: String
'row' or 'cell'. - method
Type: String
Name of the method which can be 'add', 'replace', 'remove', 'removeAll', 'indexOf', 'getSelection'. - rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page. - colIndx
Type: Integer
Zero based index of the column. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//add 3rd row to selection
$(
".selector"
).pqGrid(
"selection"
,
{ type:
'row'
, method:
'add'
, rowIndx: 2}
);
//removes cell in 10th row and 4th column from selection.
$(
".selector"
).pqGrid(
"selection"
,
{ type:
'cell'
, method:
'remove'
, rowIndx: 9, colIndx: 3}
);
//Remove all row selections and raise unSelect event for every unselected row.
$(
".selector"
).pqGrid(
"selection"
,
{ type:
'row'
, method:
'removeAll'
}
);
//Find the index of selected cell in 12th row and 3rd column among the selections.
var
indx = $(
".selector"
).pqGrid(
"selection"
,
{ type:
'cell'
, method:
'indexOf'
, rowIndx: 11, colIndx: 2 }
);
//Find whether 3rd row is selected.
var
isSelected = $(
".selector"
).pqGrid(
"selection"
,
{ type:
'row'
, method:
'isSelected'
, rowIndx: 2 }
);
//Get all cell selections
var
selectionArray = $(
".selector"
).pqGrid(
"selection"
,
{ type:
'cell'
, method:
'getSelection'
}
);
|
Selects a row or cell depending upon the parameters. It brings the cell or row into viewport and sets focus on it in addition to selecting it. It deselects everything if null is passed as parameter. It doesn't set the focus on row/cell when focus is false.
- rowIndx
Type: Integer
Zero based index of the row. - rowIndxPage
Type: Integer
Zero based index of the row on current page. - colIndx
Type: Integer
Zero based index of the column. - focus
Type: Integer
Optional argument with default value of true.
Code examples:
Invoke the method:
|
1
2
3
4
5
6
|
//select 3rd row
$(
".selector"
).pqGrid(
"setSelection"
, {rowIndx:2} );
//select cell in 10th row and 4th column.
$(
".selector"
).pqGrid(
"setSelection"
, {rowIndx: 9,colIndx: 3} );
//deselect everything.
$(
".selector"
).pqGrid(
"setSelection"
,
null
);
|
Displays the loading icon in center of the pqGrid. It is useful while asynchronous operations are in progress.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"showLoading"
);
|
Toggles the grid between maximized state and normal state. In maximized state the grid occupies whole browser width and height and fits snugly into it.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"toggle"
);
|
Used to reverse add, update or delete operations. It can be invoked multiple times until all the operations have been reversed. Multiple rows/cells added or updated during paste of rows/cells are considered as a single operation.
Code examples:
Invoke the method:
|
1
|
$(
".selector"
).pqGrid(
"undo"
);
|
Used to update one or more fields in a row. If source parameter is passed, its value is available in the change event instead of default 'update' value when a row is updated by this method. If history parameter is passed, this operation is added or not added to the history depending upon value of the parameter. checkEditable parameter affects the checks for editability of row and cells.
- rowIndx
Type: Integer
Zero based index of the row. - row
Type: Object
Object holding the modifed data of the row. - track
Type: Boolean
Optional parameter. Sets or overrides the tracking for this operation. - source
Type: String
Optional parameter with default value of 'update'. - history
Type: Boolean
Optional parameter with default value of historyModel.on. - checkEditable
Type: Boolean
Optional parameter with default value of true.
Code examples:
Invoke the method:
|
1
2
|
$(
".selector"
).pqGrid(
"updateRow"
,
{ rowIndx: 2, row: {
'ProductName'
:
'Cheese'
,
'UnitPrice'
: 30 } );
|
Returns a jQuery object containing the pqGrid.
- This method does not accept any arguments.
Code examples:
Invoke the method:
|
1
|
var
widget = $(
".selector"
).pqGrid(
"widget"
);
|
Triggered just before checkbox is checked in a checkbox column in pqGrid. It can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeCheck callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
beforeCheck:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridbeforecheck event:
|
1
|
$(
".selector"
).on(
"pqgridbeforecheck"
,
function
( event, ui ) {} );
|
Triggered just before pqGrid is about to expand the row in case of row detail implemented via detailModel. Row expansion can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeRowExpand callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
beforeRowExpand:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridbeforerowexpand event:
|
1
|
$(
".selector"
).on(
"pqgridbeforerowexpand"
,
function
( event, ui ) {} );
|
Triggered just before pqGrid is about to sort the data initiated by a user action. Sorting can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeSort callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
beforeSort:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridbeforesort event:
|
1
|
$(
".selector"
).on(
"pqgridbeforesort"
,
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.
- event
Type: Event - ui
Type: Object- pageData
Type: Array
2-dimensional array or JSON data for current page. - initV
Type: Integer
Index of first row displayed in the unfrozen viewport. - finalV
Type: Integer
Index of last row displayed in the unfrozen viewport. - initH
Type: Integer
Index of first column displayed in the unfrozen viewport. - finalH
Type: Integer
Index of last column displayed in the unfrozen viewport.
- pageData
Code examples:
Initialize the pqGrid with the beforeTableView callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
beforeTableView:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridbeforetableview event:
|
1
|
$(
".selector"
).on(
"pqgridbeforetableview"
,
function
( event, ui ) {} );
|
Triggered just before any checkbox is unchecked in a checkbox column in pqGrid. It can be canceled by returning false.
Code examples:
Initialize the pqGrid with the beforeunCheck callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
beforeunCheck:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridbeforeuncheck event:
|
1
|
$(
".selector"
).on(
"pqgridbeforeuncheck"
,
function
( event, ui ) {} );
|
Triggered before change in grid data takes place due to inline editing a cell, add/update/delete a row through method invocation or paste of rows/cells. Checks for editability of row/cell and validations take place after this event. All ui arguments are passed by reference so any modification to the arguments affects subsequent data processing by the grid. It fires only once when a number of cells are affected together (e.g., paste of multiple cells) rather than firing for each individual cell.
- event
Type: Event - ui
Type: Object- rowList
Type: Array
Array of objects { rowData: rowData, newRow: newRow, oldRow: oldRow, type: type } where type may be 'add', 'update' or 'delete'. - source
Type: String
origin of the change e.g., 'edit', 'update', 'add' , 'delete', 'paste', 'undo', 'redo' or a custom source passed to addRow, updateRow, deleteRow methods. - allowInvalid
Type: Boolean
Allows invalid value and adds an invalid class to the cell/cells. - history
Type: Boolean
Whether add this operation in history. - checkEditable
Type: Boolean
Checks whether the row/cell is editable before making any change.
- rowList
Code examples:
Initialize the pqGrid with the beforeValidate callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
beforeValidate:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridbeforevalidate event:
|
1
|
$(
".selector"
).on(
"pqgridbeforevalidate"
,
function
( event, ui ) {} );
|
Triggered before a cell is saved in pqGrid during inline editing. Saving of data can be canceled by returning false, so this event can be used for validations when the data is not in desirable format. Validations take place automatically since v2.2.0 and it's no longer required to call isValid method from this event.
- event
Type: Event - ui
Type: Object- dataModel
Type: Object
PQGrid's internal dataModel. - rowIndx
Type: Integer
Zero based index of the row corresponding to cell. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - column
Type: Object
Object containing properties of this column. - newVal
Type: Object
New value inside the editor.
- dataModel
Code examples:
Initialize the pqGrid with the cellBeforeSave callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
cellBeforeSave:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcellbeforesave event:
|
1
2
3
4
5
6
7
8
|
$(
".selector"
).on(
"pqgridcellbeforesave"
,
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:
|
1
2
3
|
$(
".selector"
).pqGrid({
cellClick:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcellclick event:
|
1
|
$(
".selector"
).on(
"pqgridcellclick"
,
function
( event, ui ) {} );
|
Triggered when a cell is double clicked in pqGrid.
Code examples:
Initialize the pqGrid with the cellDblClick callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
cellDblClick:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcelldblclick event:
|
1
|
$(
".selector"
).on(
"pqgridcelldblclick"
,
function
( event, ui ) {} );
|
This event is deprecated. Please use editorKeyDown instead of this event.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - colIndx
Type: Integer
Zero based index of the column corresponding to cell. - $td
Type: jQuery
Table Cell which is being edited. - $cell
Type: jQuery
Editor container.
- rowData
Code examples:
Initialize the pqGrid with the cellEditKeyDown callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
cellEditKeyDown:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgricelleditkeydown event:
|
1
|
$(
".selector"
).on(
"pqgricelleditkeydown"
,
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. Default handling of keys by the grid can be prevented by returning false.
Code examples:
Initialize the pqGrid with the cellKeyDown callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
cellKeyDown:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgricellkeydown event:
|
1
|
$(
".selector"
).on(
"pqgricellkeydown"
,
function
( event, ui ) {} );
|
Triggered when a cell is right clicked.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row corresponding to cell. - colIndx
Type: Integer
Zero based index of the column corresponding to cell. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON.
- rowData
Code examples:
Initialize the pqGrid with the cellRightClick callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
cellRightClick:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcellrightclick event:
|
1
|
$(
".selector"
).on(
"pqgridcellrightclick"
,
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:
|
1
2
3
|
$(
".selector"
).pqGrid({
cellSave:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcellsave event:
|
1
|
$(
".selector"
).on(
"pqgridcellsave"
,
function
( event, ui ) {} );
|
Triggered when a cell has been selected in pqGrid.
ui.cells is undefined when a single cell is affected.
ui.rowData, ui.rowIndx, ui.dataIndx & ui.colIndx are undefined when number of cells are affected together.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row corresponding to selected cell. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - colIndx
Type: Integer
Zero based index of the column corresponding to selected cell. - cells
Type: Array
Array of objects when multiple cells are selected at once.
- rowData
Code examples:
Initialize the pqGrid with the cellSelect callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
cellSelect:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcellselect event:
|
1
|
$(
".selector"
).on(
"pqgridcellselect"
,
function
( event, ui ) {} );
|
Triggered when a cell has been deselected in pqGrid.
ui.cells is undefined when a single cell is affected.
ui.rowData, ui.rowIndx, ui.dataIndx & ui.colIndx are undefined when number of cells are affected together.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row corresponding to deselected cell. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - colIndx
Type: Integer
Zero based index of the column corresponding to deselected cell. - cells
Type: Array
Array of objects when multiple cells are deselected at once.
- rowData
Code examples:
Initialize the pqGrid with the cellUnSelect callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
cellUnSelect:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcellunselect event:
|
1
|
$(
".selector"
).on(
"pqgridcellunselect"
,
function
( event, ui ) {} );
|
Triggered after change in grid data takes place due to inline editing a cell, add/update/delete a row through method invocation, paste of rows/cells, undo, redo. Checks for editability of row/cell and validations take place before this event. It fires only once when a number of cells are affected together (e.g., paste of multiple cells, undo, redo, etc) rather than firing for each individual cell. This event is suitable to intimate the remote server about any data changes in the grid. This event has the same ui parameters as beforeValidate event but with a significant difference being that ui parameters are considered read only for this event.
- event
Type: Event - ui
Type: Object- rowList
Type: Array
Array of objects { rowData: rowData, newRow: newRow, oldRow: oldRow, type: type } where type may be 'add', 'update' or 'delete'. - source
Type: String
origin of the change e.g., 'edit', 'update', 'add' , 'delete', 'paste', 'undo', 'redo' or a custom source passed to addRow, updateRow, deleteRow methods. - allowInvalid
Type: Boolean
Allows invalid value and adds an invalid class to the cell/cells. - history
Type: Boolean
Whether add this operation in history. - checkEditable
Type: Boolean
Checks whether the row/cell is editable before making any change.
- rowList
Code examples:
Initialize the pqGrid with the change callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
change:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridchange event:
|
1
|
$(
".selector"
).on(
"pqgridchange"
,
function
( event, ui ) {} );
|
Triggered after beforeCheck event is fired and checkbox is checked. rows is passed as argument instead of rowData / rowIndx when multiple checkboxes are affected at once e.g., when JSON data is loaded having few cells with true value initially. Default action after this event is selection of row/rows which can be canceled by returning false.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - source
Type: String
Origin of checkbox event e.g., 'header'. - rows
Type: Array
Array of objects when multiple rows are affected at once.
- rowData
Code examples:
Initialize the pqGrid with the check callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
check:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcheck event:
|
1
|
$(
".selector"
).on(
"pqgridcheck"
,
function
( event, ui ) {} );
|
Triggered when a column is resized.
Code examples:
Initialize the pqGrid with the columnResize callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
columnResize:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcolumnresize event:
|
1
|
$(
".selector"
).on(
"pqgridcolumnresize"
,
function
( event, ui ) {} );
|
Triggered after the pqGrid is created. The data is available and the cells are rendered when this event occurs in case of local request. Use load event in case of remote request for availability of data and rendering of cells.
Code examples:
Initialize the pqGrid with the create callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
create:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridcreate event:
|
1
|
$(
".selector"
).on(
"pqgridcreate"
,
function
( event, ui ) {} );
|
Triggered when editor is created.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - column
Type: Object
Object containing properties of this column. - $editor
Type: jQuery
Editor.
- rowData
Code examples:
Initialize the pqGrid with the editorBegin callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
editorBegin:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgrideditorbegin event:
|
1
|
$(
".selector"
).on(
"pqgrieditorbegin"
,
function
( event, ui ) {} );
|
Triggered when editor is blurred.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - column
Type: Object
Object containing properties of this column. - $editor
Type: jQuery
Editor.
- rowData
Code examples:
Initialize the pqGrid with the editorBlur callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
editorBlur:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgrideditorblur event:
|
1
|
$(
".selector"
).on(
"pqgrieditorblur"
,
function
( event, ui ) {} );
|
Triggered when editor is about to be destroyed.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - column
Type: Object
Object containing properties of this column. - $editor
Type: jQuery
Editor.
- rowData
Code examples:
Initialize the pqGrid with the editorEnd callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
editorEnd:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgrideditorend event:
|
1
|
$(
".selector"
).on(
"pqgrieditorend"
,
function
( event, ui ) {} );
|
Triggered when editor is focused.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - column
Type: Object
Object containing properties of this column. - $editor
Type: jQuery
Editor.
- rowData
Code examples:
Initialize the pqGrid with the editorFocus callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
editorFocus:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgrideditorfocus event:
|
1
|
$(
".selector"
).on(
"pqgrieditorfocus"
,
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.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - column
Type: Object
Object containing properties of this column. - $editor
Type: jQuery
Editor.
- rowData
Code examples:
Initialize the pqGrid with the editorKeyDown callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
editorKeyDown:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgrideditorkeydown event:
|
1
|
$(
".selector"
).on(
"pqgrideditorkeydown"
,
function
( event, ui ) {} );
|
Triggered when a key is pressed in an editor. This event is fired after editorKeyDown event.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - column
Type: Object
Object containing properties of this column. - $editor
Type: jQuery
Editor.
- rowData
Code examples:
Initialize the pqGrid with the editorKeyPress callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
editorKeyPress:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgrideditorkeypress event:
|
1
|
$(
".selector"
).on(
"pqgrideditorkeypress"
,
function
( event, ui ) {} );
|
Triggered when a key is released after input in an editor.
- event
Type: Event - ui
Type: Object- rowData
Type: Object
Reference to 1-dimensional array or object representing row data. - rowIndx
Type: Integer
Zero based index of the row. - dataIndx
Type: Integer or String
Zero based index in array or key name in JSON. - column
Type: Object
Object containing properties of this column. - $editor
Type: jQuery
Editor.
- rowData
Code examples:
Initialize the pqGrid with the editorKeyUp callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
editorKeyUp:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgrideditorkeyup event:
|
1
|
$(
".selector"
).on(
"pqgrideditorkeyup"
,
function
( event, ui ) {} );
|
Triggered when a header cell is clicked.
Code examples:
Initialize the pqGrid with the headerCellClick callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
headerCellClick:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridheadercellclick event:
|
1
|
$(
".selector"
).on(
"pqgridheadercellclick"
,
function
( event, ui ) {} );
|
Triggered whenever
- type = add A reversible operation i.e., add/update/delete is done in the grid. It may be a single operation e.g., while inline editing of a cell, add/update/delete of a row by method invocation or a combination of operations e.g., paste of multiple cells/rows.
- canUndo = true, false There is a change of state from ability to perform and not perform undo operation.
- canRedo = true, false There is a change of state from ability to perform and not perform redo operation.
- type = undo, redo Undo (by Ctrl-Z or method invocation) or redo (by Ctrl-Y or method invocation) is performed.
- type = reset, resetUndo
Code examples:
Initialize the pqGrid with the history callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
history:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridhistory event:
|
1
|
$(
".selector"
).on(
"pqgridhistory"
,
function
( event, ui ) {} );
|
Triggered after the pqGrid has loaded the remote data.
Code examples:
Initialize the pqGrid with the load callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
load:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridload event:
|
1
|
$(
".selector"
).on(
"pqgridload"
,
function
( event, ui ) {} );
|
This event is deprecated. Please use editorEnd in its place.
Code examples:
Initialize the pqGrid with the quitEditMode callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
quitEditMode:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridquiteditmode event:
|
1
|
$(
".selector"
).on(
"pqgridquiteditmode"
,
function
( event, ui ) {} );
|
Triggered whenever the view of grid is refreshed.
- event
Type: Event - ui
Type: Object- pageData
Type: Array
2-dimensional array or JSON data for current page. - initV
Type: Integer
Index of first row displayed in the unfrozen viewport. - finalV
Type: Integer
Index of last row displayed in the unfrozen viewport. - initH
Type: Integer
Index of first column displayed in the unfrozen viewport. - finalH
Type: Integer
Index of last column displayed in the unfrozen viewport.
- pageData
Code examples:
Initialize the pqGrid with the refresh callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
refresh:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridrefresh event:
|
1
|
$(
".selector"
).on(
"pqgridrefresh"
,
function
( event, ui ) {} );
|
Triggered whenever a row is refreshed via call to refreshRow method.
Code examples:
Initialize the pqGrid with the refreshRow callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
refreshRow:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridrefreshrow event:
|
1
|
$(
".selector"
).on(
"pqgridrefreshrow"
,
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:
|
1
2
3
|
$(
".selector"
).pqGrid({
render:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridrender event:
|
1
|
$(
".selector"
).on(
"pqgridrender"
,
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:
|
1
2
3
|
$(
".selector"
).pqGrid({
rowClick:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridrowclick event:
|
1
|
$(
".selector"
).on(
"pqgridrowclick"
,
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:
|
1
2
3
|
$(
".selector"
).pqGrid({
rowDblClick:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridrowdblclick event:
|
1
|
$(
".selector"
).on(
"pqgridrowdblclick"
,
function
( event, ui ) {} );
|
Triggered when a row is right clicked.
Code examples:
Initialize the pqGrid with the rowRightClick callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
rowRightClick:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridrowrightclick event:
|
1
|
$(
".selector"
).on(
"pqgridrowrightclick"
,
function
( event, ui ) {} );
|
Triggered when a single row or number of rows have been selected in pqGrid.
ui.rows is undefined when a single row is affected.
ui.rowData and ui.rowIndx are undefined when number of rows are affected together.
Code examples:
Initialize the pqGrid with the rowSelect callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
rowSelect:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridrowselect event:
|
1
|
$(
".selector"
).on(
"pqgridrowselect"
,
function
( event, ui ) {} );
|
Triggered when a single row or number of rows have been deselected in pqGrid.
ui.rows is undefined when a single row is affected.
ui.rowData and ui.rowIndx are undefined when number of rows are affected together.
Code examples:
Initialize the pqGrid with the rowUnSelect callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
rowUnSelect:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridrowunselect event:
|
1
|
$(
".selector"
).on(
"pqgridrowunselect"
,
function
( event, ui ) {} );
|
Triggered whenever selection is changed by user action or by invoking the selection method. This event is triggered only when selectionModel.fireSelectChange is set to true since v2.4.0.
Code examples:
Initialize the pqGrid with the selectChange callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
selectChange:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridselectchange event:
|
1
|
$(
".selector"
).on(
"pqgridselectchange"
,
function
( event, ui ) {} );
|
Triggered after the pqGrid has sorted the data initiated by a user action.
Code examples:
Initialize the pqGrid with the sort callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
sort:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridsort event:
|
1
|
$(
".selector"
).on(
"pqgridsort"
,
function
( event, ui ) {} );
|
Triggered when toggle button is clicked and pqGrid alternates between maximized and normal state.
Code examples:
Initialize the pqGrid with the toggle callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
toggle:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgridtoggle event:
|
1
|
$(
".selector"
).on(
"pqgridtoggle"
,
function
( event, ui ) {} );
|
Triggered after beforeunCheck event is fired and checkbox is unchecked. Default action after this event is deselection of row/rows which can be canceled by returning false.
Code examples:
Initialize the pqGrid with the unCheck callback specified:
|
1
2
3
|
$(
".selector"
).pqGrid({
unCheck:
function
( event, ui ) {}
});
|
Bind an event listener to the pqgriduncheck event:
|
1
|
$(
".selector"
).on(
"pqgriduncheck"
,
function
( event, ui ) {} );
|
Generates a two dimensional array and colModel from a table DOM node and returns them as an Object { data: data, colModel: colModel }.
- $table
Type: jQuery
jQuery wrapper on the table DOM node.
Code examples:
Invoke the method:
|
1
2
3
4
|
//get data and colModel from table.
var
obj = $.paramquery.tableToArray( tbl );
var
dataModel = { data: obj.data};
var
colModel = obj.colModel;
|
Generates a two dimensional array from XML Document.
- xmlDoc
Type: XMLDocument
XML Document. - obj
Type: PlainObject
{itemParent: parentXMLNode, itemNames: [Array of node names] }. It assistes the XML Parser by providing necessary XML nodes structural information.
Code examples:
Invoke the method:
|
1
2
3
|
//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.
- xmlDoc
Type: XMLDocument
XML Document. - obj
Type: PlainObject
{itemParent: parentXMLNode, itemNames: [Array of node names] }. It assistes the XML Parser by providing necessary XML nodes structural information.
Code examples:
Invoke the method:
|
1
2
3
|
//get data from XML.
var
obj = { itemParent:
"book"
, itemNames: [
"author"
,
"title"
,
"genre"
,
"price"
,
"publish_date"
,
"description"
] };
var
data = $.paramquery.xmlToJson(xmlDoc, obj);
|