Version: 10.x

ParamQuery Grid Pro API Documentation for Version 10

Options
animModelType: object
Default: { on: undefined, duration: 290 }
It configures the animation of cell transitions during sorting, filtering, row expansion, column resize, reorder, etc in the grid. (v5.5.0)

on: It enables / disables the animations.

duration: It controls the duration of the animations in milliseconds.

Code examples:

Initialize the pqGrid with animModel option specified.

//turn animations on and set a new duration.
pq.grid( selector, {
    animModel:  { on: true, duration: 400 }
});


autoAddColType: object
Default: undefined
(v8.3.0)A blank column is automatically appended when right key is pressed on the rightmost visible column of grid.

Code examples:

Initialize the pqGrid with autoAddCol option specified.

pq.grid( selector, { autoAddCol: true });


autoAddRowType: object
Default: undefined
(v8.3.0)A blank row is automatically appended when down key is pressed on the last visible row of grid.

Code examples:

Initialize the pqGrid with autoAddRow option specified.

pq.grid( selector, { autoAddRow: true });


autofillType: Boolean
Default: true
This option works together with fillHandle option. When this option is true, grid figures out the pattern or series for numbers and date data types when fill handle is dragged across the cells.

Code examples:

Initialize the pqGrid with autofill option specified.

//turn autofill off.
pq.grid( selector, { autofill: false } );


autoRowType: Boolean
Default: true

Grid calculates and assigns height to every row in body, header ( can be overridden by autoRowHead ), and footer ( can be overridden by autoRowSum ) based on its content when this option is true.

Auto height of rows is computed asynchronously just a little while after refresh event.

autoRowHeight event is fired when auto height is complete.

Note that autoRow doesn't apply to group title and summary rows currently.

Code examples:

Initialize the pqGrid with autoRow option specified.

pq.grid( selector,{autoRow: true});


autoRowHeadType: Boolean
Default: same as autoRow

Grid calculates and assigns height to every row in header based on its content when this option is true.

Code examples:

Initialize the pqGrid with autoRowHead option specified.

pq.grid( selector,{autoRowHead: true});


autoRowSumType: Boolean
Default: same as autoRow

Grid calculates and assigns height to every row in footer based on its content when this option is true.

Code examples:

Initialize the pqGrid with autoRowSum option specified.

pq.grid( selector,{autoRowSum: true});


fillHandleType: String
Default: 'all'
This option is used to display a small square at right bottom corner of a selected range of cells which when dragged horizontally or vertically to extend selection, repeats or autofills the contents of the cells lying in initial selection to the cells in final selection.

This option has following possible values:

  • '': Disables the fillHandle.
  • 'horizontal': Enables the fillHandle only in horizontal direction.
  • 'vertical': Enables the fillHandle only in vertical direction.
  • 'all': Enables the fillHandle in both directions.

Code examples:

Initialize the pqGrid with fillHandle option specified.

pq.grid( selector, { fillHandle: 'vertical' } );

Get or set the fillHandle option, after initialization:

//getter
var fillHandle = grid.option( "fillHandle" );

//setter
grid.option( "fillHandle", '' );
    

bootstrapType: Object
Default: { on: false, thead: 'table table-striped table-condensed table-bordered', tbody: 'table table-striped table-condensed table-bordered', grid: 'panel panel-default' }
This option has been deprecated, Bootstrap theme should be used instead of this option. Bootstrap support can be turned on/off and bootstrap specific classes can be added with this option.
grid: This sub-option adds bootstrap classes to the grid container div.
thead: This sub-option adds bootstrap classes to grid header.
tbody: This sub-option adds bootstrap classes to grid body.
Pager and scrollbar specific bootstrap classes can also be added in this option and they are passed on to respective components.

Code examples:

Initialize the pqGrid with bootstrap option specified.

//turn bootstrap support on.
pq.grid( selector, { bootstrap: { on : true } } );

Get or set the bootstrap option, after initialization:

//getter
var bootstrap = grid.option( "bootstrap" );

    

bubbleType: Boolean
Default: false
By default the events generated by the grid doesn't bubble up the DOM. It can be turned on by setting this option to true.

Code examples:

Initialize the pqGrid with bubble option specified.

//turn bubbling on
pq.grid( selector, { bubble: true } );

Get or set the bubble option, after initialization:

//getter
var bubble = grid.option( "bubble" );
    

collapsibleType: Object
Default: see sub options below
OptionTypeDefaultDescription
collapsedbooleanfalseset or get the initial collapsed or expanded state of the grid upon creation.
cssobject
{ zIndex: 1000 }
is an object containing css rules which are applied to grid in maximized state.
onbooleantrueset or get the visibility of collapsible icon. Click on collapsible icon alternates the grid between expanded and collapsed state.
togglebooleantrueset or get the visibility of toggle icon. Click on toggle icon alternates the grid between default display state and toggled state. Grid occupies whole document in toggled state.
toggledboolean (v7.4.0) When true, grid is intialized in toggled state i.e., grid occupies the whole document height and width. Use toggle method to toggle the display state of grid dynamically.

Code examples:

Initialize the pqGrid with collapsible option specified.

//create grid in toggled state initially.
pq.grid( selector, { collapsible: { toggled: true } } );


colModelType: Array
Default: undefined
An array of objects where each object corresponds to column properties. In case of local data, grid can autogenerate colModel from the first row in data if colModel is not specified.

In most of the cases, colModel is updated by updating some properties of the columns. Since columns are object references, a refresh of colModel is not required. But if those properties change the visual layout of header in case of grouped columns, then colModel can be refreshed as below mentioned:

Code examples:

Initialize the pqGrid with colModel option specified.

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

Get or set the colModel option, after initialization:

//getter
var colModel = grid.option( "colModel" );

//setter for replacing whole colModel.
grid.option( "colModel", colModel );

//Refresh the colModel after updating visual properties (e.g., hidden) of grouped columns.
grid.refreshCM();

column > alignType: String
Default: undefined
It defines horizontal alignment of text in the columns. Possible values are "left", "right" and "center". If value is undefined and column dataType is a number ('float' or 'integer'), then align = "right" is automatically added by the grid.

(v7.0.0) Individual cells can override this with rowData.pq_cellprop[ dataIndx ].align

Code examples:

Initialize the pqGrid with column > align option specified.

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


column > attrHeadType: object
Default: undefined
(v7.0.0) Defines html attributes for the column header cell, used for setting title.

Code examples:

Initialize the pqGrid with column > attrHead option specified.

var colM =
[
    { title: "Company", width: 100 },
    { title: "Rank", width: 100, attrHead: {title: 'header title'} }
];
pq.grid( selector, { colModel: colM } );


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

It configures properties of a checkbox column. Checkbox columns can be created in 2 different ways (new in v5.2.0) as shown in the below code examples.

Checkbox columns can be programmatically manipulated with help of Checkbox method.

beforeCheck, beforeValidate, change, rowSelect, check events are fired in this order when checkboxes are checked / unchecked. rowSelect event is only fired when checkboxes are bound to row selections.

(v9.1.0) By default beforeValidate, change events are not fired and history is not saved when there is header checkbox or checkboxes are bound to row selections, but it can be changed with cb.history and cb.useTxn options.


OptionTypeDefaultDescription
allbooleanfalse When true, checkbox selection in the header cell affects all checkboxes in that column on all pages, otherwise it affects the checkboxes on current page only.
check, uncheckboolean | number | stringtrue, false cell value becomes equal to true or false depending upon checkbox state. The checkboxes can be mapped to non boolean values e.g., 'YES' or 'NO' by specifying check = 'YES' and uncheck = 'NO'.
headerbooleanfalse true value indicates to display a checkbox in header cell of the displaying column. The default header checkbox can be overridden with column.title to add custom label beside checkbox.
historyboolean (v9.1.0) Explicitly specify to store history of the checkbox state for undo / redo. History works only when change events are also used.
maxCheckinteger Maximum allowed total number of checked checkboxes.( v5.3.0 ) Header checkbox shouldn't be used when this is defined.
selectbooleanfalse When select is true, selection of rows gets bound to checkboxes.
useTxnboolean (v9.1.0) Explicitly specify to use transactions and fire beforeValidate, change events.

Code examples:

Initialize the pqGrid with column > cb option specified.

//define colModel ( one way ).
var colM = [
    //checkboxes are displayed and their values saved in same column.
    {
        type: 'checkbox',
        dataIndx: 'continued',
        dataType: 'bool',
        cb: {all: true, header: false}
    },
    ...
];

//define colModel ( alternative way, new in v5.2.0 )
var colM = [
    //checkboxes are displayed beside cell values in this column.
    {
        type: 'checkbox',
        dataIndx: 'ShipCountry',
        cbId: 'cb' //dataIndx of another column.
    },
    //checkbox values are stored in this column (usually hidden).
    {
        dataIndx: 'cb',
        dataType: 'bool',
        hidden: true,
        cb: {select: true, header: true}
    },
    ...
];
pq.grid( selector, {colModel: colM})


column > cbIdType: String or Integer
Default:
dataIndx of another column where checkbox values are stored ( new in v5.2.0). It's used along with type: 'checkbox'.

column > clsType: String
Default:
Class to be assigned to whole column including header.

column > clsFilterType: String
Default:
(v8.7.0) Class is assigned to header filter cell.

column > clsHeadType: String
Default:
Class is assigned to header cell. This class is also assigned to header filter cell of same column previous to v8.7.0

column > collapsibleType: Object
Default: undefined
A grouped parent column becomes collapsible if collapsible property is defined for it. A collapsible icon is displayed beside title of grouped column to toggle the collapsed state.
  • on:
    • if true, column is initialized in collapsed state.
    • if false or undefined, column is initialized in expanded state.
  • last:
    • if true, only last child column is visible in collapsed state.
    • if null (===), column.showifOpen property is used to decide the visibility of column w.r.t. open/close state of parent (v5.3.0).
    • if false or undefined, only first child is visible in collapsed state.

Code examples:

Initialize the pqGrid with column > collapsible option specified.

var colM = [
    { title: "Company", collapsible: { on: true, last: true }, colModel: [
        { title: "Company A" } , { title: "Company B" }
    ]},
    { title: "Rank", width: 100, dataIndx: 0 }
];
pq.grid( selector,{ colModel: colM });

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

//set collapsible of 2nd grouped column in colModel.
colM[1].collapsible = {on: true};
//refesh colModel.
grid.option( "colModel", colM );

column > colModelType: Array
Default: undefined
Nesting of colModel in a column results in grouping of columns. column acts as parent of the columns contained in the colModel. It can be nested any number of levels.

Code examples:

Initialize the pqGrid with column > colModel option specified.

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

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

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


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

column > copyType: Boolean
Default: undefined
When set to false, this option prevents a column from being copied to the clipboard. (v9.0.0) Please use column.skipExport option to prevent column from being exported.

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

Code examples:

Initialize the pqGrid with column > dataIndx option specified.

//array
var colM = [
{ title: "Company", width: 100 ,dataIndx : 1},
{ title: "Rank", width: 100,dataIndx : 0 }];
//JSON
var colM = [
{ title: "Company", width: 100 ,dataIndx: "company" },
{ title: "Rank", width: 100, dataIndx: "rank" }];

pq.grid( selector,{ colModel: colM });


column > dataTypeType: String
Default: "string"
This option tells grid how to treat column's data while copy/paste, editing, local sorting, local filtering and validations. Possible values are bool, date, float, integer, string or stringi.
  • bool is used for boolean values. It can be true, false, null or undefined.
  • date is used for date or datetime fields. It should be valid javascript recognizable date in either of these formats:
    • mm/dd/yy e.g., 07/04/1776
    • ISO 8601 format yy-mm-ddThh:mm:ss e.g., 1776-07-04T08:20:01 or 1776-07-04
  • float is used for numbers with decimal places like currency, etc.
  • html is used for html text.
  • integer is used for integers.
  • string is the used for text. It escapes html entities in text so as to make it safe for rendering.
  • stringi is similar to string in all aspects except that it's used for case insensitive sorting.

Code examples:

Initialize the pqGrid with column > dataType option specified.

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


column > deFormatType: Function
Default:
A callback function to reverse a formatted value. It's the counterpart of column.format callback and is required by the grid in filtering UI. ( v5.3.0 )

column > denyAggType: boolean
Default:
When true, it prevents addition of column via drag n drop in toolPanel -> aggregates panel. Added in v5.1.0

column > denyGroupType: boolean
Default:
When true, it prevents addition of column via drag n drop in toolPanel -> row grouping panel and in grouping header toolbar. Added in v5.1.0, this option replaces column.groupable option.

column > denyPivotType: boolean
Default:
When true, it prevents addition of column via drag n drop in toolPanel -> column pivot panel. Added in v5.1.0

column > editableType: Boolean or Function
Default: undefined
Set it to false to disable editing for the whole column or implement a callback function to return true or false selectively for different rows.

The callback function receives ui:{ rowIndx, rowData, colIndx, dataIndx, column } as argument.

(v6.0.0) This option value or callback return value of true / false takes precedence over global editable option while deciding final editability of a cell in grid.

Code examples:

Initialize the pqGrid with column > editable option specified.

var colM = [
//disable editing for Company column selectively.
{ title: "Company", width: 100, dataType: "string", editable: function(ui){
    var rowIndx = ui.rowIndx;
    return (rowIndx%2 === 0);
}},
//disable editing for Rank column.
{ title: "Rank", width: 100, dataType: "integer", editable: false }];

pq.grid( selector,{ colModel: colM });


column > editModelType: Object
Default: undefined
It's an object defining the editing behaviour for a column and it overrides the global editModel properties.

Code examples:

Initialize the pqGrid with column > editModel option specified.

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


column > editorType: Object or Function or Boolean
Default: undefined
It's an object or callback function defining the properties of inbuilt or custom editor and it overrides the global editor properties. It has following properties: type, init, prepend, options, labelIndx, valueIndx, groupIndx, dataMap, mapIndices, getData, cls, style, attr.

The editor is not displayed when it has boolean value of false or a callback returning false. It's useful for special type of columns i.e., type = 'checkbox' where cell renderer works as editor.

It can also be a callback and return the mentioned properties.

type can be textbox, textarea, contenteditable, select, checkbox, callback function, string or null. Callback variant receives an object argument containing the cell coordinates and returns control name e.g., textbox, textarea, select, etc. which makes it convenient to support different editors in different rows in same column.

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

Since v8.4.0, only init callback can be used to create custom editors

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

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

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

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

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

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

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

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

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

cls injects css class into the editor e.g., cls: 'green yellow' injects green & yellow classes in the editor control. Callback variant is supported to apply different class to editors in different rows.

style adds inline css style to the editor e.g., style: 'font-style:italic;' applies font-style inline css. Callback variant is supported to apply different styles to editors in different rows.

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

Change Log

  1. Since v3.2.0, column.editor can also be a callback.

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

Code examples:

Initialize the pqGrid with column > editor option specified.

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


column > exportRenderType: Boolean
Default: undefined
Rendered cell values ( otherwise raw cell data ) in this column are included in the exported data when this option is true.

This option overrides render parameter of exportData() method for the current column.


column > filterType: Object
Default: undefined

It describes the filter behavior of the column using an object having following sub-options:

OptionTypeDescription
attrstring adds html attributes to the control.
conditionListArray Limit the display of specified conditions in the column filter menu e.g., conditionList: [ 'begin', 'end', 'range' ]

All the inbuilt and custom conditions applicable to dataType of column are displayed otherwise.

conditionExcludeArray Exclude display of specified conditions from the column filter menu e.g., conditionExclude: [ 'between', 'regexp' ]
conditionsObject Used to override inbuilt or custom condition properties for current column filter.
        //override range compare function.
        conditions: {
            range:{
                //override compare property of range condition.
                compare: (cellData, value, value2) => boolean
            }
        }
        
clsstring cls is a string to inject css class(es) to the control.
crulesArray Used to define multiple filters to a single column.
        crules: [
            { condition: 'contain', value: 'a' },
            { condition: 'end', value: 'b' },
            ...
        ]
        
OptionTypeDescription
conditionstring defines filter condition applied to current column and can be any one of inbuilt or custom conditions i.e., contain, notcontain, begin, end, equal, notequal, empty, notempty, less, great, between, range, regexp, notbegin, notend, lte (less than or equal to), gte (greater than or equal to).

Custom filter conditions can be defined by extending pq.filter.conditions as explained below

valueany value is the data against which the column is matched and is ignored when condition is empty or notempty. It's an array of values when condition is range and is a regular expression when condition is regexp.
value2any Similar to value, it's applicable only for between condition.
diExtraArray DataIndx of extra columns for which data is to be loaded in the filter dropdowns. There should be one to one correspondence between values of filter column and values of extra columns. ( new in v5.3.0 )
diExtra: [ 'code' ]
dpOptionsObject Used to add options to date picker in filter cell during initialization.

Check list of all initialization options here http://api.jqueryui.com/datepicker

dpOptions: {
            ...
        }
dpOptions2Object Similar to dpOptions, applies to 2nd input in case of 2 inputs e.g., between filter condition. dpOptions are applied to 2nd input when dpOptions2 not defined.
formatstring, function It can be used to override the column.format used by jQueryUI datepicker and filter dropdown (v5.3.0).
gridOptionsObject Used to add properties to grid used for selecting options in range condition during initialization.
        gridOptions: {
            numberCell: {show: false}
        }
        
groupIndxstring field name of groupby column defined to group options for range condition. e.g., for the JSON data:
[
    { country: 'Japan', region: 'Hokkaidō' },
    { country: 'Japan', region: 'Chūbu' },
    { country: 'UK', region: 'London' },
    { country: 'UK', region: 'Yorkshire' },
    ...
]
valueIndx = labelIndx = "region", groupIndx = "country"
initFunction callback function to custom initialize a control in filter header cell and filter menu in header cell i.e., jQueryUI datepicker, autocomplete, HTML5 datetime or any other plugin. By default grid initializes the filter controls. This callback should return true when it successfully initializes a control to skip pqGrid's initialization of control. It receives ui as argument containing the below mentioned properties. (v10.0.0) indx is passed.
  • dataIndx
  • column
  • indx: indx is 0 when callback is called for 1st filter rule and 1 in case of 2nd filter rule.
  • $cell: jQuery wrapper on the cell containing control(s).
  • $editor: jQuery wrapper on control(s). No of editors vary from 0 to 4 depending upon filter rule condition and no of rules
listenerobject, function, string listener is used to bind event with filter UI control to trigger filtering e.g.,
  • listener = { 'name of event' : function( evt, ui ){ } }
  • listener = 'name of event'
  • listener = function( evt, ui ){ }

where 'name of event' can be any native event i.e., keyup, input, change, click, etc or custom event i.e., timeout or combination of more than 1 event i.e., 'timeout change'

(v10.1.0) 'timeout change' is the default listener for textbox and textbox2. filtering is triggered only once even if multiple events are fired for the same value in textbox.

timeout is inbuilt custom event which triggers the filtering after number of microseconds ( specified in filterModel.timeout ) have elapsed since the last input or change event.

ui in callback is an object with the following properties.

  • dataIndx
  • column
  • value: value in the control.
  • value2: value in the 2nd control. Applicable for conditions where 2 inputs are required i.e., 'between'

listener is optional since v5.2.0.

maxCheckinteger Maximum allowed total number of checked checkboxes.( v5.3.0 )
menuIconboolean to display or override display of filter menu icon in the filter row.
modestring defines mode of filtering between multiple conditions when applied on a single column. AND is the default value.
optionsArray, function options is an array holding options for range condition.
Syntax of data for options can be an
  • array of strings e.g., [ 'Argentina', 'Austria', ..]
  • array of associative value label pairs e.g., [ { a: 'Apple' }, { b: 'Bat' }, ... ]
  • array of {dataIndx: value} pairs e.g., [ { 'ShipCountry': 'Argentina' }, { 'ShipCountry': 'Austria' }, ... ]

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

This option is optional because Grid creates list of options dynamically from its data cache every time range filter is accessed.

However if this option is specified then grid always uses it instead of creating list by itself.
e.g., it makes sense to specify this option yourself ( by querying your remote server ) in case of remote paging because grid doesn't have all records in its cache.

selectGridCreatedFunction callback function called when dropdown grid is initialized. It provides access to dropdown grid instance e.g., ui.grid.

Arguments: ui: {grid, column}

selectGridObjFunction callback function called before dropdown grid is initialized. It can be used to update the initialization object e.g., ui.obj ( v5.3.0 ).

Arguments: ui: {obj, column}

stylestring It adds inline css style to the control.
titlefunction (v10.0.0) Callback function to return title of the header filter cell in case of dropdowns e.g., for range, equal, etc conditions. It has 2 arguments values ( array of values selected in dropdown ) & column.

Custom filter condition can be defined by extending pq.filter.conditions as below:

//name of the new condition is notbetween.
pq.filter.conditions.notbetween = {
    filter: {
        //html attributes to apply to control.
        attr: "",

        //class apply to control.
        cls: "",

        //css style to apply to control.
        style: "",

        //type of UI, textbox (one text box), textbox2 ( for 2 text boxes ), checkbox or select (for dropdown).
        type: 'textbox2',

        //custom callback to initialize control or use inbuilt initialization function (pq.filter.datepicker).
        init: pq.filter.datepicker
    },
    /*optional callback to return filter properties dynamically.
    useful for different type of UI for different dataTypes
    i.e., checkbox for bool, textbox for string, number, etc.*/
    //filterFn?: function(ui){},

    /*condition applicable to number and date dataType (amongst date,number,string,bool)
    converts cell and filter values into native data types making it easier for data comparison.
    also makes this filter condition appear in header menu filter condition dropdown for the columns having these dataType.*/
    number: 1, date: 1,

    //even though condition applies to number and date, still show this condition in
    //string dataType columns. (amongst boolList, dateList, numberList, stringList )
    stringList: 1,

    //compare function does the actual filtering.
    compare: function (cellData, val, val2) {
        //debugger;
        return (cellData < val || cellData > val2)
    }
}

//assign localization string to condition.
$.paramquery.pqGrid.defaults.strConditions.notbetween = "Not between";

Code examples:

Initialize the pqGrid with column > filter option specified.

var colM =
[
    {
        dataIndx: "ShipCountry",
        filter: {
            crules: [{ condition: 'equal', value: 'france' }]
        }
    },
    {
        title: "Ship Region",
        groupIndx: "ShipCountry",
        filter: {
            crules: [{ value: ['AR', 'CA', 'WA'], condition: 'range' }]
        }
    }
];
pq.grid( selector, {colModel: colM} );

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

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

//setter
//set filter of 2nd column
colM[1].filter =
{
    crules: [{ condition: "range", value: [ "IN", "US" ] }]
};

column > filterFnType: Function
Default: undefined
This is a callback function that may return same properties as column.filter dynamically.

column > fmtDateEditType: String
Default:
(v10.0.0) It works same as global fmtDateEdit option but specific to the column.

column > fmtDateFilterType: String
Default:
(v10.0.0) It works same as global fmtDateFilter option but specific to the column.

column > fmtNumberEditType: String
Default:
(v10.0.0) It works same as global fmtNumberEdit option but specific to the column.

column > fmtNumberFilterType: String
Default:
(v10.0.0) It works same as global fmtNumberFilter option but specific to the column.

column > formatType: String or Function
Default:

It sets the display format for numbers and datetime values in a column using a string or a callback function.

Callback function introduced in v5.3.0; when used, its counterpart column.deFormat should also be provided.

  • If callback is used, then cell data is exported to Excel as string ( return value of format ).
  • If string format is used, then cell data and format are exported separately

String format follows the same format rules as used in Excel

To define number formats, you can specify up to four sections of format code. These sections of code define the formats for positive numbers, negative numbers, zero values, and text, in that order. The sections of code must be separated by semicolons (;).

Few examples for numbers:

#,###.00;(#,###.00);0.00;"gross receipts for "@
#.000
#,###.0
$#,###.00
0.00%
0.00E+00
#,###.00 €

Few examples for datetime formats:

mm-dd-yyyy
dd-mm-yy
mmmm,yyyy
mmmmm,yyyy hh:mm:ss
hh:mm AM/PM

Note that Excel format for datetime is used since v10.0.0, jQueryUI datepicker format was used before this version.

See Excel format documentation for more examples on numbers, currency, scientific & datetime formats.

Code examples:

Initialize the pqGrid with column > format option specified.

var colM = [
    { dataIndx: 'revenue', dataType: "float", format: "¥#,###" },
    { dataIndx: "ShipDate", dataType: "date", format: "dd-mm-yyyy" },
    { dataIndx: "quarter", dataType: "integer",
        format: function(val){
            return [ 'Q1', 'Q2', 'Q3', 'Q4' ][ val ];
        },
        deFormat: function(val){
            return { 'Q1': 0, 'Q2': 1, 'Q3': 2, 'Q4': 3 }[ val ];
        }
    }
];
pq.grid( selector,{ colModel: colM });


column > formatRawType: String
Default: dd/mm/yy
(v5.3.0) This option sets the format of the date values send as parameters during remote filtering.

column > formulaType: Function
Default:
This option is removed in v4.0.0, use global formulas option instead of this.

column > groupableType: Boolean
Default: undefined
By default a column is groupable except when this option is set to false.

column > groupChangeType: Function
Default: undefined
By default a column is grouped by cell value. Custom grouping or range grouping e.g., by age groups or by months, years, etc can be done by implementing this callback. This is useful for numbers ( floats and integers ) and dates.

The callback receives cell value as argument and it should return a string by which grouping is desired.

Code examples:

Initialize the pqGrid with column > groupChange option specified.

var colM = [
    {
        dataIndx: "age",
        dataType: 'integer',
        groupChange: function(val){
            var lower = Math.floor( val/ 10 ) * 10,
                upper = Math.ceil( (val + 1)/ 10 ) * 10;
            return lower + " < " + upper;
        }
    }
];
pq.grid( selector, {colModel:colM} );


column > halignType: String
Default: undefined
It determines the horizontal alignment of text in the column headers. Possible values are "left", "right" and "center". If it's undefined, then column.align is applied to column headers.

column > hiddenType: Boolean
Default: undefined
Column is hidden when this option is true. To dynamically show/hide the columns, Columns().hide() method is recommended.

Code examples:

Initialize the pqGrid with column > hidden option specified.

var colM = [
//1st column is hidden.
    { title: "ShipCountry", width: 100, hidden:true },
    { title: "Customer Name", width: 100 }
];

pq.grid( selector,{ colModel: colM });

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

//setter: hide 2nd column.
colM[1].hidden = true;

//refresh colModel after show/hide columns for grouped columns.
grid.refreshCM();

column > hvalignType: String
Default: undefined
(v7.0.0) Defines vertical alignment of text in the column header cells. Possible values are "top", "center" and "bottom".

column > maxWidthType: Integer or String
Default: 100%
Maximum possible width of the column in pixels or in percent of width of the grid. Column width i.e., column.width, if set explicitly or computed implicitly more than value of this property is ignored.

Code examples:

Initialize the pqGrid with column > maxWidth option specified.

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



column > menuIconType: Boolean
Default:
Used to display or override display of header menu icon for this column.

column > menuUIType: object
Default:
Used to define or override header menu structure for this column, please refer to the main menuUI option for its structure.

column > menuInCloseType: Boolean
Default:
Grouped column is collapsed in header menu when this is true.

column > menuInDisableType: Boolean
Default:
Column is disabled in header menu when this is true, so checkbox state can't be changed.

column > menuInHideType: Boolean
Default:
column is hidden in header menu when this is true.

column > minWidthType: Integer or String
Default: 50
Minimum possible width of the column in pixels or in percent of width of the grid. Column width i.e., column.width, if set explicitly or computed implicitly less than value of this property is ignored.

Code examples:

Initialize the pqGrid with column > minWidth option specified.

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


column > nodragType: Boolean
Default: undefined
column can't be dragged when this is true.

column > nodropType: Boolean
Default: undefined
Any draggable column can't be dropped on this column when this option is true.

column > parentType: Object
Default: undefined
Read only property (shouldn't be set or changed) that points to the parent column of a column. It is useful to traverse the hierarchy of grouped columns.

column > pasteType: Object
Default: undefined
(v8.0.0) When set to false, it skips paste of data on a column

column > pivotSortFnType: Function
Default:

By default the pivot grouped columns are sorted alphabetically or in numeric order.

This is a callback function to customize sorting of pivot columns(v5.4.0).

It receives 2 col objects as arguments; both col objects have sortby property which are used to sort the columns.

pivotSortFn: function(col1, col2){
    return (col1.sortby * 1 < col2.sortby * 1 ? 1 : -1);
}

column > postRender( ui )Type: Function
Default:
It's a callback function used to manipulate view of the cell after whole grid view is rendered. As compared to column.render callback which is limited to returning static content only, this callback is more capable in that cell node can be further manipulated to bind individual event listeners or create fully interactive cells such as charts or graphs.

This function can be called synchronously or asynchronously depending upon value of option postRenderInterval.

Note: This callback works only when option postRenderInterval is defined.

  • ui
    Type: Object
    • cell
      Type: Element
      Cell DOM node.
    • rowData
      Type: Array or PlainObject
      Reference to 1-dimensional array or object representing row data.
    • rowIndx
      Type: Integer
      Zero based index of the row.
    • rowIndxPage
      Type: Integer
      Zero based index of the row on current page.
    • dataIndx
      Type: Integer or String
      Zero based index in array or key name in JSON.

column > render( ui )Type: Function or String
Default:
It's a callback function to control rendering of whole cell, that returns any of the below:

  1. String (plain or html string) to be displayed in the cell.
  2. null or undefined in which case the default rendering of the cell takes place.
  3. Object having properties {text, cls, attr, style} where
    • text is a string (plain or html string) to be displayed in the cell.
    • cls is the css class added to the cell.
    • attr is HTML attribute added to the cell.
    • style is css inline style added to the cell.

Cell is rendered as per the order provided below: Whenever renderer of higher priority returns null/undefined, next renderer is called or used.

  1. custom column.render
  2. Inbuilt cell renderers
  3. formatted value as per column.format
  4. raw data of the cell as per rowData[ dataIndx ]

  • ui
    Type: Object
    • rowData
      Type: Array or PlainObject
      Reference to 1-dimensional array or object representing row data.
    • cellData
      Type: any
      Value of current cell.
    • rowIndx
      Type: Integer
      Zero based index of the row.
    • dataIndx
      Type: Integer or String
      Zero based index in array or key name in JSON.
    • colIndx
      Type: Integer
      Zero based index of the column.
    • formatVal
      Type: String
      Formatted value of the cell dependent upon column.format.
    • Export
      Type: Boolean
      true when render callback is called during export of data.

Code examples:

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

//named function
function customRenderer( ui )
    //inject class, style or HTML attributes in the cell.
    return {
        cls: 'red',
        style: 'font-weight:bold;',
        attr: 'some HTML attribute'
    };
};
var colM = [
{
    dataIndx: "ShipCountry",
    //points to named function (useful while loading colModel remotely as JSON)
    render: 'customRenderer'
},
{
    dataIndx: "Region",
    render: function( ui )
        //set max height of cell with help of render function.
        return {
            text: "
" + ui.cellData + "
", style: "height:30px;" }; } } ]


column > renderLabelType: Function
Default:

Callback function for partial rendering ( label beside checkbox, icon, etc ) of a cell in checkbox column, row grouping column or treegrid column( v5.3.0 ).

It's easier to use this renderer than complete renderer of a cell as the grid is still responsible for rendering the remaining content i.e., checkbox, icon etc and adding required indent to the cell.

It gets same arguments as that of column.render callback.


column > resizableType: Boolean
Default: true
Column is resizable depending upon the value of this option.

column > showifOpenType: Boolean
Default:

This option (v5.3.0) is applicable only in case of grouped columns and when parent column has collapsible.last === null property.

  • If true, then show this column only if parent column is open/expanded.
  • If false, then show this column only if parent column is close/collapsed.
  • If undefined, then always show this column irrespective of close/open state of parent column.

If all the children columns are getting hidden for either open or close state of parent, then first child is made visible.

Code examples:

Initialize the pqGrid with column > showifOpen option specified.

var colM = [
    {
        title: 'Parent',
        collapsible: { last: null },
        colModel: [
            { title: "A", showifOpen: true },
            { title: "B", showifOpen: false },
            { title: "C" }
        ]
    }
    //when parent is collapsed, only "B" and "C" columns are visible.
    //when parent is expanded, only "A" and "C" columns are visible.
]


column > skipExportType: Boolean
Default: undefined
(v9.0.0) This option when set to true prevents column from being exported. This option can also be used for grouped columns.

column > skipFocusType: Boolean
Default: undefined
(v9.1.0) This option skips focus on column cells while key navigation with arrow and tab keys.

column > sortableType: Boolean
Default: true
Set it to false to disable sorting for a column.

column > sortTypeType: Function
Default: undefined
This option is used for local custom sorting. The callback function receives 3 parameters rowData1, rowData2 & dataIndx and it has to return +1 if rowData1[dataIndx] > rowData2[dataIndx], -1 if rowData1[dataIndx] < rowData2[dataIndx] and 0 if rowData1[dataIndx] and rowData2[dataIndx] are identical in sorting order.

Code examples:

Initialize the pqGrid with column > sortType option specified.

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


column > styleType: object
Default: undefined
(v7.0.0) Defines css style for all cells in the column. Individual cells can override the column style by rowData.pq_cellstyle[ dataIndx ]

Code examples:

Initialize the pqGrid with column > style option specified.

var colM =
[
    { title: "Company", width: 100 },
    { title: "Rank", width: 100, style: {'font-weight': 'bold'} }
];
pq.grid( selector, { colModel: colM } );


column > styleHeadType: object
Default: undefined
(v7.0.0) Defines css style for the column header cell only.

Code examples:

Initialize the pqGrid with column > styleHead option specified.

var colM =
[
    { title: "Company", width: 100 },
    { title: "Rank", width: 100, styleHead: {'font-weight': 'bold'} }
];
pq.grid( selector, { colModel: colM } );


column > summaryType: Object
Default: undefined
An object containing type and edit properties of summary for this column.

It's used in case of grouping of rows (see groupModel), grand summary row at the bottom and treegrid.

type is name of predefined aggregates e.g., ( "avg", "count", "min", "max", "sum" ) or name of a custom aggregate.

edit is boolean property that defines editability of summary in this column. This option can also be used to override the global editability of summary fields set by groupModel.summaryEdit.

(v6.0.0) Different dataIndx in row grouping can have different aggregates by adding dataIndx: "aggregate function" to the summary.

Code examples:

Initialize the pqGrid with column > summary option specified.

var colM =
[
    {
        dataIndx: "ShipCountry",
        //for all dataIndx, default aggregate type is "min", except in case of country for which aggregate is "avg".
        summary: { type: "min", edit: true, country: "avg" },
        ...
    },
    ...
];
pq.grid( selector, { colModel: colM } );


column > titleType: String or Function
Default:
Title or Heading of the column. It can be a callback that returns html to be displayed as column title.

column > tpClsType: String
Default: undefined
Class to be assigned to a column displayed in toolPanel. Added in v5.1.0, it's useful to assign css styles such as background color, font stlye, etc to a column. There is a special class "pq-deny-drag" which if assigned to a column prevents it from being dragged in toolPanel.

Code examples:

Initialize the pqGrid with column > tpCls option specified.

var colM = [
{ title: "ShipCountry", width: 100, tpCls:'red' },
{ title: "Customer Name", width: 100 }];

pq.grid( selector, { colModel: colM } );


column > tpHideType: Boolean
Default:
Hide this column in toolPanel. Added in v5.1.0

column > typeType: String
Default: null
Type of column. It has 2 possible values: 'checkbox' and 'detail'.

checkbox turns the whole column into checkboxes which can be used for editing cells or row selections. The display of individual checkboxes can be overridden with column.render callback. This column needs to be bound to a field with boolean ( e.g., true/ false ) or string ( e.g., 'YES'/ 'NO' ) values to save the state of the checkboxes. It's important to specify:

  1. appropriate column.dataType
  2. selection.type = null when this column is used for row selections.
  3. column.editor = false
Please check column.cb for complementary properties.

detail turns the column into icons used to display the collapsed or expanded state of rows. It's used in conjunction with detailModel. dataIndx of this column is 'pq_detail'. rowData[ 'pq_detail' ][ 'show' ] == true for the expanded rows.

These special columns shouldn't be added or removed dynamically.

(v7.0.0) Checkbox column can be added or removed dynamically now.

Code examples:

Initialize the pqGrid with column > type option specified.

var colM = [
{ title: "", width: 50, type: 'checkbox' },
{ title: "Customer Name", width: 100 }];

pq.grid( selector, { colModel: colM } );


column > useLabelType: boolean
Default:

Wraps checkbox cell of ordinary columns, row grouping or treegrid within a label( v5.3.0 ).

It helps in enlarging the clickable area of a checkbox but may not be required when checkbox cell is also editable.


column > validationsType: Array
Default: undefind

An array of objects where every object sets up single validation or warning rule for a column or cell. It has following sub-options

OptionDescription
type
It can be minLen, maxLen, gt, gte, lt, lte, regexp, nonEmpty, neq or callback function where 
minLen is minimum length, 
maxLen is maximum length, 
gt is greater than,
gte is greater than or equal to, 
lt is less than, 
lte is less than or equal to,
nonEmpty doesn't allow "", null or undefined,
regexp is regular expression, 
neq is not equal to,
callback function receives an argument object { column:column, value:value, rowData:rowData, msg:msg }
where msg can be modified inside the callback function by reference.
valueIt's the allowed value for a validation.
msgIt's the message displayed in tooltip for validation or warning.
warnSet warn = true to turn a validation into a warning.
Note that global validation options icon, cls & style in options.validation can be overridden in individual column validations. Similarly global warning options in options.warning can be overridden in individual column warnings.

Code examples:

Initialize the pqGrid with column > validations option specified.

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


column > valignType: String
Default: undefined
(v7.0.0) It defines vertical alignment of text in the columns. Possible values are "top", "center" and "bottom".

Individual cells can override this with rowData.pq_cellprop[ dataIndx ].valign

Code examples:

Initialize the pqGrid with column > valign option specified.

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


column > widthType: Integer
Default: null
Width of the column in pixels or in percent of width of the grid. It defaults to minimum width of the column when width is not specified or when width is less than minimum width.

Code examples:

Initialize the pqGrid with column > width option specified.

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


columnBordersType: Boolean
Default: true
Draws vertical borders around all the columns.

columnTemplateType: Object
Default: undefined

This option defines common column properties to avoid repetition of properties in all columns in keeping with the principle of DRY (don't repeat yourself).

Properties defined in this option are:
  1. Deep cloned ( in case of nested properties ) and copied to all columns.
  2. Not copied when column contains defined value for that property, so a property can be overriden in individual columns.
  3. Properties are copied to lowermost data bound columns only in case of nested columns.
  4. colModel property shouldn't be added to this option.

Code examples:

Initialize the pqGrid with columnTemplate option specified.

//define all columns to have same width unless overridden in individual columns.
pq.grid( selector, { columnTemplate: { width: '20%', minWidth: 50 } } );


contextMenuType: Object
Default:

(v6.0.0) Configures and sets up context menu on body cells, number cells, header cells. (v7.2.0) Updated to include all elements in the grid.

OptionType / DefaultDescription
onbooleanturns on/off the context menu.
preInit
(evt: any, ui: any) => void
Callback function called before every initialization / opening of context menu. Default context menu of the browser opens up if this callback returns false.

Default implementation of this callback returns false when ctrl or meta key is pressed.

evt type is context event

ui provides detailed information about the element on which context menu is activated.

init
(evt: any, ui: any) => void
Callback function is called during every initialization / opening of context menu.

Default implementation of this callback adds focus to the cell on which context menu is activated.

evt is event whose type is cellRightClick or headRightClick

evt type is context event

ui provides detailed information about the element on which context menu is activated.

items
itemX[ ] | ( (evt, ui) => itemX[ ] )
ui: {
    $td?: jQuery //for body cell
    $th?: jQuery //for header cell
    colIndx: number //-1 for number cell
    rowIndx: number
    rowData: any
    dataIndx: string //undefined for group columns
    column: object //
    filterRow?: boolean //true for header filter row
}
type itemX = citem | string
type citem = {
    cls?: string //css class
    disabled?: boolean //disabled item
    icon?: string //icon displayed beside item
    action?: ((evt, ui, citem: citem)=> boolean | void)
    name: string //title of the item
    shortcut?: string //shortcut e.g., Ctrl - V, for display only
    style?: string //css style added to item title
    subItems?: Array //nested items within an item
    tooltip?: string //adds title attribute to the item
}

Array of items or callback to return array of items where item is an object of properties as below or predefined string i.e., 'separator'.

Context menu can be built dynamically by using callback. callback is called everytime context menu is opened in the grid.

Browser context menu opens instead of grid context menu if callback returns empty array. This can be used to suppress grid context menu e.g. when ctrl key is pressed by checking for evt.ctrlKey in the callback.

Context menu is closed by default whenever an item with an action / listener is clicked which can be prevented by returning false in the action.

evt is event whose type is cellRightClick or headRightClick

evt type is context event

ui provides detailed information about the element on which context menu is activated.

For backward compatibility, this option also works as fallback option when cellItems, headItems, imgItems, numItems are not defined.

bodyItems
itemX[ ] | ( (evt, ui) => itemX[ ] )
(v8.7.0)menu items for empty body region. Same structure as items.
cellItems
itemX[ ] | ( (evt, ui) => itemX[ ] )
(v7.2.0)menu items for body cells. Same structure as items.
headItems
itemX[ ] | ( (evt, ui) => itemX[ ] )
(v7.2.0)menu items for header cells. Same structure as items.
imgItems
itemX[ ] | ( (evt, ui) => itemX[ ] )
(v7.2.0)menu items for images. Same structure as items.
miscItems
itemX[ ] | ( (evt, ui) => itemX[ ] )
(v7.2.0)menu items for all other miscellaneous items in the grid like toolbar, grouping toolbar, title, footer, etc. Same structure as items.
numItems
itemX[ ] | ( (evt, ui) => itemX[ ] )
(v7.2.0)menu items for number cells. Same structure as items.
tabItems
itemX[ ] | ( (evt, ui) => itemX[ ] )
(v8.0.0)menu items for tabs. Same structure as items.

Code examples:

Initialize the pqGrid with contextMenu option specified.

pq.grid( selector, { contextMenu: {
    on: true,
    cellItems: [
        {
            name: 'Undo',
            action: function(evt, ui, item){
                this.History().undo();
            }
        },
        ...
    ]
} } );


copyModelType: Object
Default: { on: true, render: false, header: undefined }
It controls the behavior when data is copied from grid with shortcut keys or with API.
  • render: When render is true, formatted or rendered cells are copied instead of raw data. column.exportRender overrides this option for individual columns.
  • header: (v7.3.0) When true, it includes the header cells in copied data. It can be overridden by header parameter of Range.copy() method.

Code examples:

Initialize the pqGrid with copyModel option specified.

pq.grid( selector, { copyModel: { render: true } } );


dataModelType: Object
Default: Object
It contains information about the data in array format and various other properties related to data. It's mandatory to pass dataModel to pqGrid constructor. If dataModel is changed after initialization, new value overwrites the previous value, so it should contain all the sub-options, even the default ones. Safer way to set it after init is to pass individual sub-options rather than complete dataModel.

Code examples:

Initialize the pqGrid with dataModel option specified.

var dataSales = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'],
    [2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
    ...
];
pq.grid( selector, { dataModel: { data: dataSales, ... }, ... } );

Get or set the dataModel option, after initialization:

//getter
  //get complete dataModel.
var dataModel = grid.option( "dataModel" );
  //get sub-option of dataModel.
var data = grid.option( "dataModel.data" );

//setter
  //either new value should contain all sub-options
grid.option( "dataModel", { data: dataSales, ... } );
  //or pass individual sub-options which is safer.
grid.option( "dataModel.data", new_data );

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

Code examples:

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

pq.grid( selector, { dataModel:{ beforeSend: function( jqXHR, settings ){

}});


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

Code examples:

Initialize the pqGrid with dataModel > contentType option specified.

pq.grid( selector, { dataModel: {
            contentType :'application/json; charset=UTF-8' }} );


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

Code examples:

Initialize the pqGrid with dataModel > data option specified.

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

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

//getter
var data = grid.option( "dataModel.data" );

//setter
grid.option( "dataModel.data", dataSales );
//setter of dataModel.data is followed by refreshDataAndView method call.
grid.refreshDataAndView()

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

Code examples:

Initialize the pqGrid with dataModel > dataType option specified.

pq.grid( selector, {dataModel:{ dataType: "XML"} } );


dataModel > error( jqXHR, textStatus, errorThrown )Type: Function
Default: undefined
This option is relevant only when dataModel.location is remote. Callback handler for Ajax error.

Code examples:

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

pq.grid( selector, {dataModel:{error:function( jqXHR, textStatus, errorThrown ){} }} );


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

Code examples:

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

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

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

//getter
var getData=grid.option( "dataModel.getData" );

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

dataModel > getUrl( { colModel, dataModel, filterModel, groupModel, pageModel, sortModel } )Type: Function
Default: undefined
It's a callback function which should return the url and data associated with GET or POST requests.

Points to note:

  • This option is applicable when dataModel.location is either remote or lazy.
  • dataModel.url is ignored when this option is specified.
  • It replaces all fields to be send by grid for remote requests by its own. So if it's merely required to append custom parameters to the fields already send by grid, then dataModel.postData should be used.

Code examples:

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

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

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

//getter
var getUrl=grid.option( "dataModel.getUrl" );

//setter
grid.option( "dataModel.getUrl", function(){});

dataModel > locationType: String
Default: "local"
It can be "remote", "local" or "lazy", "lazy" is supported since v8.5.0.

When location is 'local', dataModel.data option has to be assigned manually. It only means local data from the perspective of the grid, while the data could be fetched from remote server using AJAX synchronous or asynchronous requests. Only local filtering, paging and sorting are supported.

When location is 'remote', grid itself takes care of sending and receiving the data from server. Grid becomes unresponsive while the data is loading. In this case, it's necessary to provide either dataMode.url or dataModel.getUrl option. Both local and remote filtering, paging and sorting are supported.

When location is 'lazy', grid itself takes care of sending and receiving the data from server in batches. Grid remains responsive or interactive while the data loads in background. This option is useful when there is large amount of data which takes lot of time in loading from remote location in a single batch. In this case, it's necessary to provide dataMode.url option and implement remote paging in remote script. Both local and remote filtering and sorting are supported.

Code examples:

Initialize the pqGrid with dataModel > location option specified.

pq.grid( selector, { dataModel:{ location:"remote" } } );

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

//getter
var location=grid.option( "dataModel.location" );

//setter
grid.option( "dataModel.location", "remote" );

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

Code examples:

Initialize the pqGrid with dataModel > method option specified.

pq.grid( selector, {dataModel: {method: "POST" } } );


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

Code examples:

Initialize the pqGrid with dataModel > postData option specified.

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

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

//getter
var postData=grid.option( "dataModel.postData" );

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

dataModel > postDataOnceType: Object
Default: undefined
This option is relevant when dataModel.location is either remote or lazy. Any custom data to be sent to the server can be put here. postDataOnce value is send to server only once and it loses its value after that.

Code examples:

Initialize the pqGrid with dataModel > postDataOnce option specified.

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

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

//getter
var postDataOnce =grid.option( "dataModel.postDataOnce" );

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

dataModel > progressAcrossTabsType: boolean
Default: undefined
(v8.6.0) When true, progress bar for lazy loading data in one tab is displayed across all tabs.

Code examples:

Initialize the pqGrid with dataModel > progressAcrossTabs option specified.

pq.grid( selector, {dataModel: { progressAcrossTabs: true}} );


dataModel > recIndxType: Integer or String
Default: undefined
Identifier / dataIndx of primary key of the record. This option is mandatory for tracking of transactions in the grid. Some of the important transactional methods are isDirty(), getChanges(), commit() and rollback().

Code examples:

Initialize the pqGrid with dataModel > recIndx option specified.

pq.grid( selector, {dataModel:{ recIndx: "id"} } );


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

Code examples:

Initialize the pqGrid with dataModel > url option specified.

pq.grid( selector, { dataModel:{ url: "/demos/pagingGetOrders" } } );

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

//getter
var url = grid.option( "dataModel.url" );

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

detailModelType: Object
Default: See below

It contains information about the detail view of row. This option is also useful for nesting of grids. Detail view is rendered in the unfrozen pane when there are frozen columns.

It consists of following sub-options:
OptionTypeDefaultDescription
cacheBooleantruedetermines the caching of detail view. Every collapse and expand of row leads to refresh of detail data and view in that row when cache is false.
hasChildFunctionundefined(v9.1.0) is a callback function which receives rowData as argument and returns boolean value depending upon whether the row has child or detail view.
initFunctionundefinedis a callback function which receives { rowData: rowData } as argument and returns detail view as jQuery object.
collapseIconString"ui-icon-triangle-1-e"icon to be displayed when row is collapsed.
expandIconString"ui-icon-triangle-1-se"icon to be displayed when row is expanded.
headerBooleanundefined(v8.7.0) displays icon in the header cell to expand or collapse all detail views at once.
heightInteger or stringautoHeight of detail row. It can be either fixed height in case of number or equal to content height in case of "auto" (v8.0.0).

Code examples:

Initialize the pqGrid with detailModel option specified.

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


dimsRelativeToType: string
Default: undefined

(v7.6.0) css selector of a DOM node which is taken as reference for computing percent dimensions of the grid.

When either grid width or height or both options are mentioned in percent, they are computed relative to the grid's immediate parent by default. This option when specified is used as reference element instead.

Code examples:

Initialize the pqGrid with dimsRelativeTo option specified.

pq.grid( selector, dimsRelativeTo: 'body' );


dragColumnsType: Object
Default: {enabled: true, acceptIcon: 'ui-icon-check', rejectIcon: 'ui-icon-closethick', topIcon: 'ui-icon-circle-arrow-s', bottomIcon:'ui-icon-circle-arrow-n' }
The columns can be reordered by drag and drop. It can be enabled or disabled and the icons can be changed using various sub options.

Code examples:

Initialize the pqGrid with dragColumns option specified.

pq.grid( selector, dragColumns: { enabled: false } );


draggableType: Boolean
Default: false
The pqGrid as a whole becomes draggable if this option is set to true. Please check dragModel if you are looking for draggability of individual rows.

Code examples:

Initialize the pqGrid with draggable option specified.

pq.grid( selector, {draggable: true} );

Get or set the draggable option, after initialization:

//getter
var draggable=grid.option( "draggable" );

//setter
grid.option( "draggable", true );

dragModelType: object
Default: see sub-options below

(v6.0.0) Configures properties for draggable rows in grid.

Drag instance is added to the draggable helper through jQuery data() method so that droppable can access and call Drag methods on this draggable.

OptionType / DefaultDescription
onbooleanMakes grid rows draggable when true.
afterDrop(evt: any, uiDrop: any) => voidCalled when DnD takes place between different grids and just after dropModel.drop callback is called. There is no default implementation of this callback.
beforeDrop(evt: any, uiDrop: any) => voidCalled when DnD takes place between different grids and just before dropModel.drop callback is called. Default implementation of this callback removes nodes from the draggable grid, treegrid or row groupings.
clsDnD string

Default: pq-dnd

Class assigned to draggable control in this grid which is used by droppable controls to decide acceptance.
clsNode string

Default: pq-dnd-drag

(v7.4.0) Class assigned to dragged row(s).
contentHelper
(diHelper: Array< string >, dragItems: Array< any >) => string
function(diHelper, dragNodes){
    var rd = dragNodes[0], len = dragNodes.length;
    return diHelper.map(function( di ){ return rd[ di] }).join(", ") +
        (len > 1? " ( " + dragNodes.length + " )": "");
}
Callback function to return content of helper.
cssHelperobject
        {
            opacity:0.7,
            position:'absolute',
            height: 25,
            width: 200,
            overflow:'hidden',
            background:'#fff',
            border:'1px solid',
            boxShadow:'4px 4px 2px #aaaaaa',
            zIndex: 1001
        }
        
css properties applied to draggable helper.
diDragnumber | string
-1
dataIndx of column which displays the draggable UI. Number column is used as draggable UI when value is -1.
diHelperArrayArray of dataIndx of columns the values of which are displayed in the draggable helper.
dragNodes
(rd: any, evt: any) => Array< any>
function(rd){
    return [ rd ];
}
Callback function to return array of dragged nodes.
iconAccept string 'ui-icon ui-icon-check' class of the accept icon displayed in helper.
iconReject string 'ui-icon ui-icon-cancel' class of the reject icon displayed in helper.
isDraggable (ui: any)=>boolean
ui: {
    rowIndx: number
    rowData: any
    colIndx: number
}
callback called for every row in the viewport to decide their individual draggability.
options object these options can be taken from jQueryUI draggable API, please note some of the options may not work.
tmplDrag string
< span class='ui-icon ui-icon-grip-dotted-vertical pq-drag-handle'
    style='cursor:move;vertical-align:text-bottom;touch-action:none;float:left;'>
    &nbsp;
< /span>
Markup template for drag UI in cells of draggable rows
tmplDragN string
< span
    class='ui-icon ui-icon-grip-dotted-vertical pq-drag-handle'
    style='cursor:move;position:absolute;left:2px;top:4px;'>
    &nbsp;
< /span>
Markup template for drag UI in number cells of draggable rows
tmplHelper string
< div class='pq-border-0 pq-grid-cell'>
    < span class='pq-icon' style='vertical-align:text-bottom;margin:0 5px;'>
    < /span>
    < span>< /span>
< /div>
Markup template for drag helper.

Code examples:

Initialize the pqGrid with dragModel option specified.

pq.grid( selector, {dragModel: {on: true}} );


dropModelType: object
Default: see sub-options below

(v6.0.0) Configures drop properties so that the grid can accept row objects from itself, other grids, row groupings, treegrid or third party draggables (based on jQueryUI only). Also see moveNode event to write any custom action upon completion of drag & drop.

OptionType / DefaultDescription
onbooleanMakes a grid droppable when true.
accept string
'.pq-dnd'
css selector of accepted draggable components so more than one accepted draggable component can be defined by separating corresponding selectors with a comma e.g., '.cls1,.cls2,.cls3'
clsParent string

Default: pq-dnd-parent

(v7.4.0) css class assigned to potential parent of the dragged node.
divider integer (v7.4.0) creates vertical divider line in the treegrid to differentiate between the potential parent depending upon the dragged node helper position to the left or right of the line.
isDroppable
(evt: any, ui: any) => (void | boolean)
ui: {
    rowIndx: number
    rowData: any
    $cell: jQuery
    draggable: jQuery
    helper: jQuery
    ratioY: (() => number)
    colIndx: number
}

All the rows in grid accept draggable items by default.

When draggable items are moved / dragged over different rows, this callback is called the return value of which if false rejects the draggable items.

evt is derived from drag event of jQueryUI draggable.

ui provides pqGrid specific fields in addition to those of drag event of draggable.

rowIndx and rowData provide information of the row upon which the draggable is being dragged.

ratioY() provides value between 0 and 1 depending upon draggable proximity to top or bottom of row.

This callback should check availability of row related fields as they are undefined when draggable is dragged over empty space in grid or when grid has no rows

Draggable object reference i.e., Drag can be obtained from ui.helper.data('Drag') and draggable row information can be obtained from Drag.getUI(). See Drag object API for detailed structure of its properties.

drop
(evt: any, ui: any) => void
ui: {
    rowIndx: number
    rowData: any
    $cell: jQuery
    draggable: jQuery
    helper: jQuery
    ratioY: (() => number)
    colIndx: number
}

This callback is called when accepted draggable items are finally dropped.

evt is derived from drop event of jQueryUI droppable.

ui provides pqGrid specific fields in addition to those of drop event of droppable.

rowIndx and rowData provide information of the row upon which the draggable is being dropped.

ratioY() provides value between 0 and 1 depending upon draggable proximity to top or bottom of row.

All row fields are undefined when draggable is dropped over empty space in grid or when grid has no rows

This callback is implemented internally for common DnD scenarios in/between grid, grouped rows & treegrid. You can override it by writing your own drop callback function. FYI grid uses moveNodes method to move around nodes in default implementation.

Draggable object reference i.e., Drag can be obtained from ui.helper.data('Drag') and draggable row information can be obtained from Drag.getUI(). See Drag object API for detailed structure of its properties.

options object these options can be taken from jQueryUI droppable API, please note some of the options may not work.

Code examples:

Initialize the pqGrid with dropModel option specified.

pq.grid( selector, {dropModel: {on: true}} );


editableType: Boolean or Function
Default: true
Editing can be disabled for all columns by setting it to false or a callback function can be implemented.

Callback receives ui:{ rowData: rowData, rowIndx: rowIndx} as argument.

(v6.0.0) This option value or callback return value of true / false has lower priority than column.editable option while deciding final editability of a cell in grid.

Code examples:

Initialize the pqGrid with editable option specified.

pq.grid( selector, {editable:false} );

Get or set the editable option, after initialization:

//getter
var editable=grid.option( "editable" );

//setter
grid.option( "editable", false );
grid.option( "editable", function( ui ){    
    return !this.hasClass({rowIndx: ui.rowIndx, cls: 'pq-delete' });
});

editModelType: Object
Default: See sub-options below

Configures key navigation and other editor properties

OptionTypeDefaultDescription
addDisableCls Boolean (v7.0.0) When true, adds a pq-cell-disable class to disabled cells
allowInvalid Boolean false when true doesn't reject an invalid value but instead adds a class invalidClass to the cell
clicksToEdit Integer 2 Clicks (1 for single click, 2 for double click) required to put a cell into edit mode
filterKeys Boolean true Prevent non digits in float and integer dataType columns
invalidClass String 'pq-cell-red-tr pq-has-tooltip' Adds a class to a cell when allowInvalid option is true and the cell fails validation
keyUpDown Boolean Cell above and below the current editing cell are focused respectively when up and down key is pressed.

(v7.3.0) Default value is changed from true to undefined

onBlur String 'validate' determines the behaviour of the editor when it's blurred.
  • validate: keeps the editor in edit mode until it passes the validation
  • save: saves the value if validation is met, exits from edit mode irrespective of whether editor passes the validation
  • "": doesn't do anything and the editor remains in edit mode
onSave String 'nextFocus' Cell navigation when save key is pressed in an editor. It has following values:
  • nextEdit: Next editable cell to the right and top to bottom is put into edit mode
  • nextFocus: Next cell to the right ( or left with shift key ) of current one is focused
  • (7.3.0) downFocus: Next cell below ( or above with shift key ) the current one is focused
  • "": Same cell is focused
onTab String 'nextFocus' Cell navigation when tab key is pressed in an editor. It has same values as onSave option.
pressToEdit Boolean true Put a cell into edit mode when any input key is pressed while cell has focus
saveKey Integer $.ui.keyCode.ENTER Ascii code of key when pressed saves data in a cell in addition to Tab key

Alt-Enter key combination can be used for line breaks in multi line editor i.e., 'textarea'

(v7.5.0) Enter key alone can be used for line breaks in multi line editor i.e., 'textarea' by setting this option value other than $.ui.keyCode.ENTER

warnClass String 'pq-cell-blue-tr pq-has-tooltip' Adds a class to a cell when cell fails warning

Note that editModel options filterKeys, keyUpDown & saveKey can be overridden in the individual columns (column.editModel).

Code examples:

Initialize the pqGrid with editModel option specified.

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

Get or set the editModel option, after initialization:

//getter
var editModel=grid.option( "editModel" );

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

editorType: Object
Default: See sub-options below

It provides the editor properties for whole grid

OptionTypeDefaultDescription
attrStringadds html attribute to editor
clsStringadds css class to editor
getDatafunction(v8.2.0) It's a callback function which can be implemented to return custom data or value from custom editor.
initfunction(v8.2.0) It's is a callback function and can be implemented to convert or initialize simple html control (i.e., textbox, select, etc) mentioned in type into a custom editor i.e., jQueryUI datepicker, autocomplete or any other plugin.
selectBooleanselects text in a cell editor upon focus
styleStringadds css style to editor
typeString'contenteditable' sets the kind of editor out of 'contenteditable', 'textbox', 'textarea', 'select' or a callback function that returns type of editor.

(v8.4.0) Default value is changed from 'textarea' to 'contenteditable'. Also new lines functionality via Alt - Enter has been moved to 'contenteditable'.

Note that editor options can be overridden in the individual columns (column.editor)

Code examples:

Initialize the pqGrid with editor option specified.

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

Get or set the editor option, after initialization:

//getter
var editor = grid.option( "editor" );

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

filterModelType: Object
Default: see sub-options below

It describes the filtering behavior of the grid.

OptionTypeDefaultDescription
onbooleantrueFiltering can be turned on or off.
menuIconbooleanFilter menu icon is displayed in header filter row when menuIcon is true (new in v5.2.0). This can be overridden for specific columns in column.filter.menuIcon property.
gridOptionsobjectDefault options for grid in filter menu ( range condition ) (v5.2.0).
modestring"AND"Multiples columns are filtered together depending upon mode which can be either 'AND' or 'OR'.
headerbooleanColumn filter input controls are displayed at top of the rows in the header when header is true.
hideClearIconboolean (v10.1.0) By default clear icon is displayed to clear text in filer UI textbox Icon is hidden if this option is true.
hideRowsbooleanBy default filtered rows are separated from non filtered rows. Filtered rows are stored in dataModel.data while non-fitered rows are stored in dataModel.dataUF.
(v6.2.4) However when hideRows is true, filtered rows are visible and non-filtered rows are hidden while both of them stay together in dataModel.data. This kind of filtering is supported in plain grid and (v8.0.0) tree grid.
timeoutinteger400timeout property (added in v4.0.0) is effective when column.filter.listener = 'timeout', filtering is invoked when specified number of milliseconds as timeout property value have elapsed.
typestring'local'filtering is done locally or remotely depending upon value of type which can be either 'local' or 'remote'.

Code examples:

Initialize the pqGrid with filterModel option specified.

pq.grid( selector, { filterModel: { header: true } } );

Get or set the filterModel option, after initialization:

//getter
var filterModel=grid.option( "filterModel" );

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

flexType: Object
Default: {on: true, one: false, all: true}
this option helps to set the width of a column or a number of columns in such a manner that all the cell content is visible in a single line without wrap. It takes place when either right edge of column header cell is double clicked / tapped or flex method is called.

on: Flex can be turned on / off by setting this sub-option value to true / false.

one: Flex is applied once when grid is created and data is displayed in grid.

all: When right edge of any column's header is double clicked / tapped, this sub-option determines if all columns are affected ( all: true ) or only the target column is affected ( all: false ).

Code examples:

Initialize the pqGrid with flex option specified.

pq.grid( selector, { flex: { on: true } } );

Get or set the flex option, after initialization:

//getter
var flex = grid.option( "flex" );

//setter
grid.option( "flex", { on: false } );

fmtDateType: string
Default:

(v10.0.0) It sets the format of all datetime values displayed in the grid / spreadsheet e.g.,

Cell value ( ISO format )fmtDatelocaleFmtResult
2023-12-03dd-mm-yyyy03-12-2023
2023-12-03mmm, yyyyenDec, 2023
2023-12-03mmm, yyyyja十二月, 2023
2023-12-03 14:45mmmm, yyyy hh:mm AM/PMenDecember, 2023 02:45 PM
2023-12-03 14:45mmmm, yyyy hh:mm AM/PMarديسمبر, 2023 02:45 م
2023-12-03 14:45hh:mm AM/PMen02:45 PM

See Excel format documentation for more examples

Note that localeFmt option can be omitted if you need to adapt the format result to user's locale automatically.

It's overridden by column.format, cell level or row level format if any.

Code examples:

Initialize the pqGrid with fmtDate option specified.

pq.grid( selector, { fmtDate: 'dd-mm-yyyy' });


fmtDateEditType: string
Default:
(v10.0.0) It sets the format of datetime values in a cell editor.

See fmtDate option for examples.

This option is also used to parse the datetime entered by user back to ISO format.

It can be overridden by column.fmtDateEdit for a specific column.

Code examples:

Initialize the pqGrid with fmtDateEdit option specified.

pq.grid( selector, { fmtDateEdit: 'dd-mm-yyyy' });


fmtDateFilterType: string
Default:
(v10.0.0) It sets the format of datetime values in a column filter editor.

See fmtDate option for examples.

This option is also used to parse the datetime entered by user back to ISO format.

It can be overridden by column.fmtDateFilter for a specific column.

Code examples:

Initialize the pqGrid with fmtDateFilter option specified.

pq.grid( selector, { fmtDateFilter: 'dd-mm-yyyy' });


fmtNumberType: string
Default:

(v10.0.0) It sets the format of all number values displayed in the grid / spreadsheet e.g.,

Cell valuefmtNumberlocaleFmtResult
12345678.9#,###.00en-US12,345,678.90
12345678.9#,###.00de12.345.678,90
12345678.9#,###.00en-IN1,23,45,678.90
0.00000000000460.00E+004.60e-12
78499999990.00E+007.85e+9
0.4#,###.00 %40.00 %

See Excel format documentation for more examples

Note that localeFmt option can be omitted if you need to adapt the format result to user's locale automatically.

It's overridden by column.format, cell level or row level format if any.

Code examples:

Initialize the pqGrid with fmtNumber option specified.

pq.grid( selector, { fmtNumber: '#,###.00' });


fmtNumberEditType: string
Default:
(v10.0.0) It sets the format of number values in a cell editor.

See fmtNumber for examples.

This option is also used to parse the number entered by user back to js integer / float value.

It can be overridden by column.fmtNumberEdit for a specific column.

Code examples:

Initialize the pqGrid with fmtNumberEdit option specified.

pq.grid( selector, { fmtNumberEdit: '#,###.00' });


fmtNumberFilterType: string
Default:
(v10.0.0) It sets the format of number values in a culumn filter editor.

See fmtNumber for examples.

This option is also used to parse the number entered by user back to js integer / float value.

It can be overridden by column.fmtNumberFilter for a specific column.

Code examples:

Initialize the pqGrid with fmtNumberFilter option specified.

pq.grid( selector, { fmtNumberFilter: '#,###.00' });


formulasType: Array
Default: undefined

Added in v4.0.0, this option is used to define formulas for computing column values dependent upon other values in same row.

The dependent formulas are defined after dependencies.

The formula functions receive rowData and column as parameters.

This option replaces column.formula used in earler versions.

Code examples:

Initialize the pqGrid with formulas option specified.

var formulas = [
    //profit is dataIndx of the column.
    ["profit", function( rd ){
        //dependent upon revenues and income.
        return rd.revenues - rd.income;
    }],
    //tax is dataIndx of the column.
    ["tax", function( rd ){
        //dependent upon profit.
        return rd.profit * 0.25;
    }]
];

pq.grid( selector, {formulas: formulas} ); 


formulasModelType: Object
Default: {on: true}
This option enables support for Excel like formulas in the cells. It can be turned off by setting { on: false }.

Code examples:

Initialize the pqGrid with formulasModel option specified.

pq.grid( selector, {formulasModel: {on: false}} );


freezeBordersType: Boolean
Default: true
this option displays borders for frozen panes.

Code examples:

Initialize the pqGrid with freezeBorders option specified.

pq.grid( selector, {freezeBorders: false} );

Get or set the freezeBorders option, after initialization:

//getter
var freezeBorders = grid.option( "freezeBorders" );

//setter
grid.option( "freezeBorders", false );

freezeColsType: Integer
Default: 0
Total number of frozen columns in the viewport. The frozen columns remain fixed while non-frozen columns can be scrolled horizontally. It includes hidden columns so e.g., if this option is set to 4 and there are 2 hidden columns in the first 4 columns, then only 2 columns would appear to be frozen in the viewport.

Code examples:

Initialize the pqGrid with freezeCols option specified.

pq.grid( selector, {freezeCols:2} );

Get or set the freezeCols option, after initialization:

//getter
var freezeCols=grid.option( "freezeCols" );

//setter
grid.option( "freezeCols", 1 );

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

Code examples:

Initialize the pqGrid with freezeRows option specified.

pq.grid( selector, {freezeRows:2} );

Get or set the freezeRows option, after initialization:

//getter
var freezeRows=grid.option( "freezeRows" );

//setter
grid.option( "freezeRows", 1 );

groupModelType: Object
Default: See sub-options below
It defines the grouping and pivot (since v5.1.0) properties of rows & columns. It can be grouped and pivoted by any number of fields. Grouping adds few properties to the rows i.e., pq_gtitle, pq_gsummary, pq_grandsummary, pq_level, pq_close for easy identification of group title, summary rows and their current state in rowData.

Only Group().option() method should be used to set groupModel options after initialization.

Summary is provided for the aggregated rows with agg option ( since v5.1.0) or with help of column.summary in older versions.

Checkbox support is added in v5.2.0

Use column.renderLabel for partial rendering of title and normal cells in grouping columns.

Following are the groupModel sub-options.

OptionTypeDefaultDescription
Group and Pivot related options:
aggobject{ } Added in v5.1.0, it's an object of dataIndx: type pairs of aggregated columns i.e., { silver: 'min', gold: 'sum' }
collapsedarray[ ] Array of boolean values that determines expanded or collapsed state of different levels of grouping. All the groups are expanded by default.
dataIndxarray[ ] Array of dataIndx of groupby columns by which the rows are grouped i.e., ['country', 'age']
fixColsbooleantrue The groupby columns are moved and fixed towards the left of viewport in the same order as groupModel.dataIndx when this option is true. (v7.4.0) This option is ignored when titleIndx or titleInFirstCol is defined.
grandSummaryboolean Grand summary row is displayed at the bottom of grid when this option is true.
groupColsarray[ ] Added in v5.1.0, an array of dataIndx for grouping along column axis i.e., ['year', 'sport']
headerbooleantrue Header toolbar is displayed to add ( with drag/ drop) or remove columns from grouping and also to rearrange the order of grouped columns.
headerMenubooleantrue Menu is displayed in grouping header toolbar to toggle boolean groupModel sub-options by the end user.
hideLinesbooleanundefined (v9.1.0) Hide the hierarchy lines.
iconarray[ 'ui-icon-triangle-1-se', 'ui-icon-triangle-1-e' ] Icons displayed in front of title of the group. The first value in array corresponds to expanded state icon and 2nd corresponds to collapsed state.
indentinteger open/close icons in group titles are indented from left by ( indent * level ) pixels where level is grouping level of the groupby column.
menuItemsarray[ "merge", "fixCols", "grandSummary" ] Boolean options displayed in the grouping header menu. More boolean option can be added or removed. The strings displayed to the user against these options are stored as localized strings with prefix "strGroup_".
mergeboolean The grouped cells of same value are merged vertically when this option is true.
nodeCloseObjectundefined (v7.2.0) get or set pq_close value of all parent nodes in row grouping or pivot mode. This option is useful in initial or run time open/close state management of nodes.
{
    Argentina: false, //Argentina is the id of the node and false means node is open
    Argentina_Yvonne Moncada: true,
    Argentina_Sergio Gutiérrez: true,    
    ...
}
onbooleanfalse Option to turn on/off the grouping.
pivotboolean When true, it turns on the pivot mode. (v5.1.0)
pivotColsTotalstring"after" It provides aggregate at end or beginning of each pivot grouped columns(v5.4.0). It has 4 possible values: "after", "before", "hideifOpen" or "". Empty string i.e., "" disables the summary. "after" and "before" are obvious, "hideifOpen" hides the summary column when its parent grouped column is expanded.
pivotTotalForSingleboolean If there is a single column in a pivot grouping, then aggregate of such column is reduntant and skipped. However if it's required, then it can be displayed by setting this sub-option to true. (v5.6.0)
showSummaryarray[ ] It determines display of summary row at the bottom at every change of group.
summaryEditbooleantrue When true, summary fields in all columns become editable enabling the user to choose type of summary (column.summary.type) from a dropdown; the options in the dropdown are filled from summaryOptions.

Besides, editability of summary fields depends upon combination of other options:

  1. editable
  2. column.editable
  3. column.summary.edit

Individual editability of summary fields can be set by column.summary.edit instead of this global option.
skipSingleSummaryboolean (v7.0.0) It skips display of summary row if there is only one row in the group.
summaryInTitleRowstring'collapsed' It determines display of summary data within title row.

It has 3 possible values:

  1. '': The group title row is merged to take whole width of grid and it never shows summary data in the row.
  2. 'collapsed': Summary is displayed in Title row only when title row is collapsed.
  3. 'all': Summary is always displayed in Title row i.e., in collapsed or expanded state.

titlearray[ ] Partial rendering of group titles as an array of strings or callback functions. Titles are displayed according to groupModel.titleDefault when there is no value in the array for corresponding levels of grouping.

column.renderLabel has higher precedence than this option which in turn has higher precedence than groupModel.titleDefault

titleInFirstColbooleanfalse Normally by default group titles appear in their respective columns

This option when set to true displays group titles hierarchically in first visible column of grid.

This option is accompanied by groupModel.indent

This option is similar to titleIndx, it has higher precedence than titleIndx when both are defined.
titleDefaultstring / function'{0} ({1})' Default format of group headings where {0} is value of the field and {1} is no of items. It can also be a callback function.
titleIndxstring (v7.0.0) dataIndx of any column where all row grouping titles are displayed in hierarchical fashion.

This option is accompanied by groupModel.indent

This option is similar to titleInFirstCol, it has lower precedence than titleInFirstCol when both are defined.
Checkbox related options:
cascadebooleantrue defines the checkbox behaviour (v5.2.0). When a parent node is checked, all the children nodes are checked and vice versa. This is used along with checkbox.
cbIdstringpq_group_cb Field name in rowData where checkbox values are stored (v5.2.0). This is used along with checkbox.
checkboxboolean Adds checkbox in the first column (v5.2.0). This is used along with titleInFirstCol.
checkboxHeadboolean Adds checkbox in the header column (v5.2.0). This is used along with checkbox.
maxCheckinteger Maximum allowed total number of checked checkboxes.( v5.3.0 )
selectboolean Checkboxes are bound to row selections. (v5.2.0)
useLabelboolean Similar to column.useLabel it wraps checkbox cell of row grouping column within a label( v5.3.0 ). column.useLabel has higher precedence than this option.

Code examples:

Initialize the pqGrid with groupModel option specified.

pq.grid( selector, {groupModel: { dataIndx: ["ShipCountry"] } } );

Get or set the groupModel option, after initialization:

//getter
var groupModel = grid.option( "groupModel" );

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

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

Code examples:

Initialize the pqGrid with height option specified.

pq.grid( selector, {height: 400} );

Get or set the height option, after initialization:

//getter
var height = grid.option( "height" );

//setter
grid.option( "height", '100%-30' );

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

Code examples:

Initialize the pqGrid with historyModel option specified.

pq.grid( selector, { historyModel: { on: false }} );

Get or set the historyModel option, after initialization:

//getter
var historyModel = grid.option( "historyModel" );

//setter
grid.option( "historyModel", { allowInvalid: false } );

hoverModeType: String
Default: null
It provides the hover (mouseenter and mouseleave) behaviour of mouse on grid cells and rows. It can have value 'row' or 'cell'

Code examples:

Initialize the pqGrid with hoverMode option specified.

pq.grid( selector,{ hoverMode:'cell' });


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

localeType: String
Default: en
(v6.1.0) Localization code of the grid for the strings used at various places like Excel formula intellisense, Filter menu popup, Loading records, etc. It can have any value out of 'de', 'en', 'es', 'fr', 'hu', 'it', 'ja', 'kr', 'nl', 'pl', 'pt', 'pt_br', 'ru', 'tr', 'zh', 'zh_TW'. This option should not be confused with localeFmt

localeFmtType: String
Default:
(v10.0.0) Localization code of the grid used by the various localization sensitive format options like column.format, fmtDate*, fmtNumber*, etc.

It can be omitted ( default value ) if you need to adapt the formatted values to the user system's locale.

Few examples:

undefined ( locale adaptive to users' locale )
'en-IN' (English, India)
'en-US' (English, United States)
'fr-FR' (French, France)
'de-DE' (German, Germany)
'ja-JP' (Japanese, Japan)
'zh-CN' (Chinese, Simplified)

maxHeightType: Integer or String
Default: null
Added in v3.0.0, it sets the maximum height of the grid in pixels (without 'px' suffix) or %. This option is quite useful when used along with height: 'flex'. A refresh is required when this option is changed dynamically.

Code examples:

Initialize the pqGrid with maxHeight option specified.

pq.grid( selector,{ maxHeight: 100 });


maxWidthType: Integer or String
Default: null
Added in v3.3.0, it sets the maximum width of the grid in pixels (without 'px' suffix) or %. This option is quite useful when used along with width: 'flex'. A refresh is required when this option is changed dynamically.

Code examples:

Initialize the pqGrid with maxWidth option specified.

pq.grid( selector,{ maxWidth: 100 });


menuIconType: boolean
Default: undefined
Added in v5.2.0, it displays header menu for show/hide columns and filter columns.

Code examples:

Initialize the pqGrid with menuIcon option specified.

pq.grid( selector,{ menuIcon: true });


menuUIType: Object
Default: see sub-options below

Added in v5.2.0, it declares UI of the header menu. It can also be defined or overridden in individual columns with column.menuUI option

OptionTypeDefaultDescription
buttonsArray['clear', 'ok'] Buttons at bottom of filter menu.
singleFilterboolean Use only single filter condition instead of default 2 filter conditions per column.
tabsArray[ 'hideCols', 'filter', 'export' ] Choose tabs to be displayed in menu on a header cell. (v9.0.0) 'export' tab has been added for convenient management of the skipExport property for columns.
gridOptionsObject
        {
            autoRow: false, 
            copyModel: {render: true},
            editable: function(ui){                
                return !ui.rowData.pq_disabled;
            },
            fillHandle: '',
            filterModel:{header:true, on: true},
            hoverMode: 'row',
            hwrap: false,
            rowBorders: false,
            rowHt: 24,
            rowHtHead: 26,
            hideVScroll: true,
            scrollModel:{autoFit: true},
            showTop: false,
            height:300,
            wrap: false
        }
Default options for grid in header menu and filter menu ( range condition ).

Code examples:

Initialize the pqGrid with menuUI option specified.

pq.grid( selector,{
    menuUI: {
        buttons: [], //use no button at bottom of filter menu
        gridOptions: {
            rowHt: 30 //increase height of rows in menu grid.
        },
        tabs: [ 'filter' ] //display only filter tab in menu.
    }
});


mergeCellsType: Array
Default: []
it is an array of objects having properties: r1, c1, rc, cc, style, cls. Every object in the array defines a merged cell.
r1 is shorthand for rowIndx which is zero based index of row from top.
c1 is shorthand for colIndx which is zero based index of column from left.
rc & cc define rowspan & colspan for the merged cell.
style is inline css style added to the cell and cls is css class added to the cell.

Call to refreshView( ) is required if mergeCells is changed dynamically.

(v7.4.0) Default value is changed from undefined to [].

Code examples:

Initialize the pqGrid with mergeCells option specified.

pq.grid( selector,{
mergeCells: [
    { r1: 1, c1: 2, rc: 5, cc: 3 },
    { r1: 10, c1: 0, rc: 4, cc: 6 }
]});

Get or set the mergeCells option, after initialization:

//getter
var mergeCells = grid.option( "mergeCells" );

//setter
grid.option( "mergeCells", [
    { r1: 1, c1: 2, rc: 5, cc: 3 },
    { r1: 10, c1: 0, rc: 4, cc: 6 }
]);

minWidthType: Integer
Default: 50
Minimum possible width of the grid in pixels.

Code examples:

Initialize the pqGrid with minWidth option specified.

pq.grid( selector,{ minWidth:100 });

Get or set the minWidth option, after initialization:

//getter
var minWidth=grid.option( "minWidth" );

//setter
grid.option( "minWidth", 20 );

noStickyHeaderType: Boolean
Default:
(v9.1.0) Skip sticky header when true. Sticky elements are incompatible with scaled transforms, so sticky headers are automatically omitted when scaled transforms are used on the grid or its ancestor elements.

Code examples:

Initialize the pqGrid with noStickyHeader option specified.

//disable sticky header
pq.grid( selector, { noStickyHeader: true );


numberCellType: Object
Default: { width: 50, title: "", resizable: false, menuUI: { tabs: ['hideCols', 'export'] }, minWidth: 50, show: true }
Column to display the row numbers in the grid beginning from 1. It can be hidden by setting numberCell.show to false.

(v9.0.0) menuUI sub-option is added to display popup menu on the header number cell.

Code examples:

Initialize the pqGrid with numberCell option specified.

//disable number cell.
pq.grid( selector, { numberCell: {show: false} } );

Get or set the numberCell option, after initialization:

//getter
var numberCell=grid.option( "numberCell" );

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

pageModelType: Object
Default: see sub-options below
It contains paging properties. Localization strings for pager can also be passed to this option.

Following are the pageModel sub-options:

OptionTypeDefaultDescription
curPageinteger0 Current page in view beginning from 1.
formatstring (v7.4.0) Formatting of all displayed numbers e.g., "#,###" Formatting is also applied to rPPOptions drop down when rPPOptions is defined in plain array format.
layoutArray["first","prev","|","strPage", "|","next","last","|","strRpp","|","refresh","|","strDisplay"] Template for the pager UI.(new in v5.2.0)
rPPinteger10 Results displayed per page.
rPPOptionsarray[10, 20, 50, 100] Results per page options in pager dropdown. Can be either of these formats:
  • Array of numbers i.e., [10, 20, 30]
  • (v7.4.0) Array of key: value pairs i.e., [{10: 'Ten'}, {20: 'Twenty'}, {50: 'Fifty'}, {100000: 'All'}]
totalPagesinteger0 Total number of pages. It need not be modified for local requests as it's auto calculated by the grid.
typestring Enables paging for both local and remote requests. It has 2 possible values: "local" and "remote". Paging is disabled when type is null or undefined.

Code examples:

Initialize the pqGrid with pageModel option specified.

//use local paging.
pq.grid( selector, { pageModel: {type: 'local'} } );

Get or set the pageModel option, after initialization:

//getter
var pageModel = grid.option( "pageModel" );

//setter
grid.option( "pageModel", { curPage: 3 } ); 

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

Defines properties while paste of rows/cells in the grid. paste can be turned on/off with the help of option on.

rows/cells affected by paste operation are selected when select option is true.

Invalid cell values are accepted and class editModel.invalidClass is added when allowInvalid option is true.

type determines the type of paste out of replace, append, prepend.
replace replaces the existing selection with pasted rows/cells.
append appends the pasted rows/cells to the selected rows/cells.
prepend prepends the pasted rows/cells to the selected rows/cells.

Code examples:

Initialize the pqGrid with pasteModel option specified.

pq.grid( selector, {pasteModel: { on: false }} );

Get or set the pasteModel option, after initialization:

//getter
var pasteModel = grid.option( "pasteModel" );

//setter
grid.option( "pasteModel.allowInvalid", false );

picsType: Array
Default:
(v7.2.0) It is an array of objects and every object defines a single floating picture with following properties:
{
    name?: string //name of picture
    src: string //url or base64 encoding of picture
    from: [number, number, number, number] //[colIndx, horizontal offset, rowIndx, vertical offset ]
    to?: [number, number, number, number]
    cx?: number //width
    cy?: number //height
}

These pictures when loaded from same domain are exportable to Excel

Please check Pic() and Range().pic() methods to work on floating pictures during runtime.

Code examples:

Initialize the pqGrid with pics option specified.

pq.grid( selector,{
pics: [
    { name: "pic.png", src: "data:image/png,....", from: [2,1,2,1] },
    { src: "/content/pqgrid.png", from: [1,1,1,1] }
]});

Get or set the pics option, after initialization:

//getter
var pics = grid.option( "pics" );

postRenderIntervalType: Integer
Default: undefined
It determines the time interval in milliseconds between the refresh of view of grid and first call to column.postRender.
  • column.postRender is called asynchronously when this option is >= 0.
  • column.postRender is called synchronously when this option is -1.
  • column.postRender is not called when this option is undefined.

reactiveType: Boolean
Default:

New in v6.1.0

Background: When pqgrid is initialized it makes a deep copy of all options in the initialization object except arrays like dataModel.data, colModel, etc which are copied by reference only.

reactive option:

  • makes the grid listen and react to any change in initialization options of grid, data in grid and colModel. So when any external change is made in them, grid reacts by making corresponding change in itself.
  • Conversely it makes changes in initialization options when any change is made in the grid internally ( usually by user interaction with the grid )

This data flow between grid and initialization options facilitates 2 way data binding which can be leveraged for seamless integration of pqgrid with modern javascript frameworks like Angular, React, Vue, etc.

Know how: This option detects changes by

  • using getters and setters for object properties
  • listening to Array manipulation methods like push, splice, shift, unshift, pop, sort for arrays.
As a side note it works quite similar to reactivity of Vue framework.

Limitations:

  • Object properties for which reactiveness is sought need to be declared upfront in the initialization object.
  • Only above mentioned array manipulation methods should be used to manipulate arrays. For example array[ i ] = value would go undetected.
  • It works only for the options which are most commonly mutated after initialization.


resizableType: Boolean
Default:
The grid can be resized horizontally and vertically if this is set to true.

refreshCompareByType: string
Default: "value"
(v8.4.0) Grid finds and refreshes only the affected or dependent cells in the viewport after editing a cell.

This option defines the criteria by which grid finds the affected cells in beforementioned case.

It has 3 possible values:
  • "value": Grid compares all cell values in viewport before and after edit of cell. This is the default value and is suitable for most cases.
  • "render": Grid compares the final rendering of all cells in viewport before and after edit of cell. It's more accurate than "value" but slower and rarely useful.
  • "": It disables the comparison functionality.

roundCornersType: Boolean
Default: true
Display of rounded corners at all 4 corners of the grid.

rowBordersType: Boolean
Default: true
Draws horizontal borders around all the rows.

rowHtType: Integer
Default: 25
Sets constant height of all rows in grid. If you need rows to have different individual heights, then assign pq_ht property to the rowData.

rowHtHeadType: Integer
Default: 25
Sets constant height of all header rows in grid.

rowHtSumType: Integer
Default: 25
Sets constant height of all footer rows in grid. If you need rows to have different individual heights, then assign pq_ht property to the rowData.

rowInitType: Function
Default: null
rowInit callback is called by the grid for every row in the viewport when whole view is refreshed. It's called for the affected row when refreshRow is called.
It can be used to inject classes, styles or attributes to rows or cells dynamically based on the current data in row i.e., rowData.

Can return an object having cls, style & attr properties which are injected in the current row.

(v7.0.0) style returned by rowInit is exported as row style to Excel export

Code examples:

Initialize the pqGrid with rowInit option specified.

pq.grid( selector, {rowInit: function( ui ){
    if ( some condition based on ui.rowData ){
        return { cls: 'green', style: 'font-size:18px;', attr: 'some HTML attribute for the row' };
    }
}});


rowResizeType: Boolean
Default: true
(v7.4.0) Rows can be resized by dragging the number cells bottom edge.

rowSpanHeadType: Boolean
Default:
(v9.0.0) This option affects the display of grouped columns in header. Columns are merged vertically when this option is true. See the examples for visual demonstration.

rowTemplateType: Object
Default:

(v8.0.0) This option defines common row properties to avoid repetition of properties in the rows in keeping with the principle of DRY (don't repeat yourself).

Properties defined in this option are:
  1. Deep cloned ( in case of nested properties ) and copied to all rows.
  2. Not copied when a row contains defined value for that property, so a property can be overriden in individual rows.

scrollModelType: Object
Default: { autoFit: false, timeout: 300 }

When autoFit is true, Grid changes the width of the columns to fit them all into the viewport without scrolling. Any resize/change in the grid width leads to proportional change in width of columns.

scrollStop event is fired when scrolling is stopped/paused for more than timeout milliseconds.

Code examples:

Initialize the pqGrid with scrollModel option specified.

pq.grid( selector,{ scrollModel:{autoFit: true });


selectionModelType: Object
Default: { see sub-options below }
OptionTypeDefaultDescription
allbooleanundefined It affects the selection of rows / cells when Ctrl + A is pressed. All pages are selected when it's true otherwise only the current page is selected.
columnbooleantrue Columns are selected by click on the column headers when it's true. Its value is true by default since v7.0.0
modestring'block' Only single row or cell can be selected depending upon its value: single or block.
nativebooleanundefined enables native browser selection for the grid. This option affects the whole grid; if native selection is required for only a particular region of the grid, then 'pq-native-select' class can be assigned to that local region.
onTabstring'nextFocus' determines the key navigation when tab is pressed on a focused cell. Focus is shifted onto the next right cell when tab is pressed and this option value is 'nextFocus', otherwise the focus is shifted to next focusable control.
rowbooleantrue Rows can be selected by click on the number cells when it's true.
togglebooleanundefined Applicable to row selections only.

When false or undefined:

  • simple click on unselected row replaces all selection with that row
  • simple click on selected row removes all selection
  • Ctrl + click combination is required to add unselected row to existing selection
  • Ctrl + click combination is required to remove a selected row from existing selection

When true:

  • simple click on unselected row adds it to the existing selection
  • simple click on selected row removes it from selection

Shift + click to expand the selection works the same with either of the toggle modes.

typestring'cell' Either rows or cells can be selected by UI (keyboard / mouse) depending upon its value: 'cell', 'row' or null. If you need both row and cell selections, then use cell selections along with checkbox row selections.

Code examples:

Initialize the pqGrid with selectionModel option specified.

pq.grid( selector, {selectionModel: { type: 'cell', mode: 'block'} } );

Get or set the selectionModel option, after initialization:

//getter
var selectionModel=grid.option( "selectionModel" );

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

showBottomType: Boolean
Default: true
Governs display of bottom section of the grid. Frozen rows at bottom and Paging toolbar are displayed in the bottom section.

Code examples:

Initialize the pqGrid with showBottom option specified.

pq.grid( selector, { showBottom : true } );

Get or set the showBottom option, after initialization:

//getter
var showBottom = grid.option( "showBottom" );

//setter
grid.option( "showBottom", false );

showHeaderType: Boolean
Default: true
It determines display of the header of the columns.

Code examples:

Initialize the pqGrid with showHeader option specified.

pq.grid( selector, {showHeader: false} );

Get or set the showHeader option, after initialization:

//getter
var showHeader = grid.option( "showHeader" );

//setter
grid.option( "showHeader", false );

showTitleType: Boolean
Default: true
Governs display of title in the top section(above the column headers) of the grid.

Code examples:

Initialize the pqGrid with showTitle option specified.

pq.grid( selector, { showTitle : true } );

Get or set the showTitle option, after initialization:

//getter
var showTitle = grid.option( "showTitle" );

//setter
grid.option( "showTitle", false );

showTopType: Boolean
Default: true
Governs display of top section (above the column headers) of the grid.

Code examples:

Initialize the pqGrid with showTop option specified.

pq.grid( selector, { showTop : true } );

Get or set the showTop option, after initialization:

//getter
var showTop=grid.option( "showTop" );

//setter
grid.option( "showTop", false );

showToolbarType: Boolean
Default: true
Governs display of toolbar within the top region(above the column headers) of the grid.

Code examples:

Initialize the pqGrid with showToolbar option specified.

pq.grid( selector, { showToolbar : true } );

Get or set the showToolbar option, after initialization:

//getter
var showToolbar=grid.option( "showToolbar" );

//setter
grid.option( "showToolbar", false );

skipSSFnType: Boolean
Default:
(v9.1.0) Turn off spreadsheet functions when true. Useful for performance gains with large no of records.

Code examples:

Initialize the pqGrid with skipSSFn option specified.

pq.grid( selector, { skipSSFn : true } );

Get or set the skipSSFn option, after initialization:

//getter
var skipSSFn = grid.option( "skipSSFn" );


sortableType: Boolean
Default: true
Set it to false to disable sorting for all columns. This option is replaced by sortModel.on since v3.0.0

Code examples:

Initialize the pqGrid with sortable option specified.

pq.grid( selector, {sortable: false} );

Get or set the sortable option, after initialization:

//getter
var sortable = grid.option( "sortable" );

//setter
grid.option( "sortable", false );

sortModelType: Object
Default: { cancel: true, ignoreCase: false, multiKey: 'shiftKey', number: true, on: true, single: true, sorter: [ ], space: false, type: 'local', wholeCell: undefined }
cancel: When true and header cell is clicked, sorting goes through 3 states:ascending, descending and unsorted. When false, sorting goes through 2 states:ascending and descending only. It's applicable to single column sorting and first column of multiple column sorting only.

ignoreCase: set this to true for case insensitive sorting of string columns. This sub-option is added in v3.3.0.

multiKey: Any modifier key which when pressed while click on subsequent header cells turns the sorting into multi column sorting. When multi column sorting is required without any modifier key, multiKey should be set to null besides setting single to false. This sub-option is added in v3.3.0.

number: In case of multiple column sorting a number is displayed beginning with 1 beside every column header cell title that indicates the priority of every column while sorting.

on: A sub-option of boolean type, set it to false to disable sorting for all columns.

single: It determines the simultaneous number of columns involved while sorting. When true, only single column can be sorted at a time. When false, any number of columns can be sorted at a time. When single is false, sorter has more than one objects in the array. When single is true, sorter has only one object in the array.

sorter: It's an array of { dataIndx: dataIndx, dir: "up/down" } objects where dataIndx is dataIndx of the column and dir has 2 possible values "up" & "down".

space: Space is reserved for the sort triangle icon and number indicator in the header cell beside title for non-sorted columns. Main purpose of this sub-option is to assist flex in pre reservation of space.

type: It decides the location of sorting, possible values are "local" and "remote".

wholeCell: It makes the whole header cell clickable for sort instead of default title of header cell. It requires selectionModel.column to be set false.

Note: Use sort method to change sortModel options dynamically.

Code examples:

Initialize the pqGrid with sortModel option specified.

pq.grid( selector,{
    sortModel: {
        cancel: false,
        type: "local",
        sorter:[ { dataIndx: "products", dir: "up" } ]
    }
});

Get or set the sortModel option, after initialization:

//getter
var sortModel = grid.option( "sortModel" );

stateColKeysType: object
Default: { width: 1, filter: [ 'crules', 'mode' ], hidden: 1 }
Column properties to be saved in the preserved state of grid. (v5.4.0) More properties can be added by setting them with value 1 and existing ones can be skipped by setting value as 0. Nested properties like filter are added by specifying required sub-options as an array.

Code examples:

Initialize the pqGrid with stateColKeys option specified.

//save column title and skip column width.
pq.grid( selector, { stateColKeys : { title: 1, width: 0} } );


stateKeysType: object
Default: { height: 1, width: 1, freezeRows: 1, freezeCols: 1, groupModel:[ 'dataIndx', 'collapsed', 'grandSummary' ], pageModel: [ 'curPage', 'rPP' ], sortModel: [ 'sorter' ] }
Grid properties to be used by saveState method. (v5.4.0) Existing scaler properties can be skipped by setting value as 0. Nested properties like groupModel, pageModel, etc are added by specifying required sub-options as an array. (v7.2.0) treeModel support is also added.

Code examples:

Initialize the pqGrid with stateKeys option specified.

//skip freezeCols property.
pq.grid( selector, { stateKeys : { freezeCols: 0} } );

//include open / close state of nodes from treegrid.
pq.grid( selector, { stateKeys : { treeModel: ['nodeClose']} } );


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

Code examples:

Initialize the pqGrid with stringify option specified.

pq.grid( selector, { stringify : false } );


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

Code examples:

Initialize the pqGrid with stripeRows option specified.

pq.grid( selector, { stripeRows : false } );

Get or set the stripeRows option, after initialization:

//getter
var stripeRows=grid.option( "stripeRows" );

//setter
grid.option( "stripeRows", true );

summaryDataType: Array
Default: undefined
An array of any number of rows in format similar to the main data in grid. When defined, it creates fixed rows at the bottom of grid with row data taken from this option. It can be get and set at runtime after initialization like any other option.

Code examples:

Initialize the pqGrid with summaryData option specified.

pq.grid( selector,{
    summaryData : [
        {rank: 10, company: 'x', profit: 100, loss: 50 },
        {rank: 12, company: 'y', profit: 200, loss: 60 }
    ]
});


summaryOnTopType: Boolean
Default: undefined
(v8.1.0) By default, summary of grouped rows or in plain grid is displayed at bottom of table body. Summary is displayed on top of table body when this option is true. This option can't be changed after initialization of grid.

Code examples:

Initialize the pqGrid with summaryOnTop option specified.

pq.grid( selector, {
    summaryOnTop : true
});


summaryOptionsType: Object
Default: { number: "avg,max,min,stdev,stdevp,sum", date: "count,max,min", string: "count" }
Aggregate options in summary editor (select list) corresponding to data types of columns. e.g., for number datatype columns ( 'float' and 'integer' ), summary editor has "avg", "sum", "max" and "min" options in the dropdown list. Custom aggregates can be included in or removed from summary editor (select list) by changing this object.

summaryTitleType: Object
Default: { avg: "Avg: {0}", count: 'Count: {0}', max: "Max: {0}", min: "Min: {0}", sum: "Sum: {0}" }
Titles for summary cells corresponding to different aggregates. Titles can be strings or callback functions. Titles can be added for custom aggregates in summary cells by changing this object.

tabModelType: Object
Default: see sub-options below
(v8.1.0) It configures properties for dislaying tabs UI similar to any spreadsheet app.

tab is used in the API whose type is as below:

type tab = {     
    extraRows?: number //extra rows
    extraCols?: number //extra columns
    gridOptions?: pq.gridT.options | ((mainTab: tab)=> pq.gridT.options) //grid options used during initialization
    hidden?: boolean //initially hidden
    noClose?: boolean //tab can't be closed
    noRename?: boolean //tab can't be renamed
    name?: string //name of tab
    sheet?: worksheet //worksheet structure
}
OptionTypeDefaultDescription
activeIdnumber0 Index of the active tab beginning from 0.
newTab
(()=> tab)
function(){        
    return {
        sheet: {},
        extraRows: 20,
        extraCols: 10
    }
}
This callback is called whenever new tab is added. It should return the tab object.
noAddbooleanundefined No new tab can be added from the UI when this is true.
noSortablebooleanundefined Tabs can't be sorted from the UI when this is true.
tabstab[ ]undefined Array of initial tabs. Defined value of this option ( even an empty array ) turns on the tab UI.

Code examples:

Initialize the pqGrid with tabModel option specified.

//turn on the tabs UI
pq.grid( selector, {tabModel: { tabs: [] } } );


titleType: String
Default: null
Title of the pqGrid.

Code examples:

Initialize the pqGrid with title option specified.

pq.grid( selector, {title:'Shipping Details'} );

Get or set the title option, after initialization:

//getter
var title=grid.option( "title" );

//setter
grid.option( "title", "Order Details" );

toolbarType: Object
Default: undefined
Toolbar for the pqGrid. It contains the properties: cls: class of the toolbar. style: css style of the toolbar. items: array of the controls / items in the toolbar as array. Every control / item has one or more of the following properties:
  • attr: attribute to be assigned to the control.
  • attrFile: (v7.2.0) attribute to be assigned to file control e.g., attrFile: 'accept=".xlsx"'
  • cls: class to be assigned to the control.
  • icon: class of the jqueryui icon or a custom icon 16 x 16. Used in button control and file control (v7.2)
  • init: (v7.1.0) callback used to initialize a custom control e.g., datepicker, colorpicker, etc. It receives DOM element of the control as argument.
  • label: Applicable to button, checkbox, textbox and textarea.
  • listeners: An array of event listeners for the control.
  • listener: An object to add single event listener to the control where key is name of any suitable DOM event and value is callback e.g., listener: { 'click': function(){ } }
    Non DOM event "timeout" can also be used that calls the listener function asynchronously after a certain time interval in ms specified in filterModel.timeout has elapsed since last keyup or change event.
  • listener: Callback to add single event listener to the control. Type of the event need not be mentioned as it's construed from the type of control .e.g., for select, input, textarea: change event is used, etc.
  • options: It can be array, callback or object. In case of select list it can be an array of options or callback returning options.
    In case of button, the options in object format are passed while initializing the control. For example to create an icon only button, options: { text: false, showLabel: false } can be passed. Check API of jQueryUI button control to see complete list of options.
  • style: css style to be assigned to the control. In case of non-button control with a label, style is applied to the label rather than the control.
  • type: which can be 'color' (since v9.0.0), 'textbox', 'textarea', 'file', 'button', 'select', 'checkbox', html string or a callback function returning html string.
  • value: Initial or current value of the control. Added in v3.3.0
The reference to current control can be obtained from event.target in event listeners.
The context (this) of all callbacks and event listeners has been set to instance of grid since v3.3.0.

Code examples:

Initialize the pqGrid with toolbar option specified.

var toolbar = {
    cls: 'pq-toolbar-crud',
    items: [
        {
            type: 'button',
            label: 'Add',
            icon: 'ui-icon-plus',
            listener: function(){ }
        },
        {
            type: 'checkbox',
            label: 'Merge cells',
            value: true, //checked initially.
            listener: function(){ }
        },
        { type: 'button', label: 'Delete', icon: 'ui-icon-minus', listener: deletehandler }
    ]
};
pq.grid( selector, { toolbar: toolbar } );

Get or set the toolbar option, after initialization:

//getter
var toolbar = grid.option( "toolbar" );

//setter
grid.option( "toolbar", new_toolbar_object );

//toolbar items is a simple js array, so it can be manipulated like one.

//assign all new items in toolbar
grid.option( "toolbar.items", new_toolbar_items_array )

//add new item
grid.option( "toolbar.items").push( new_toolbar_item_object )

//update existing item e.g., update options of a select dropdown element.
grid.option( "toolbar.items")[index_of_item].options = new_options

//Please note that all toolbar changes should be followed by 
grid.refreshToolbar();

toolPanelType: Object
Default: see sub-options below
It provides GUI within the grid for managing pivoting, row grouping, and aggregate columns.

Following are the toolPanel sub-options:

OptionTypeDefaultDescription
disablePivotChkBoxbooleanundefined (8.6.0) Disable the pivot check box displayed beside Pivot mode.
hideAggPanebooleanundefined Hides the Aggregate pane.
hideColPanebooleanundefined Visibility of pivot pane is dependent upon combination of pivot mode (groupModel.pivot) and this option. When this option is true, pivot pane is always hidden. Otherwise pivot pane is hidden when pivot mode is off and pivot pane is visible when pivot mode is on.
hideGroupChkBoxbooleanundefined (8.6.0) Hide the grouping check box displayed beside Row grouping title.
hidePivotChkBoxbooleanundefined Hides the pivot checkbox. Pivot checkbox is used to toggle pivot mode(groupModel.pivot).
hideRowPanebooleanundefined Hides the Row grouping pane when true.
showbooleanundefined Shows the toolPanel initially. Use ToolPanel() methods to show/hide after initialization.

Code examples:

Initialize the pqGrid with toolPanel option specified.

//show toolPanel initially.
pq.grid( selector, {toolPanel: { show: true } } );


trackModelType: Object
Default: { on: false, dirtyClass: 'pq-cell-dirty' }
Sets tracking properties for inline add, update and delete operations. on should be set to true and dataModel.recIndx should be set before some of the important transactional methods such as isDirty(), getChanges(), commit() and rollback() can be used.

Code examples:

Initialize the pqGrid with trackModel option specified.

pq.grid( selector,{ trackModel : { on: true } });

Get or set the trackModel option, after initialization:

//getter
var trackModel = grid.option( "trackModel" );

//setter
grid.option( "trackModel", { on : false } );

treeModelType: Object
Default: see sub-options below

Treegrid groups rows based on common parent and displays them in hierarchical fashion.

treeModel allows us to set following properties for the treegrid. Use Tree().option() method to set treeModel options after initialization.

Also check Tree() method.

PropertydataTypeDefaultDescription
Tree related options:
childstrstring'children'Name of field in rows containing nested children nodes. Prefix it with pq_ i.e., "pq_children" to exclude nested children nodes from parent nodes returned by getChanges method in case of batch editing of treegrid.
dataIndxstring, integerundefineddataIndx of column used to display tree nodes. This option is mandatory to create treegrid.
filterLockSummarybooleanundefined(v7.7.0) It prevents any change in summary values upon filtering. It works only with filterInTitleRow option.
filterShowChildrenbooleanundefined(v7.7.0) It displays all the children of a parent node when it matches filter criteria.
formatstringundefined

Format of data. Possible values are nested and flat. It's not required to specify this option as it's automatically detected by the grid from data.

Example of nested data:

var data = [{
    id: 1,
    name: "C",
    size: "",
    date: "05/13/2008",
    children: [{
        id: 2,
        name: "Program Files",
        size: "9047",
        date: "03/06/2015",
        children: [
            { id: 21, name: "Apache", size: "", date: "01/16/2010" }
        ]
    }]
}];

Example of flat data: Flat data is just like normal data format of the grid; children nodes specify the parent as parentId property.

var data = [
    { id: 1, name: "C", size: "", date: "05/13/2008" },
    { id: 2, name: "Program Files", size: "9047", date: "03/26/2015", parentId: 1 },
    { id: 21, name: "Apache", size: "", date: "01/16/2010", parentId: 2 }
];
hideLinesbooleanundefined (v9.1.0) Hide the treegrid hierarchy lines.
historyAddbooleanundefined (v7.4.0) History for addNodes can be controlled by this option. historyModel.on controls the history by default.
historyDeletebooleanundefined (v7.4.0) History for deleteNodes can be controlled by this option. historyModel.on controls the history by default.
historyMovebooleanundefined (v7.4.0) History for movement of adjacent nodes via moveNodes can be controlled by this option. Not added to history by default.
iconCollapsearray['ui-icon-triangle-1-se', 'ui-icon-triangle-1-e'] An array of strings. First string corresponds to open state icon and 2nd string corresponds to close state icon.
iconFolderarray['ui-icon-folder-open', 'ui-icon-folder-collapsed']An array of strings. First string corresponds to open state folder icon and 2nd string corresponds to close state folder icon.
iconFilestring'ui-icon-document'icon displayed beside leaf node.
iconsbooleanundefinedShow icon beside all nodes.
idstring'id'Name of field which stores unique identifier of each row. It's required to specify this field when either nested or flat data format is used.
indentinteger18Indent in pixels of horizontal space created for every successive tree node level.
parentIdstring'parentId'Name of field which stores unique identifier of parent row. It's required to specify this field when flat data format is used.
leafIfEmptybooleanundefined (v7.4.0) Empty folder nodes left after addNodes, deleteNodes, moveNodes, undo, redo are converted into leaf nodes.
nodeCloseObjectundefined (v7.2.0) get or set pq_close value of all parent nodes. This option is useful in initial or run time open/close state management of nodes.
{
    1: false, //1 is the id of the node and false means node is open
    2: true,
    10: true,
    21: false,
    ...
}
renderFunctionundefinedCallback function to partially render content beside icon, checkbox etc in a tree cell.

It's similar to column.renderLabel callback, latter has higher precedence when both are specified.

The callback can return plain text, html string or an object containing any or all of these properties:

  • attr: Html attribute.
  • cls: Css class applied to node cell.
  • iconCls: class of the icon displayed beside the text of node e.g., ui-icon-print, ui-icon-home, etc.
  • style: Css style applied to node cell.
  • text: plain or html string displayed in the cell.

Example:

    render: function(ui){
        var iconCls, cd = ui.cellData, cls, attr, text, style;
        if(cd == "some value"){
            iconCls = 'ui-icon-print';
            cls = 'red';
            attr = "title='This is title'";
        }
        else if( cd.indexOf("some text") >= 0){
            iconCls = 'ui-icon-home';
            style = "text-decoration:underline;background:yellow;font-style:italic;";
            text = "Home";
        }
        else if(cd == "some other value"){
            return "Hello there";
        }
        return { attr: attr, cls: cls, iconCls: iconCls, style: style, text: text };
    }
summarybooleanundefineddisplay summary of the children nodes in a separate row under the nodes. Check column.summary option to define summary of columns.
summaryInTitleRowbooleanundefined(v7.7.0) display summary of the children nodes in the parent node row itself. Check column.summary option to define summary of columns. treeModel.summary option should be set to false when this option is set to true.
Checkbox related options:
cascadebooleanundefinedtree nodes are affected in cascading manner when this option is true i.e., checking of parent checkbox leads to check of all child nodes.
cbIdstring'pq_tree_cb'name of field in rows to store checkbox state as boolean values. Indeterminate checkbox states are stored as null values.

A hidden column with same dataIndx value and an editable callback can be added in the colModel to implement disabled checkboxes.

{
    dataIndx: 'pq_tree_cb',
    hidden: true,
    editable: function(ui){
        //return false based on a runtime condition to disable checkbox in the row.
    }
}
checkboxboolean, functionundefinedadd checkbox to the tree nodes when this option is true or a callback function that returns true.
checkbox: function( node ){
    if( node.name.indexOf( "php" ) >= 0){
        return true;
    }
}
checkboxHeadbooleanAdds checkbox in the header cell (new in v5.2.0)
maxCheckinteger Maximum allowed total number of checked checkboxes.( v5.3.0 )
selectbooleanundefinedRow selections are bound to checkbox states.
useLabelboolean Similar to column.useLabel it wraps checkbox cell of treegrid column within a label( v5.3.0 ).

Code examples:

Initialize the pqGrid with treeModel option specified.

pq.grid( selector,{ treeModel : { dataIndx: 'name' } });


triggerType: Boolean
Default: false
By default the events generated by the grid are not emitted to DOM nodes. It can be turned on by setting this option to true.

Code examples:

Initialize the pqGrid with trigger option specified.

//turn trigger on
pq.grid( selector, { trigger: true } );

Get or set the trigger option, after initialization:

//getter
var trigger = grid.option( "trigger" );
    

validationType: Object
Default: { icon: 'ui-icon-alert', cls: 'ui-state-error', style: 'padding:3px 10px;' }
It provides the tooltip properties used in cell validations. icon, cls and style are added to the tooltip. Note that validation sub options can be overridden in the individual column validations ( column.validations[ ] ).

Code examples:

Initialize the pqGrid with validation option specified.

//no display of icon in the validation tooltip.
pq.grid( selector, {validation: { icon: '' } } );

Get or set the validation option, after initialization:

//getter
var validation = grid.option( "validation" );

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

virtualWinType: Boolean
Default: undefined
(v8.1.0) Virtual rendering w.r.t browser window for rows i.e., rows which lie within intersection of browser viewport and grid viewport at any instant are rendered.

Code examples:

Initialize the pqGrid with virtualWin option specified.

pq.grid( selector, {virtualWin: true } );


virtualXType: Boolean
Default: undefined
(v7.5.0) Virtual rendering along x axis i.e. columns can be disabled by setting this option to false. Virtual rendering is enabled by default otherwise.

Code examples:

Initialize the pqGrid with virtualX option specified.

pq.grid( selector, {virtualX: false } );


virtualYType: Boolean
Default: undefined
(v7.5.0) Virtual rendering along y axis i.e. rows can be disabled by setting this option to false. Virtual rendering is enabled by default otherwise.

Code examples:

Initialize the pqGrid with virtualY option specified.

pq.grid( selector, {virtualY: false } );


warningType: Object
Default: { icon: 'ui-icon-info', cls: '', style: 'padding:3px 10px;' }
It provides the tooltip properties used in cell warnings. icon, cls and style are added to the tooltip. Note that warning sub options can be overridden in the individual column warnings ( column.validations[ ] ).

Code examples:

Initialize the pqGrid with warning option specified.

//no display of icon in the warning tooltip.
pq.grid( selector, { warning: { icon: '' } } );

Get or set the warning option, after initialization:

//getter
var warning = grid.option( "warning" );

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

widthType: String or Integer
Default: 'auto'
Width of the grid in number of pixels (without 'px' suffix) i.e., 150, percent (%) i.e. '80%', combination of % and px i.e. '100%-20' or '50%+10', auto or flex. When % format is used, width is calculated relative to the immediate parent of grid unless dimsRelativeTo is specified. The grid width becomes sum total of all the columns when width is flex. Note that refresh method should be called when width is changed dynamically through setter.

Code examples:

Initialize the pqGrid with width option specified.

pq.grid( selector, { width: 500} );

Get or set the width option, after initialization:

//getter
var width=grid.option( "width" );

//setter
grid.option( "width", 500 );

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

Code examples:

Initialize the pqGrid with wrap option specified.

pq.grid( selector, {wrap:true} );

Get or set the wrap option, after initialization:

//getter
var wrap=grid.option( "wrap" );

//setter
grid.option( "wrap", true );
Methods
addClass( { rowData, rowIndx, dataIndx, cls, refresh } )

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

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

Code examples:

Invoke the method:

//Add classes 'pq-delete' & 'pq-edit' to 3rd row.
grid.addClass( {rowIndx: 2, cls: 'pq-delete pq-edit'} );

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


addClassHead( { ri, colIndx } )

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

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

Code examples:

Invoke the method:

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

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


addNodes( nodes: any[ ], rowIndx?: number )

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

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

Code examples:

Invoke the method:

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


addRow( { newRow, rowIndx, rowList, track, source, history, checkEditable, refresh } )Returns: Integer

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:

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

  • newRow
    Type: Object or Array
    Reference to 1-dimensional array or object representing row data.
  • rowIndx
    Type: Integer
    Optional. Zero based index of the row.
  • rowList
    Type: Array
    Array of objects {rowIndx: rowIndx, newRow: newRow}.
  • track
    Type: Boolean
    Optional parameter with default value of trackModel.on.
  • source
    Type: String
    Optional parameter with default value of 'add'.
  • history
    Type: Boolean
    Optional parameter with default value of historyModel.on.
  • checkEditable
    Type: Boolean
    Optional parameter with default value of true.
  • refresh
    Type: Boolean
    Optional parameter with default value of true.

Code examples:

Invoke the method:

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

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

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



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

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

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

Code examples:

Invoke the method:

//Add a row title.
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' } }
);


Checkbox( dataIndx )

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.

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

Code examples:

Invoke the method:

Checkbox.checkAll();
            


collapse( )

Collapse the grid.

    Code examples:

    Invoke the method:

    grid.collapse();
                


    Columns()

    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, ci?: number, cm?: colModel, source?: string (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, diShow?: 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};
                  })
              


      commit({ type, rows })

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

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

      rows parameter further limits the type of commit operation to the matching rows only. The format of rows is similar to dataModel.data i.e., an array of row objects and usually fetched from remote server.

      When type = add and rows argument is passed, commit updates the primary key i.e., recIndx of the matching records in grid from rows.

      • type
        Type: String
        Optional parameter to limit or control the type of rollback.
      • rows
        Type: Array
        Optional parameter. An array of rows to limit the type of commit to matching rows only. It acts as a helper while updating primary keys of added records from server. It also helps to control the updated and deleted records from server.

      Code examples:

      Invoke the method:

      //commit all added, updated and deleted records.
      grid.commit();
      
      //commit all updated records.
      grid.commit( { type: 'update' } );
      
      //commit updated records with matching rows only.
      grid.commit( { type: 'update', rows: rows } );
      
      //commit added records only and update the primary key of added records from rows.
      grid.commit( { type: 'add', rows: rows } );
      


      Context( )

      (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.

      type is a string to identify the items from contextMenu option definition e.g., type = 'toolbar' would use 'toolbarItems' from contextMenu.

      at and my are used in the same way as parameters of jQueryUI position method. https://api.jqueryui.com/position/

        Code examples:

        Invoke the method:

        grid.Context().showMenu( element, {
            type: 'custom',
            my: "right top",
            at: "right bottom"
        })


        copy()

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

          Code examples:

          Invoke the method:

          //copy selections.
          grid.copy( );
          


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

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

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

          Code examples:

          Invoke the method:

          //Add meta data to a row.
          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} }
                  });


          deleteNodes(nodes: any[ ])

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

          • nodes
            Type: Array
            Array of nodes or rows.

          Code examples:

          Invoke the method:

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


          deleteRow( { rowIndx, rowList, track, source, history, refresh } )

          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.

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

          Code examples:

          Invoke the method:

          //Delete the row at 5th position from top.
          grid.deleteRow({ rowIndx: 4 } );
          
          //Delete multiple rows.
          grid.deleteRow({
              rowList:[
                  { rowIndx: 0 },
                  { rowIndx: 5 }
              ]
          });
          


          destroy()

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

            Code examples:

            Invoke the method:

            grid.destroy( );


            Detail( )

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


              disable()

              Disables the pqGrid.

                Code examples:

                Invoke the method:

                grid.disable( );


                Drag()

                (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 is same as nodes returned by dragModel.dragNodes callback.
                • rowData is row data of the row where drag was initiated.
                • rowIndx is indx of row where drag was initiated.
                {
                    nodes: Array
                    rowData: any
                    rowIndx: number
                }
                
                grid Returns grid instance associated with draggable

                  Code examples:

                  Invoke the method:

                   var Drag = grid.Drag(); 


                  enable()

                  Enables the pqGrid.

                    Code examples:

                    Invoke the method:

                    grid.enable( );


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

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

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

                    Code examples:

                    Invoke the method:

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


                    editFirstCellInRow( { rowIndx } )

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

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

                    Code examples:

                    Invoke the method:

                    //edit first editable cell in 3rd row.
                    grid.editFirstCellInRow( { rowIndx: 2 } );


                    expand( )

                    Expand the grid.

                      Code examples:

                      Invoke the method:

                      grid.expand( );
                                  


                      exportCsv( { .. } )

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


                        exportExcel( { ... } )

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


                          exportData({ ... })Returns: String or Returns: Blob or Returns: PlainObject

                          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:

                          formatTabsReturn type
                          csv, htmnoplain string
                          csv, htmyesobject
                          object: { sheets: {
                              name: string   //name of tab
                              hidden: boolean
                              content: string,
                              pics: { width: number, height: number, image: string } [ ] //v10.0.0
                          } [ ] }
                          pdfnoobject (document definition of pdfmake table)
                          object: {
                              headerRows: number
                              body: { alignment: string, border: boolean [ ], borderColor: string [ ], colSpan: number, link: string, rowSpan: number, text: string, ... } [ ] [ ]
                          }
                          pdfyesobject
                          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
                          } [ ] }
                          jsnoobject
                          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 } [ ] [ ]
                          }
                          jsyesobject
                          object: { sheets: {
                              name: string   //name of tab
                              hidden: boolean
                              content: object   //same as js format without tabs.
                          } [ ] }
                          xlsxno / yesBlob
                          xlsxno / yesbase64 string when type parameter to the method is 'base64'
                          wbno / yesobject
                          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 [ ]
                              } [ ] 
                          }

                          Parameters to the method:
                          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.
                          Format Properties
                          csv text
                          html text, html, css, alignment, valign
                          pdf text, link, css, border (array i.e., [true, false, true, true]), borderColor (array i.e., ['red', 'green', 'brown', 'yellow' ]), style (used by pdfmake to apply common style to cells with default value of 'body'), alignment, rowSpan, colSpan or any other property from pdfmake documentation.
                          xlsx align, bgColor, bold, border, color, comment, italic, font, fontSize, format, formula, link, underline, valign, value, wrap
                          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.
                          Format Properties
                          csv text
                          html text, html, css, alignment, valign
                          pdf text, link, css, border (array i.e., [true, false, true, true]), borderColor (array i.e., ['red', 'green', 'brown', 'yellow' ]), style (used by pdfmake to apply common style to cells with default value of 'head'), alignment, rowSpan, colSpan or any other property from pdfmake documentation.
                          xlsx align, bgColor, bold, border, color, comment, italic, font, fontSize, format, formula, link, underline, valign, value, wrap
                          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.
                          Format Properties
                          html attr, css
                          pdf css
                          xlsx align, bgColor, bold, border, color, hidden, italic, font, fontSize, format, underline, valign, wrap
                          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.
                          Format Properties
                          html attr, css
                          pdf css
                          xlsx align, bgColor, bold, border, color, hidden, italic, font, fontSize, format, underline, valign, wrap
                          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
                          Rest of the parameters are listed below:

                          • activeSheet
                            Type: Boolean
                            (v9.0.0) Only active sheet is exported.
                          • cssRules
                            Type: String
                            String of global css rules used while html export e.g., td, th{ padding: 5px;border:1px solid #ccc; }
                          • cssTable
                            Type: String
                            (v9.0.0) String of css rules added inline to tag while html export
                          • format
                            Type: String
                            Supported formats are 'csv', 'html', 'json', 'pdf', 'xlsx', 'wb', 'js'.
                          • linkStyle
                            Type: String
                            (v9.0.0) css style for cells having hyperlinks, it has lower priority than corresponding cell based styles.
                          • noheader
                            Type: Boolean
                            non-json export: The column headers are included in exported data by default. Set true to exclude them.
                          • nopqdata
                            Type: Boolean
                            json export: Set true to exclude pq_ related meta data in the rows.
                          • nopretty
                            Type: Boolean
                            json export: The data is separated by newline characters and indented by 2 spaces. Set true to skip any formatting of the exported data.
                          • render
                            Type: Boolean
                            non-json export: Set true to include all rendered cells in exported data. column.exportRender option can be used to selectively include the rendered cells or override this parameter.
                          • replace
                            Type: Array
                            Excel export: (v6.2.4) Used to replace any strings in the spreadsheet. Entries in the array correspond to the parameters of the native js String replace method i.e., [ /Hello World/g, "Hello Globe"] would replace every occurence of "Hello World" with "Hello Globe" in the cells of spreadsheet.
                          • separator
                            Type: String
                            Applicable to csv format. It specifies the separator between the fields, default is ",".
                          • selection
                            Type: string
                            (v9.0.0) Only the selected rows or rows having pq_rowselect property are exported when its value is 'row'. Only the selected range of cells are exported when its value is 'cell'.
                          • sheetName
                            Type: String
                            Name of the worksheet in case of xlsx export of grid without tabs.
                          • sheets
                            Type: Array
                            (v9.0.0) Array of sheet names. Only the specified sheets are exported if this parameter is passed.
                          • skipHiddenCols
                            Type: Boolean
                            (v9.0.0) Excludes hidden columns from being exported
                          • skipHiddenRows
                            Type: Boolean
                            (v9.0.0) Excludes hidden rows from being exported
                          • skipHiddenSheets
                            Type: Boolean
                            (v9.0.0) Excludes hidden sheets from being exported
                          • skipBOM
                            Type: boolean
                            (v9.0.0) csv export: BOM is added in beginning of file to support opening unicode language files in Excel. It can be skipped by passing true value for this parameter.
                          • type
                            Type: String
                            Excel export: format of exported xlsx file: 'blob' (default) or 'base64'.
                          • workbook
                            Type: Boolean
                            Excel export: generate intermediate javascript workbook. This parameter is deprecated in v9.0.0, use format: 'wb' instead.
                          • Code examples:

                            Invoke the method:

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


                            filter( { oper, rule(s), data, mode } )Returns: Array

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

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

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

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

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

                            Code examples:

                            Invoke the method:

                            var filtered_data = grid.filter({
                                mode: 'OR',
                                data: [
                                    { country: 'India', city: 'New Delhi' },
                                    { country: 'India', city: 'Pune' },
                                    { country: 'France', city: 'Paris' },
                                    { country: 'France' },
                                    { country: 'USA', city: 'New Jersey' },
                                    { country: 'USA', city: 'New York' },
                                ],
                                rules: [
                                    { dataIndx: 'country', condition: 'begin', value: 'Fr' },
                                    { dataIndx: 'city', condition: 'notempty' }
                                ]
                            });
                            
                            //filter the data in grid. (Note the data parameter is not passed)
                            grid.filter({
                                oper: 'replace',
                                mode: 'OR',
                                rules: [
                                    { dataIndx: 'country', condition: 'begin', value: 'Fr' },
                                    { dataIndx: 'city', condition: 'notempty' }
                                ]
                            });
                            
                            //filter data in grid with multiple conditions in single column. (new in v5.2.0)
                            grid.filter({
                                oper: 'replace',
                                rules: [
                                    { dataIndx: 'country', condition: 'begin', value: 'Fr' },
                                    {
                                        dataIndx: 'city',
                                        mode: 'OR',
                                        crules: [
                                            { condition: 'notempty' },
                                            { condition: 'begin', value: 'a' }
                                        ]
                                    }
                                ]
                            });
                            
                            


                            flex( { dataIndx: [dataIndx], colIndx: [colIndx] } )

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

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

                            Code examples:

                            Invoke the method:

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


                            focus( { rowIndxPage, colIndx } )

                            It sets focus upon a single cell. It focus the first visible cell in grid when no parameters are passed.

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

                            Code examples:

                            Invoke the method:

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


                            focusHead( { ri, colIndx } )

                            (v8.7.0) It sets focus upon a single header cell. It focus the first visible cell in grid header when no parameters are passed.

                            • ri
                              Type: Integer
                              Zero based index of the header row.
                            • colIndx
                              Type: Integer
                              Zero based index of the column.

                            Code examples:

                            Invoke the method:

                            grid.focusHead( { ri: 1, colIndx:  2 } );
                            


                            Formulas( )

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

                                var F = grid.Formulas();
                            

                            Following methods can be invoked on the Formulas instance.

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


                            freezeFirstCol

                            (v9.0.0) This method freezes first visible column.

                              Code examples:

                              Invoke the method:

                              grid.freezeFirstCol();


                              freezeTopRow

                              (v9.0.0) This method freezes top visible row.

                                Code examples:

                                Invoke the method:

                                grid.freezeTopRow();


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

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


                                  getCellFilter( { dataIndx, colIndx, vci } )Returns: jQuery

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


                                    getCellHeader( { dataIndx, colIndx, ri, vci } )Returns: jQuery

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


                                      getCellsByClass( { cls } )Returns: Array

                                      Used to get cells having a given class added by addClass() method or JSON notation rowData.pq_cellcls. It returns all cells, even the cells that are not visible. Returns an array of objects { rowData: rowData, rowIndx: rowIndx, dataIndx: dataIndx }.

                                      • cls
                                        Type: String
                                        Name of a single class.

                                      Code examples:

                                      Invoke the method:

                                      var cellList = grid.getCellsByClass( { cls : 'pq-delete' } );
                                      
                                      //get first cell having the above class.
                                      var cell = cellList[0],
                                          rowData = cell.rowData,
                                          rowIndx = cell.rowIndx,
                                          dataIndx = cell.dataIndx;
                                      


                                      getCellIndices( { $td } )Returns: Object

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

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

                                      Code examples:

                                      Invoke the method:

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


                                      getChanges( { format, all } )Returns: Object

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

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

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

                                      Change Log v3.2.0

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

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

                                      Code examples:

                                      Invoke the method:

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


                                      getColIndx( {dataIndx, column } )Returns: Integer

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

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

                                      Code examples:

                                      Invoke the method:

                                      var colIndx = grid.getColIndx( { dataIndx: "profits" } );


                                      getColumn( { dataIndx } )Returns: Object

                                      Used to get column whose dataIndx is known.

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

                                      Code examples:

                                      Invoke the method:

                                      var column = grid.getColumn({ dataIndx: "profits" } );


                                      getCMPrimary( )Returns: Array

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


                                        getColModel( )Returns: Array

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


                                          getData( )Returns: Array

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

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

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

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

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

                                          Code examples:

                                          Invoke the method:

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


                                          getDataCascade( dataIndx, groupIndx? )Returns: Array

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

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

                                          Code examples:

                                          Invoke the method:

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


                                          getEditCell()Returns: PlainObject

                                          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.
                                            


                                            getEditCellData()Returns: String

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


                                              getFocus()Returns: Object

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


                                                getFocusHead()Returns: Object

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


                                                  getHeadIndices( th )Returns: Object

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


                                                  getInstance()Returns: Object

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


                                                    getNextVisibleCI( ci )Returns: Integer

                                                    (v8) Helps get index of next visible column.

                                                    Code examples:

                                                    Invoke the method:

                                                    ci = grid.getNextVisibleCI( ci );


                                                    getNextVisibleRIP( rip )Returns: Integer

                                                    (v8) Helps get index of next visible row.

                                                    Code examples:

                                                    Invoke the method:

                                                    rip = grid.getNextVisibleRIP( rip );


                                                    getPrevVisibleCI( ci )Returns: Integer

                                                    (v8) Helps get index of previous visible column.

                                                    Code examples:

                                                    Invoke the method:

                                                    ci = grid.getPrevVisibleCI( ci );


                                                    getPrevVisibleRIP( rip )Returns: Integer

                                                    (v8) Helps get index of previous visible row.

                                                    Code examples:

                                                    Invoke the method:

                                                    rip = grid.getPrevVisibleRIP( rip );


                                                    getPics( )Returns: Array

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


                                                      getRow( { rowIndxPage } )Returns: jQuery

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

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

                                                      Code examples:

                                                      Invoke the method:

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


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

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

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

                                                      Code examples:

                                                      Invoke the method:

                                                      //get reference to 3rd row on current page.
                                                      var rowData = grid.getRowData( {rowIndxPage: 2} );


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

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

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

                                                      Code examples:

                                                      Invoke the method:

                                                      var obj = grid.getRowIndx( { $tr : $tr } );
                                                      var rowIndx = obj.rowIndx;
                                                      


                                                      getRowsByClass( { cls } )Returns: Array

                                                      Used to get rows having a given class name added by addClass() method or JSON notation rowData.pq_rowcls. It returns all rows, even the rows that are not visible. Returns an array of objects { rowData: rowData, rowIndx: rowIndx }.

                                                      • cls
                                                        Type: String
                                                        Name of a single class.

                                                      Code examples:

                                                      Invoke the method:

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


                                                      getState( )Returns: object

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

                                                        Code examples:

                                                        Invoke the method:

                                                        var obj = grid.getState();


                                                        getViewPortIndx( )Returns: Object

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

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

                                                        Code examples:

                                                        Invoke the method:

                                                        var obj = grid.getViewPortIndx( ),
                                                            initV = obj.initV,
                                                            finalV = obj.finalV,
                                                            initH = obj.initH,
                                                            finalH = obj.finalH;
                                                        


                                                        getXHR( )Returns: object

                                                        (v9.1.0) Returns XHR instance used by grid for remote Ajax interactions.

                                                          Code examples:

                                                          Invoke the method:

                                                          var xhr = grid.getXHR();


                                                          goToPage( { rowIndx, page } )

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

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

                                                          Code examples:

                                                          Invoke the method:

                                                          //navigate to 3rd page.
                                                          grid.goToPage( { page: 3} );


                                                          Group( )

                                                          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 addNode event is fired during the process

                                                          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 deleteNode event is fired during the process

                                                          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 moveNode event is fired at end of the process.

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


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

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

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

                                                            Code examples:

                                                            Invoke the method:

                                                            //Check whether 3rd row has class 'pq-delete'.
                                                            var hasClass = 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'}
                                                            );


                                                            hideLoading()

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

                                                              Code examples:

                                                              Invoke the method:

                                                               grid.hideLoading( );


                                                              History()

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


                                                                importWb({ workbook, extraCols?, extraRows?, keepCM?, headerRowIndx?, sheet? })

                                                                Imports data from a json workbook into grid.

                                                                • extraCols
                                                                  Type: Integer
                                                                  Extra empty columns to be added in grid.
                                                                • extraRows
                                                                  Type: Integer
                                                                  Extra empty rows to be added in grid.
                                                                • keepCM
                                                                  Type: Boolean
                                                                  keep original colModel of grid for data binding.
                                                                • headerRowIndx
                                                                  Type: Integer
                                                                  Number of top zero based row index in worksheet to be treated as grid header row.
                                                                • sheet
                                                                  Type: String or Integer
                                                                  Index/name of sheet to be imported. All worksheets are imported in a grid with tabs or first worksheet is imported in a grid without tabs if this parameter is omitted.
                                                                • workbook
                                                                  Type: PlainObject
                                                                  json workbook to be imported

                                                                Code examples:

                                                                Invoke the method:

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


                                                                instance()Returns: Object

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


                                                                  isDirty({ rowIndx, rowData })Returns: Boolean

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

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

                                                                  Code examples:

                                                                  Invoke the method:

                                                                  grid.isDirty( );


                                                                  isEditable( { rowIndx, dataIndx } )Returns: Boolean

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

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

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

                                                                  Code examples:

                                                                  Invoke the method:

                                                                  grid.isEditable( { rowIndx: 3, dataIndx: "profits" } );


                                                                  isEditableCell( { rowIndx, dataIndx } )Returns: Boolean

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

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

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

                                                                  Code examples:

                                                                  Invoke the method:

                                                                  grid.isEditableCell( { rowIndx: 3, dataIndx: "profits" } );


                                                                  isEditableRow( { rowIndx } )Returns: Boolean

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

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

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

                                                                  Code examples:

                                                                  Invoke the method:

                                                                  grid.isEditableRow( { rowIndx: 3 } );


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

                                                                  Checks whether a cell, row or data (collection of rows) is valid against column.validations[] and returns an object { valid: true } when all cells are valid.

                                                                  It validates a single cell when rowData / rowIndx and dataIndx are passed as parameters.
                                                                  It validates a value when dataIndx and value are passed as parameters.
                                                                  It validates a single row when only rowIndx / rowData is passed.
                                                                  It validates collection of rows when data parameter is passed where data is in format of array of row objects similar to dataModel.data.

                                                                  When allowInvalid parameter is true, this method adds a class editModel.invalidClass to all invalid cells and returns a collection of all invalid cells.
                                                                  When allowInvalid parameter is false and focusInvalid is true, first invalid cell is focused and a tooltip is displayed beside the cell with validation.msg and returns { valid: false, dataIndx: dataIndx } of that first invalid cell.

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

                                                                  Code examples:

                                                                  Invoke the method:

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


                                                                  isValidChange( { allowInvalid, focusInvalid } )Returns: Object

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

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

                                                                  Code examples:

                                                                  Invoke the method:

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


                                                                  loadState( { state, refresh } )Returns: Boolean

                                                                  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.

                                                                  It doesn't restore the previous data of grid.
                                                                  It calls refeshDataAndView() unless refresh parameter is false.
                                                                  It returns true/false depending upon restoration success.

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

                                                                  Code examples:

                                                                  Invoke the method:

                                                                  //restore the previous state of grid.
                                                                  var success = grid.loadState( );


                                                                  moveNodes(nodes: any[ ], rowIndx?: number)

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

                                                                  This method is incompatible with remote paging

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

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

                                                                  Code examples:

                                                                  Invoke the method:

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


                                                                  off( event, fn )Returns:

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

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

                                                                  Code examples:

                                                                  Invoke the method:

                                                                  instance.off( 'beforeSort', fn ); 


                                                                  on( event, fn )Returns:

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

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

                                                                  Code examples:

                                                                  Invoke the method:

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


                                                                  one( event, fn )

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

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

                                                                  Code examples:

                                                                  Invoke the method:

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


                                                                  option()Returns: PlainObject

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

                                                                    Code examples:

                                                                    Invoke the method:

                                                                    var options = grid.option( );


                                                                    option( optionName )Returns: Object

                                                                    Gets the value currently associated with the specified optionName.

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

                                                                    Code examples:

                                                                    Invoke the method:

                                                                    var disabled = grid.option( "disabled" );


                                                                    option( optionName, value )

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

                                                                      Code examples:

                                                                      Invoke the method:

                                                                      grid.option( "disabled", true );


                                                                      option( options )

                                                                      Sets one or more options for the Grid.

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

                                                                      Code examples:

                                                                      Invoke the method:

                                                                      grid.option( {disabled: true} );


                                                                      pageData()Returns: Array

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


                                                                        pager()

                                                                        Returns the widget instance of pager.

                                                                          Code examples:

                                                                          Invoke the method:

                                                                           var pager = grid.pager( );


                                                                          paste()

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


                                                                            Pic( )

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


                                                                              quitEditMode()

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

                                                                                Code examples:

                                                                                Invoke the method:

                                                                                //quit editing of cell
                                                                                grid.quitEditMode( );


                                                                                Range()

                                                                                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.

                                                                                MethodParameters Returned TypeDescription
                                                                                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 render is true. This option has higher precedence than copyModel.render but lower than column.exportRender option

                                                                                (v7.3.0) header cells are included in copied data when header is true. This option has higher precedence than copyModel.header

                                                                                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]
                                                                                

                                                                                • range
                                                                                  Type: string
                                                                                  (v8.2.0) range in spreadsheet format i.e., "A4:D10"
                                                                                • r1
                                                                                  Type: Integer
                                                                                  rowIndx of first row
                                                                                • c1
                                                                                  Type: Integer
                                                                                  colIndx of first column
                                                                                • r2
                                                                                  Type: Integer
                                                                                  rowIndx of last row
                                                                                • c2
                                                                                  Type: Integer
                                                                                  colIndx of last column
                                                                                • rc
                                                                                  Type: Integer
                                                                                  number of rows in the range
                                                                                • cc
                                                                                  Type: Integer
                                                                                  number of columns in the range

                                                                                Code examples:

                                                                                Invoke the method:

                                                                                range.align( "center" )


                                                                                refresh( { header} )

                                                                                It's used to refresh the whole view of grid after update of records, addition of classes, attributes through JSON or other properties that affect the rows in current page or layout of grid e.g., height, width, etc.

                                                                                Being a computational intensive operation, if a number of such options / properties of the grid are being updated, this method should be called only once at the end.

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

                                                                                Code examples:

                                                                                Invoke the method:

                                                                                grid.refresh( );


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

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

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

                                                                                Code examples:

                                                                                Invoke the method:

                                                                                grid.refreshCell( { rowIndx: 21, dataIndx: 'company' } );


                                                                                refreshCM( colModel )

                                                                                Refreshes colModel in pqGrid.

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

                                                                                Code examples:

                                                                                Invoke the method:

                                                                                grid.refreshCM( );


                                                                                refreshColumn( { colIndx, dataIndx } )

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

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

                                                                                Code examples:

                                                                                Invoke the method:

                                                                                grid.refreshColumn( {colIndx:2} );


                                                                                refreshDataAndView()

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

                                                                                  Code examples:

                                                                                  Invoke the method:

                                                                                  grid.refreshDataAndView( );


                                                                                  refreshHeader()

                                                                                  Refreshes the column headers.

                                                                                    Code examples:

                                                                                    Invoke the method:

                                                                                    grid.refreshHeader( );


                                                                                    refreshHeaderFilter({ colIndx, dataIndx })

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

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

                                                                                    Code examples:

                                                                                    Invoke the method:

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


                                                                                    refreshRow( { rowIndx, rowIndxPage } )

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

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

                                                                                    Code examples:

                                                                                    Invoke the method:

                                                                                    grid.refreshRow( {rowIndx:21} );


                                                                                    refreshSummary()

                                                                                    (v8.4.0) Refresh summary view.

                                                                                      Code examples:

                                                                                      Invoke the method:

                                                                                      grid.refreshSummary( );


                                                                                      refreshToolbar()

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

                                                                                        Code examples:

                                                                                        Invoke the method:

                                                                                        grid.refreshToolbar( );


                                                                                        refreshView()

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

                                                                                          Code examples:

                                                                                          Invoke the method:

                                                                                          grid.refreshView( );


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

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

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

                                                                                          Code examples:

                                                                                          Invoke the method:

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


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

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

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

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


                                                                                          removeClassHead( { ri, colIndx } )

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

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

                                                                                          Code examples:

                                                                                          Invoke the method:

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


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

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

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

                                                                                          Code examples:

                                                                                          Invoke the method:

                                                                                          //Remove data with key 'name' from 3rd row.
                                                                                          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'}
                                                                                          );


                                                                                          reset( { filter, group, sort } )

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

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

                                                                                          Code examples:

                                                                                          Invoke the method:

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


                                                                                          rollback({ type })

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

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

                                                                                          Code examples:

                                                                                          Invoke the method:

                                                                                          //rollback all add, update and delete operations.
                                                                                          grid.rollback( );
                                                                                          
                                                                                          //rollback delete operations only.
                                                                                          grid.rollback( {type: 'delete'} );
                                                                                          


                                                                                          rowCollapse( { rowIndx, rowIndxPage } )

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

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

                                                                                          Code examples:

                                                                                          Invoke the method:

                                                                                          grid.rowCollapse( {rowIndx:21} );


                                                                                          rowExpand( { rowIndx, rowIndxPage } )

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

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

                                                                                          Code examples:

                                                                                          Invoke the method:

                                                                                          grid.rowExpand( {rowIndx:21} );


                                                                                          rowInvalidate( { rowIndx, rowIndxPage } )

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

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

                                                                                          Code examples:

                                                                                          Invoke the method:

                                                                                          grid.rowInvalidate( {rowIndx:21} );


                                                                                          saveEditCell()Returns: Boolean

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

                                                                                            Code examples:

                                                                                            Invoke the method:

                                                                                            //saves the edited cell
                                                                                            var success = grid.saveEditCell( );


                                                                                            saveState( { extra, save, stringify } )Returns: String

                                                                                            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

                                                                                            • extra
                                                                                              Type: PlainObject
                                                                                              optional parameter to add extra data along with the state.
                                                                                            • save
                                                                                              Type: Boolean
                                                                                              optional parameter with default value of true. State is not saved in local storage if this is false.
                                                                                            • stringify
                                                                                              Type: Boolean
                                                                                              optional parameter with default value of true. State is neither converted to a string nor saved in local storage if this is false.

                                                                                            Code examples:

                                                                                            Invoke the method:

                                                                                            //save the current state of grid.
                                                                                            var state = grid.saveState( );


                                                                                            scrollCell( { rowIndx, rowIndxPage, colIndx, dataIndx }, fn? )

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

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

                                                                                            Code examples:

                                                                                            Invoke the method:

                                                                                            grid.scrollCell( { rowIndx: 2, dataIndx: "lastname" } );


                                                                                            scrollColumn( { colIndx, dataIndx }, fn? )

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

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

                                                                                            Code examples:

                                                                                            Invoke the method:

                                                                                            grid.scrollColumn( { dataIndx: "lastname" } );


                                                                                            scrollRow( { rowIndxPage }, fn? )

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

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

                                                                                            Code examples:

                                                                                            Invoke the method:

                                                                                            grid.scrollRow( { rowIndxPage: 30 } );


                                                                                            scrollX( x?, fn? )Returns: Integer

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


                                                                                            scrollXY( x, y, fn? )

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


                                                                                            scrollY( y?, fn? )Returns: Integer

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


                                                                                            search( { row, first } )Returns: Array

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

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

                                                                                            Code examples:

                                                                                            Invoke the method:

                                                                                            //search row with id: 5
                                                                                            var rowList = grid.search( {
                                                                                                row: { id : 5 }
                                                                                            });
                                                                                            var rowIndx = rowList.rowIndx;
                                                                                            


                                                                                            Selection()

                                                                                            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.

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


                                                                                              SelectRow()

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


                                                                                                setData( data: Object[ ] )

                                                                                                Sets new data in pqGrid.

                                                                                                • data
                                                                                                  Type: Array
                                                                                                  Array of plain objects.

                                                                                                Code examples:

                                                                                                Invoke the method:

                                                                                                grid.setData( [ ] );


                                                                                                setSelection( { rowIndx, rowIndxPage, colIndx, focus}, fn? )

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

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

                                                                                                Code examples:

                                                                                                Invoke the method:

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


                                                                                                showLoading()

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


                                                                                                  sort( { single, sorter } )

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

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

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

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

                                                                                                  Code examples:

                                                                                                  Invoke the method:

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


                                                                                                  Tab( methodName?: string, ...methodArgs: any[] )

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



                                                                                                    toggle()

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

                                                                                                      Code examples:

                                                                                                      Invoke the method:

                                                                                                      grid.toggle( );


                                                                                                      toolbar( selector )Returns: jQuery

                                                                                                      Returns the toolbar DOM node or find element / elements in the toolbar ( when selector is passed ) wrapped in jQuery object.

                                                                                                      • selector
                                                                                                        Type: string
                                                                                                        (v9.0.0) Optional parameter, selector of an element in the toolbar.

                                                                                                      Code examples:

                                                                                                      Invoke the method:

                                                                                                       var $toolbar = grid.toolbar( );


                                                                                                      ToolPanel()

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


                                                                                                        Tree()

                                                                                                        Returns treegrid instance. Also see treeModel options.

                                                                                                            var Tree = grid.Tree();
                                                                                                        

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

                                                                                                        1. pq_level: Level of the node beginning from root level nodes having pq_level = 0.
                                                                                                        2. pq_close: collapsed/expanded state of a parent node expressed as truthy/falsey values.
                                                                                                        Any node which contains non null value of pq_close or children property is considered a parent node.

                                                                                                        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. beforeTreeExpand and treeExpand events are fired during the process.

                                                                                                            //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. beforeTreeExpand and treeExpand events are fired during the process.

                                                                                                            //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. beforeTreeExpand and treeExpand events are fired during the process.

                                                                                                            //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

                                                                                                        moveNode event is fired at end of the process.

                                                                                                        (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 treeModel.historyMove option.

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


                                                                                                          unfreezePanes

                                                                                                          (v9.0.0) This method removes any frozen panes.

                                                                                                            Code examples:

                                                                                                            Invoke the method:

                                                                                                            grid.unfreezePanes();


                                                                                                            updateRow( { rowIndx, newRow, rowList, track, source, history, checkEditable, refresh } )

                                                                                                            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:

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

                                                                                                            • rowIndx
                                                                                                              Type: Integer
                                                                                                              Zero based index of the row.
                                                                                                            • newRow
                                                                                                              Type: Object
                                                                                                              Object holding the modified data of the row.
                                                                                                            • rowList
                                                                                                              Type: Array
                                                                                                              Array of objects {rowIndx: rowIndx, newRow: newRow}.
                                                                                                            • track
                                                                                                              Type: Boolean
                                                                                                              Optional parameter with default value of trackModel.on.
                                                                                                            • source
                                                                                                              Type: String
                                                                                                              Optional parameter with default value of 'update'.
                                                                                                            • history
                                                                                                              Type: Boolean
                                                                                                              Optional parameter with default value of historyModel.on.
                                                                                                            • checkEditable
                                                                                                              Type: Boolean
                                                                                                              Optional parameter with default value of true.
                                                                                                            • refresh
                                                                                                              Type: Boolean
                                                                                                              Optional parameter with default value of true.

                                                                                                            Code examples:

                                                                                                            Invoke the method:

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


                                                                                                            widget()Returns: jQuery

                                                                                                            Returns a jQuery object containing the pqGrid.

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              var widget = grid.widget( );

                                                                                                              Events
                                                                                                              autoRowHeight( event, ui )Type: pqGrid:autoRowHeight

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


                                                                                                              beforeCellClick( event, ui )Type: pqGrid:beforeCellClick

                                                                                                              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.

                                                                                                              • 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 in colModel.

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

                                                                                                              beforeCellKeyDown( event, ui )Type: pqGrid:beforeCellKeyDown

                                                                                                              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.

                                                                                                              • 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 in colModel.

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

                                                                                                              beforeCheck( event, ui )Type: pqGrid:beforeCheck

                                                                                                              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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • check
                                                                                                                  Type: Boolean
                                                                                                                  state of the checkbox.
                                                                                                                • dataIndx
                                                                                                                  Type: Integer or String
                                                                                                                  Zero based index in array or key name in JSON.
                                                                                                                • rows
                                                                                                                  Type: Array
                                                                                                                  Collection of row objects having rowIndx, rowData.

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

                                                                                                              beforeColAdd( event, ui )Type: pqGrid:beforeColAdd

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

                                                                                                              beforeColMove( event, ui )Type: pqGrid:beforeColMove

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

                                                                                                              beforeColRemove( event, ui )Type: pqGrid:beforeColRemove

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

                                                                                                              beforeColumnCollapse( event, ui )Type: pqGrid:beforeColumnCollapse

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

                                                                                                              beforeCopy( event, ui )Type: pqGrid:beforeCopy

                                                                                                              (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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • areas
                                                                                                                  Type: array
                                                                                                                  Array of address objects having r1, r2, c1, c2 properties.

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

                                                                                                              beforeExport( event, ui )Type: pqGrid:beforeExport

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


                                                                                                              beforeFillHandle( event, ui )Type: pqGrid:beforeFillHandle

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


                                                                                                              beforeFilter( event, ui )Type: pqGrid:beforeFilter

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


                                                                                                              beforeGroupExpand( event, ui )Type: pqGrid:beforeGroupExpand

                                                                                                              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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • close
                                                                                                                  Type: Boolean
                                                                                                                  collapsed state.
                                                                                                                • all
                                                                                                                  Type: Boolean
                                                                                                                  true when all group levels are affected, undefined otherwise.
                                                                                                                • level
                                                                                                                  Type: Integer
                                                                                                                  grouping level.
                                                                                                                • group
                                                                                                                  Type: String
                                                                                                                  grouping title when a single cell is affected, undefined otherwise.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the beforeGroupExpand callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  beforeGroupExpand: function( event, ui ) {}
                                                                                                              });


                                                                                                              beforeHeadKeyDown( event, ui )Type: pqGrid:beforeHeadKeyDown

                                                                                                              (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.

                                                                                                              keyDefault 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 + ENTEROpen popup menu attached to the cell
                                                                                                              SPACEToggles the checkbox state in cell
                                                                                                              LEFTMoves focus to left cell, stops at the edge
                                                                                                              RIGHTMoves focus to right cell, stops at the edge
                                                                                                              TABMoves 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 + TABMoves 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 ) {}
                                                                                                              });


                                                                                                              beforeHideCols( event, ui )Type: pqGrid:beforeHideCols

                                                                                                              Triggered before columns are hidden or displayed via header menu or API (new in v5.2.0).

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • diHide
                                                                                                                  Type: Array
                                                                                                                  Array of dataIndx of columns being hidden.
                                                                                                                • diShow
                                                                                                                  Type: Array
                                                                                                                  Array of dataIndx of columns being displayed.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the beforeHideCols callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  beforeHideCols: function( event, ui ) {}
                                                                                                              });


                                                                                                              beforeNewData( event, ui )Type: pqGrid:beforeNewData

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


                                                                                                              beforePaste( event, ui )Type: pqGrid:beforePaste

                                                                                                              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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • areas
                                                                                                                  Type: Array
                                                                                                                  rectangular regions affected by paste.
                                                                                                                • rows
                                                                                                                  Type: Array
                                                                                                                  Array of rows being pasted.

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


                                                                                                              beforeRowExpand( event, ui )Type: pqGrid:beforeRowExpand

                                                                                                              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

                                                                                                              • 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.
                                                                                                                • close
                                                                                                                  Type: Boolean
                                                                                                                  True when row is collapsed ( new in 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 ) {} );

                                                                                                              beforeRowSelect( event, ui )Type: pqGrid:beforeRowSelect

                                                                                                              Triggered before rows are selected or unselected. It's cancelled when false is returned.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • addList
                                                                                                                  Type: Array
                                                                                                                  Array of selected rows { rowIndx: rowIndx, rowData: rowData }
                                                                                                                • deleteList
                                                                                                                  Type: Array
                                                                                                                  Array of unselected rows { rowIndx: rowIndx, rowData: rowData }

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

                                                                                                              beforeSort( event, ui )Type: pqGrid:beforeSort

                                                                                                              Triggered before data is sorted. Sorting can be canceled by returning false. See sortModel option for description of various ui properties.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • dataIndx
                                                                                                                  Type: Integer or String
                                                                                                                  Zero based index in array or key name in JSON.
                                                                                                                • single
                                                                                                                  Type: Boolean
                                                                                                                  multiple column sorting when false. Available since v3.0.0
                                                                                                                • oldSorter
                                                                                                                  Type: Array
                                                                                                                  An array of objects having dataIndx and dir providing previous sorting information. Available since v3.0.0
                                                                                                                • sorter
                                                                                                                  Type: Array
                                                                                                                  An array of objects having dataIndx and dir. Available since v3.0.0

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

                                                                                                              beforeTableView( event, ui )Type: pqGrid:beforeTableView

                                                                                                              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 new rendered row in the unfrozen viewport.
                                                                                                                • finalV
                                                                                                                  Type: Integer
                                                                                                                  Index of last new rendered row in the unfrozen viewport.
                                                                                                                • initH
                                                                                                                  Type: Integer
                                                                                                                  Index of first new rendered column in the unfrozen viewport.
                                                                                                                • finalH
                                                                                                                  Type: Integer
                                                                                                                  Index of last new rendered column in the unfrozen viewport.

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

                                                                                                              beforeTreeExpand( event, ui )Type: pqGrid:beforeTreeExpand

                                                                                                              Triggered before tree nodes are either collapsed or expanded. It can be canceled by returning false.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • nodes
                                                                                                                  Type: Array
                                                                                                                  Array of rows (rowData) being affected.
                                                                                                                • close
                                                                                                                  Type: Boolean
                                                                                                                  true when collapse and false when expand.

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

                                                                                                              beforeValidate( event, ui )Type: pqGrid:beforeValidate

                                                                                                              Triggered before change in grid data takes place due to:

                                                                                                              • inline editing a cell
                                                                                                              • add, update, delete rows
                                                                                                              • paste of rows/cells, undo, redo
                                                                                                              Checks for editability of row/cell and validations take place between beforeValidate and change events. All ui arguments are passed by reference so any modification to the arguments affects subsequent data processing by the grid.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the beforeValidate callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  beforeValidate: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:beforeValidate event:

                                                                                                              grid.on( "beforeValidate", function( event, ui ) {} );

                                                                                                              blur( event, ui )Type: pqGrid:blur

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


                                                                                                              blurHead( event, ui )Type: pqGrid:blurHead

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


                                                                                                              cellBeforeSave( event, ui )Type: pqGrid:cellBeforeSave

                                                                                                              Triggered before a cell is saved in pqGrid during inline editing. Saving of data can be canceled by returning false.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the cellBeforeSave callback specified:

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

                                                                                                              cellClick( event, ui )Type: pqGrid:cellClick

                                                                                                              Triggered when a cell is clicked in pqGrid.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the cellClick callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  cellClick: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:cellClick event:

                                                                                                              grid.on( "cellClick", function( event, ui ) {} );

                                                                                                              cellDblClick( event, ui )Type: pqGrid:cellDblClick

                                                                                                              Triggered when a cell is double clicked in pqGrid.

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

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

                                                                                                              cellKeyDown( event, ui )Type: pqGrid:cellKeyDown

                                                                                                              Triggered when a key is pressed in a selected cell. In case of multiple cell selection, the last selected cell receives the keys input.

                                                                                                              • 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 in colModel.

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

                                                                                                              cellRightClick( event, ui )Type: pqGrid:cellRightClick

                                                                                                              (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.

                                                                                                              • 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 in colModel, is -1 in case of number cell.
                                                                                                                • dataIndx
                                                                                                                  Type: Integer or String
                                                                                                                  Zero based index in array or key name in JSON.
                                                                                                                • $td
                                                                                                                  Type: jQuery
                                                                                                                  jQuery wrapper on 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 ) {} );

                                                                                                              cellSave( event, ui )Type: pqGrid:cellSave

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

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the cellSave callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  cellSave: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:cellSave event:

                                                                                                              grid.on( "cellSave", function( event, ui ) {} );

                                                                                                              change( event, ui )Type: pqGrid:change

                                                                                                              Triggered after change in grid data takes place due to:

                                                                                                              • inline editing a cell
                                                                                                              • add, update, delete rows
                                                                                                              • paste of rows/cells, undo, redo
                                                                                                              Checks for editability of row/cell and validations take place between 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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • addList
                                                                                                                  Type: Array
                                                                                                                  Array of added rows { rowIndx: rowIndx, newRow: newRow, rowData: rowData }; newRow and rowData are same.
                                                                                                                • updateList
                                                                                                                  Type: Array
                                                                                                                  Array of updated rows { rowIndx: rowIndx, rowData: rowData, newRow: newRow, oldRow: oldRow }
                                                                                                                • deleteList
                                                                                                                  Type: Array
                                                                                                                  Array of deleted rows { rowIndx: rowIndx, rowData: rowData }
                                                                                                                • source
                                                                                                                  Type: String
                                                                                                                  origin of the change e.g., 'edit', 'update', 'add' , 'delete', 'paste', 'undo', 'redo' or a custom source passed to addRow, updateRow, deleteRow methods.
                                                                                                                • allowInvalid
                                                                                                                  Type: Boolean
                                                                                                                  Allows invalid value and adds an invalid class to the cell/cells.
                                                                                                                • history
                                                                                                                  Type: Boolean
                                                                                                                  Whether add this operation in history.
                                                                                                                • checkEditable
                                                                                                                  Type: Boolean
                                                                                                                  Checks whether the row/cell is editable before making any change.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the change callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  change: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:change event:

                                                                                                              grid.on( "change", function( event, ui ) {} );

                                                                                                              check( event, ui )Type: pqGrid:check

                                                                                                              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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • check
                                                                                                                  Type: Boolean
                                                                                                                  state of the checkbox.
                                                                                                                • dataIndx
                                                                                                                  Type: Integer or String
                                                                                                                  Zero based index in array or key name in JSON.
                                                                                                                • getCascadeList
                                                                                                                  Type: function
                                                                                                                  function to retrieve complete collection of affected rows.
                                                                                                                • rows
                                                                                                                  Type: Array
                                                                                                                  Collection of row objects having rowIndx, rowData.

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

                                                                                                              colAdd( event, ui )Type: pqGrid:colAdd

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

                                                                                                              colMove( event, ui )Type: pqGrid:colMove

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

                                                                                                              colRemove( event, ui )Type: pqGrid:colRemove

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

                                                                                                              columnCollapse( event, ui )Type: pqGrid:columnCollapse

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

                                                                                                              columnDrag( event, ui )Type: pqGrid:columnDrag

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

                                                                                                              columnOrder( event, ui )Type: pqGrid:columnOrder

                                                                                                              Triggered when any column is reordered by drag and drop.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • dataIndx
                                                                                                                  Type: Integer or String
                                                                                                                  Zero based index in array or key name in JSON.
                                                                                                                • oldcolIndx
                                                                                                                  Type: Integer
                                                                                                                  Old zero based index of the column.
                                                                                                                • colIndx
                                                                                                                  Type: Integer
                                                                                                                  New zero based index of the column.

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

                                                                                                              columnResize( event, ui )Type: pqGrid:columnResize

                                                                                                              Triggered when a column is resized.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the columnResize callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  columnResize: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:columnResize event:

                                                                                                              grid.on( "columnResize", function( event, ui ) {} );

                                                                                                              complete( event, ui )Type: pqGrid:complete

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


                                                                                                              context( event, ui )Type: pqGrid:context

                                                                                                              (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.

                                                                                                              • 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 in colModel, is -1 in case of number cell
                                                                                                                • dataIndx
                                                                                                                  Type: Integer or String
                                                                                                                  Zero based index in array or key name in JSON
                                                                                                                • ele
                                                                                                                  Type: Element
                                                                                                                  body cell, head cell, image or number cell DOM node
                                                                                                                • filterRow
                                                                                                                  Type: Boolean
                                                                                                                  true when contextmenu is on filter row cell
                                                                                                                • type
                                                                                                                  Type: String
                                                                                                                  'cell' for body cell, 'head' for header cell, 'img' for image or 'num' for 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 ) {} );

                                                                                                              copy( event, ui )Type: pqGrid:copy

                                                                                                              (v8.4.0) Triggered after a range of cells are copied from grid.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • areas
                                                                                                                  Type: array
                                                                                                                  Array of address objects having r1, r2, c1, c2 properties.

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

                                                                                                              create( event, ui )Type: pqGrid:create

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

                                                                                                              dataReady( event, ui )Type: pqGrid:dataReady

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


                                                                                                              editorBegin( event, ui )Type: pqGrid:editorBegin

                                                                                                              Triggered when editor is created.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the editorBegin callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  editorBegin: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:editorBegin event:

                                                                                                              grid.on( "editorBegin", function( event, ui ) {} );

                                                                                                              editorBlur( event, ui )Type: pqGrid:editorBlur

                                                                                                              Triggered when editor is blurred.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the editorBlur callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  editorBlur: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:editorBlur event:

                                                                                                              grid.on( "editorBlur", function( event, ui ) {} );

                                                                                                              editorEnd( event, ui )Type: pqGrid:editorEnd

                                                                                                              Triggered when editor is about to be destroyed.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the editorEnd callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  editorEnd: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:editorEnd event:

                                                                                                              grid.on( "editorEnd", function( event, ui ) {} );

                                                                                                              editorFocus( event, ui )Type: pqGrid:editorFocus

                                                                                                              Triggered when editor is focused.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the editorFocus callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  editorFocus: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:editorFocus event:

                                                                                                              grid.on( "editorFocus", function( event, ui ) {} );

                                                                                                              editorKeyDown( event, ui )Type: pqGrid:editorKeyDown

                                                                                                              Triggered when a key is input in an editor. Default behaviour of the keys in editor can be prevented by returning false in this event. editorKeyPress and editorKeyUp are fired after this event.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the editorKeyDown callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  editorKeyDown: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:editorKeyDown event:

                                                                                                              grid.on( "editorKeyDown", function( event, ui ) {} );

                                                                                                              editorKeyPress( event, ui )Type: pqGrid:editorKeyPress

                                                                                                              Triggered when a key is pressed in an editor. This event is fired after editorKeyDown event.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the editorKeyPress callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  editorKeyPress: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:editorKeyPress event:

                                                                                                              grid.on( "editorKeyPress", function( event, ui ) {} );

                                                                                                              editorKeyUp( event, ui )Type: pqGrid:editorKeyUp

                                                                                                              Triggered when a key is released after input in an editor.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the editorKeyUp callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  editorKeyUp: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:editorKeyUp event:

                                                                                                              grid.on( "editorKeyUp", function( event, ui ) {} );

                                                                                                              exportData( event, ui )Type: pqGrid:exportData

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


                                                                                                              filter( event, ui )Type: pqGrid:filter

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


                                                                                                              focus( event, ui )Type: pqGrid:focus

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


                                                                                                              focusHead( event, ui )Type: pqGrid:focusHead

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


                                                                                                              group( event, ui )Type: pqGrid:group

                                                                                                              Triggered when a grouped cell, whole level or all levels are expanded/collapsed.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • close
                                                                                                                  Type: Boolean
                                                                                                                  collapsed state.
                                                                                                                • all
                                                                                                                  Type: Boolean
                                                                                                                  true when all group levels are affected, undefined otherwise.
                                                                                                                • level
                                                                                                                  Type: Integer
                                                                                                                  grouping level.
                                                                                                                • group
                                                                                                                  Type: String
                                                                                                                  grouping title when a single cell is affected, undefined otherwise.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the group callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  group: function( event, ui ) {}
                                                                                                              });


                                                                                                              groupChange( event, ui )Type: pqGrid:groupChange

                                                                                                              (v3.3.5) This event is triggered when

                                                                                                              • new grouping level is added
                                                                                                              • an existing level is removed.
                                                                                                              • re-order of existing levels takes place.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the groupChange callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  groupChange: function( event, ui ) {}
                                                                                                              });


                                                                                                              groupData( event, ui )Type: pqGrid:groupData

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


                                                                                                              groupHideRows( event, ui )Type: pqGrid:groupHideRows

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


                                                                                                              groupOption( event, ui )Type: pqGrid:groupOption

                                                                                                              (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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • oldGM
                                                                                                                  Type: Object
                                                                                                                  shallow copy of previous groupModel before current change in group options.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the groupOption callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  groupOption: function( event, ui ) {}
                                                                                                              });


                                                                                                              headerCellClick( event, ui )Type: pqGrid:headerCellClick

                                                                                                              Triggered when a header cell is clicked.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • dataIndx
                                                                                                                  Type: Integer or String
                                                                                                                  Zero based index in array or key name in JSON.
                                                                                                                • column
                                                                                                                  Type: Object
                                                                                                                  Object containing properties of this column.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the headerCellClick callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  headerCellClick: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:headerCellClick event:

                                                                                                              grid.on( "headerCellClick", function( event, ui ) {} );

                                                                                                              headRightClick( event, ui )Type: pqGrid:headRightClick

                                                                                                              (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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • colIndx
                                                                                                                  Type: Integer
                                                                                                                  Zero based index of the column.
                                                                                                                • column
                                                                                                                  Type: Object
                                                                                                                  Object containing properties of this column.
                                                                                                                • filterRow
                                                                                                                  Type: Boolean
                                                                                                                  true when contextmenu is on filter row cell
                                                                                                                • $th
                                                                                                                  Type: jQuery
                                                                                                                  jQuery wrapper on header cell.

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

                                                                                                              hideCols( event, ui )Type: pqGrid:hideCols

                                                                                                              Triggered after columns are hidden or displayed via header menu or API (new in v5.2.0).

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • diHide
                                                                                                                  Type: Array
                                                                                                                  Array of dataIndx of columns being hidden.
                                                                                                                • diShow
                                                                                                                  Type: Array
                                                                                                                  Array of dataIndx of columns being displayed.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the hideCols callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  hideCols: function( event, ui ) {}
                                                                                                              });


                                                                                                              history( event, ui )Type: pqGrid:history

                                                                                                              Triggered whenever

                                                                                                              • type = add A reversible operation i.e., add/update/delete is done in the grid. It may be a single operation e.g., while inline editing of a cell, add/update/delete of a row by method invocation or a combination of operations e.g., paste of multiple cells/rows.
                                                                                                              • canUndo = true, false There is a change of state from ability to perform and not perform undo operation.
                                                                                                              • canRedo = true, false There is a change of state from ability to perform and not perform redo operation.
                                                                                                              • type = undo, redo Undo (by Ctrl-Z or method invocation) or redo (by Ctrl-Y or method invocation) is performed.
                                                                                                              • type = reset, resetUndo

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • canUndo
                                                                                                                  Type: Boolean
                                                                                                                  Whether undo can be performed.
                                                                                                                • canRedo
                                                                                                                  Type: Boolean
                                                                                                                  Whether redo can be performed.
                                                                                                                • type
                                                                                                                  Type: String
                                                                                                                  'add', 'undo', 'redo', 'reset', 'resetUndo'.
                                                                                                                • num_undo
                                                                                                                  Type: Integer
                                                                                                                  Number of possible undo.
                                                                                                                • num_redo
                                                                                                                  Type: Integer
                                                                                                                  Number of possible redo.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the history callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  history: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:history event:

                                                                                                              grid.on( "history", function( event, ui ) {} );

                                                                                                              lazyInit( event, ui )Type: pqGrid:lazyInit

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

                                                                                                              lazyProgress( event, ui )Type: pqGrid:lazyProgress

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

                                                                                                              lazyComplete( event, ui )Type: pqGrid:lazyComplete

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

                                                                                                              load( event, ui )Type: pqGrid:load

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

                                                                                                              moveNode( event, ui )Type: pqGrid:moveNode

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

                                                                                                              paste( event, ui )Type: pqGrid:paste

                                                                                                              Triggered after data is pasted in the grid

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • areas
                                                                                                                  Type: Array
                                                                                                                  rectangular regions affected by paste.
                                                                                                                • rows
                                                                                                                  Type: Array
                                                                                                                  Array of pasted rows.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the paste callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                          paste: function( event, ui ) {}
                                                                                                                      });
                                                                                                                      


                                                                                                              pivotCM( event, ui )Type: pqGrid:pivotCM

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

                                                                                                              refresh( event, ui )Type: pqGrid:refresh

                                                                                                              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.
                                                                                                                • source
                                                                                                                  Type: String
                                                                                                                  Custom string passed to refresh. Added in 3.0.0

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

                                                                                                              refreshHeader( event, ui )Type: pqGrid:refreshHeader

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

                                                                                                              refreshRow( event, ui )Type: pqGrid:refreshRow

                                                                                                              Triggered whenever a row is refreshed via call to refreshRow method.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the refreshRow callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  refreshRow: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:refreshRow event:

                                                                                                              grid.on( "refreshRow", function( event, ui ) {} );

                                                                                                              render( event, ui )Type: pqGrid:render

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

                                                                                                              rowClick( event, ui )Type: pqGrid:rowClick

                                                                                                              Triggered when a row is clicked in pqGrid. It occurs after cellClick event.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • rowData
                                                                                                                  Type: Object
                                                                                                                  Reference to 1-dimensional array or object representing row data.
                                                                                                                • $tr
                                                                                                                  Type: jQuery
                                                                                                                  jQuery wrapper on the row.
                                                                                                                • rowIndx
                                                                                                                  Type: Integer
                                                                                                                  Zero based index of the row.
                                                                                                                • rowIndxPage
                                                                                                                  Type: Integer
                                                                                                                  Zero based index of the row on current page.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the rowClick callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  rowClick: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:rowClick event:

                                                                                                              grid.on( "rowClick", function( event, ui ) {} );

                                                                                                              rowDblClick( event, ui )Type: pqGrid:rowDblClick

                                                                                                              Triggered when a row is double clicked in pqGrid. It occurs after cellDblClick event.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • rowData
                                                                                                                  Type: Object
                                                                                                                  Reference to 1-dimensional array or object representing row data.
                                                                                                                • $tr
                                                                                                                  Type: jQuery
                                                                                                                  jQuery wrapper on the row.
                                                                                                                • rowIndx
                                                                                                                  Type: Integer
                                                                                                                  Zero based index of the row.
                                                                                                                • rowIndxPage
                                                                                                                  Type: Integer
                                                                                                                  Zero based index of the row on current page.

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the rowDblClick callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  rowDblClick: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:rowDblClick event:

                                                                                                              grid.on( "rowDblClick", function( event, ui ) {} );

                                                                                                              rowRightClick( event, ui )Type: pqGrid:rowRightClick

                                                                                                              (v7.2.0) Removed. Please use context event instead of this.

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

                                                                                                              Code examples:

                                                                                                              Initialize the pqGrid with the rowRightClick callback specified:

                                                                                                              pq.grid( selector,{
                                                                                                                  rowRightClick: function( event, ui ) {}
                                                                                                              });

                                                                                                              Bind an event listener to the pqGrid:rowRightClick event:

                                                                                                              grid.on( "rowRightClick", function( event, ui ) {} );

                                                                                                              rowSelect( event, ui )Type: pqGrid:rowSelect

                                                                                                              Triggered when rows have been selected or unselected in pqGrid.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • addList
                                                                                                                  Type: Array
                                                                                                                  Array of selected rows { rowIndx: rowIndx, rowData: rowData }
                                                                                                                • deleteList
                                                                                                                  Type: Array
                                                                                                                  Array of unselected rows { rowIndx: rowIndx, rowData: rowData }

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

                                                                                                              scroll( event, ui )Type: pqGrid:scroll

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

                                                                                                              scrollStop( event, ui )Type: pqGrid:scrollStop

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

                                                                                                              selectChange( event, ui )Type: pqGrid:selectChange

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

                                                                                                              selectEnd( event, ui )Type: pqGrid:selectEnd

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

                                                                                                              skipExport( event, ui )Type: pqGrid:skipExport

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

                                                                                                              sort( event, ui )Type: pqGrid:sort

                                                                                                              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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • dataIndx
                                                                                                                  Type: Integer or String
                                                                                                                  Zero based index in array or key name in JSON.
                                                                                                                • single
                                                                                                                  Type: Boolean
                                                                                                                  multiple column sorting when false. Available since v3.0.0
                                                                                                                • oldSorter
                                                                                                                  Type: Array
                                                                                                                  An array of objects having dataIndx and dir providing previous sorting information. Available since v3.0.0
                                                                                                                • sorter
                                                                                                                  Type: Array
                                                                                                                  An array of objects having dataIndx and dir. Available since v3.0.0

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

                                                                                                              tabActivate( event, ui )Type: pqGrid:tabActivate

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

                                                                                                              tabsReady( event, ui )Type: pqGrid:tabsReady

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

                                                                                                              tabRename( event, ui )Type: pqGrid:tabRename

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

                                                                                                              toggle( event, ui )Type: pqGrid:toggle

                                                                                                              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.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • state
                                                                                                                  Type: String
                                                                                                                  'max' or 'min' where 'max' is maximized overlay state and 'min' is default state of grid.

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

                                                                                                              treeExpand( event, ui )Type: pqGrid:treeExpand

                                                                                                              Triggered when tree nodes are either collapsed or expanded.

                                                                                                              • event
                                                                                                                Type: Event
                                                                                                              • ui
                                                                                                                Type: Object
                                                                                                                • nodes
                                                                                                                  Type: Array
                                                                                                                  Array of rows (rowData) being affected.
                                                                                                                • close
                                                                                                                  Type: Boolean
                                                                                                                  true when collapse and false when expand.

                                                                                                              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 ) {} );
                                                                                                              Utility Methods
                                                                                                              aggregateReturns: Number

                                                                                                              aggregate is an object having following methods: Any null or undefined values are ignored by these formulas.

                                                                                                              1. avg(): Calculates average of the items in an array.
                                                                                                              2. count(): Counts number of items in an array.
                                                                                                              3. max(): Returns item with maximum value out of many items in an array.
                                                                                                              4. min(): Returns item with minimum value out of many items in an array.
                                                                                                              5. sum(): Calculates sum of the items in an array.
                                                                                                              6. stdev(): Calculates standard deviation based on sample.
                                                                                                              7. stdevp(): Calculates standard deviation based on entire population.

                                                                                                              aggregate object can be customized by adding a new method or overriding the existing methods with custom implementation.

                                                                                                              Every method receives the following parameters.

                                                                                                              • arr
                                                                                                                Type: Array
                                                                                                                Array of values to be aggregated.
                                                                                                              • col
                                                                                                                Type: Object
                                                                                                                current column
                                                                                                              • rows (v6.0.0)
                                                                                                                Type: Array
                                                                                                                Array of rows from which values are taken.
                                                                                                              • row (v8.1.0)
                                                                                                                Type: Object
                                                                                                                Current summary row having meta data pq_level and pq_grandsummary.

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


                                                                                                              deFormatNumber( val, format?, locale? )Returns: integer or Returns: float

                                                                                                              used to un format a formatted string into pure number.

                                                                                                              • val
                                                                                                                Type: string
                                                                                                                value to be deformatted.
                                                                                                              • format?
                                                                                                                Type: String
                                                                                                                format code which was used to format the number.
                                                                                                              • locale?
                                                                                                                Type: String
                                                                                                                (v10.0.0) Locale code e.g, 'en-US', 'en-IN', 'ar', 'de', 'ja', 'ko', 'zh' etc. Same format can return different results for different locales e.g, month names and weekday names.

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              var value = pq.deFormatNumber( "$1,679.45", "$#,###.00");
                                                                                                              //result is 1679.45
                                                                                                              


                                                                                                              exportCsv( head, body, obj )Returns: String

                                                                                                              (v9.0.0) Returns csv string from js object

                                                                                                              • head
                                                                                                                Type: Array
                                                                                                                Array of header rows
                                                                                                              • body
                                                                                                                Type: Array
                                                                                                                Array of body rows
                                                                                                              • obj
                                                                                                                Type: object
                                                                                                                Optional parameter to pass non-default separator and skipBOM properties

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              var jsobject = grid.exportData({format: 'js'});
                                                                                                              var csv = pq.exportCsv( jsobject.head, jsobject.body, {separator: ":", skipBOM: true } );
                                                                                                              


                                                                                                              exportHtm( head, body, obj )Returns: String

                                                                                                              (v9.0.0) Returns html string from js object

                                                                                                              • head
                                                                                                                Type: Array
                                                                                                                Array of header rows
                                                                                                              • body
                                                                                                                Type: Array
                                                                                                                Array of body rows
                                                                                                              • obj
                                                                                                                Type: object
                                                                                                                Object having grid, cssRules, cssTable properties.

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              var jsobject = grid.exportData({format: 'js'});
                                                                                                              var html = pq.exportHtm( jsobject.head, jsobject.body, { grid: grid } );
                                                                                                              


                                                                                                              exportPdf( head, body )Returns: object

                                                                                                              (v9.0.0) Returns documentation definition of table in pdfmake format from js object

                                                                                                              • head
                                                                                                                Type: Array
                                                                                                                Array of header rows
                                                                                                              • body
                                                                                                                Type: Array
                                                                                                                Array of body rows

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              var jsobject = grid.exportData({format: 'js'});
                                                                                                              var ddTable = pq.exportPdf( jsobject.head, jsobject.body );
                                                                                                              


                                                                                                              exportWb({ workbook, replace, type })Returns: String or Returns: Blob

                                                                                                              Returns xlsx file contents from json workbook

                                                                                                              • workbook
                                                                                                                Type: PlainObject
                                                                                                                workbook to be exported.
                                                                                                              • replace
                                                                                                                Type: Array
                                                                                                                see replace parameter of grid.exportData method.
                                                                                                              • type
                                                                                                                Type: String
                                                                                                                see type parameter of grid.exportData method

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              var xlsx = pq.excel.exportWb({
                                                                                                              	workbook: { sheets: [...] },
                                                                                                              	type: 'base64'
                                                                                                              });
                                                                                                              


                                                                                                              eachCell( collection: Array, fn: ((cell: gridT.worksheetCell) => void ) )

                                                                                                              Iterates through each cell in number of worksheets or rows and invokes callback function on them.

                                                                                                              • collection
                                                                                                                Type: Array
                                                                                                                Array of worksheets or rows.
                                                                                                              • fn
                                                                                                                Type: Function
                                                                                                                Callback function which receives each cell, colIndx, rowIndx and sheetIndx as argument.

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              pq.excel.eachCell(sheets, function( cell, ci, ri, si ){
                                                                                                              	//do something with each cell.
                                                                                                              });
                                                                                                              


                                                                                                              importXl({ file, content, separator, sheets, type, url }, fn: (wb: gridT.workbook) => void )

                                                                                                              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.

                                                                                                              • file
                                                                                                                Type: File
                                                                                                                File object from HTML5 file input control.
                                                                                                              • content
                                                                                                                Type: Blob
                                                                                                                Blob or base64 data of xlsx file.
                                                                                                              • separator
                                                                                                                Type: string
                                                                                                                (v8.2.0) Allows use of specific separator in case of csv file.
                                                                                                              • sheets
                                                                                                                Type: Array
                                                                                                                Array of indices(numbers) or names(strings) of sheets to be imported. If omitted, then all sheets are imported into the workbook.
                                                                                                              • type
                                                                                                                Type: String
                                                                                                                type of content used by jsZip
                                                                                                              • url
                                                                                                                Type: String
                                                                                                                remote url from where Excel file is to be imported

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


                                                                                                              formatDate( val, format, locale? )Returns: String

                                                                                                              (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

                                                                                                              • val
                                                                                                                Type: Date or Number or String
                                                                                                                ISO datetime string, Date object or serial date number ( since v10.1.0 ) based on a specific starting point known as the "Excel epoch." The default starting date is January 1, 1900, which is assigned the serial number 1. Each subsequent day is represented by an increasing integer value.
                                                                                                              • format
                                                                                                                Type: String
                                                                                                                combination of format codes as provided in the table above
                                                                                                              • locale?
                                                                                                                Type: String
                                                                                                                Locale code e.g, 'en-US', 'en-IN', 'ar', 'de', 'ja', 'ko', 'zh' etc. Same format can return different results for different locales e.g, month names and weekday names.

                                                                                                              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년
                                                                                                              


                                                                                                              formatNumber( val, format, locale? )Returns: String

                                                                                                              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.

                                                                                                              • val
                                                                                                                Type: Number
                                                                                                                value to be formatted.
                                                                                                              • format
                                                                                                                Type: String

                                                                                                                When creating a number format, you can specify up to four sections of code, separated by semicolons (;). These sections define the formats for:

                                                                                                                1. Positive numbers
                                                                                                                2. Negative numbers
                                                                                                                3. Zero values
                                                                                                                4. Text

                                                                                                                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.
                                                                                                              • locale?
                                                                                                                Type: String
                                                                                                                Locale code e.g, 'en-US', 'en-IN', 'ar', 'de', etc. Same format can return different result for different locales. e.g, some locales use "." as thousand separator and "," as decimal separator.

                                                                                                              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"
                                                                                                              


                                                                                                              getScripts( scripts, callback )Returns:

                                                                                                              (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.

                                                                                                              • scripts
                                                                                                                Type: Array
                                                                                                                Array of relative or absolute urls of the scripts to be loaded
                                                                                                              • callback
                                                                                                                Type: Function
                                                                                                                callback is called asynchronously when all the scripts have loaded.

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


                                                                                                              parseDate( val, fmt?, locale? )Returns: String

                                                                                                              (v10.0.0) Parses a formatted datetime and returns string in ISO datetime format.

                                                                                                              • val
                                                                                                                Type: String
                                                                                                                formatted datetime.
                                                                                                              • format?
                                                                                                                Type: String
                                                                                                                combination of format codes used to format the datetime
                                                                                                              • locale?
                                                                                                                Type: String
                                                                                                                Locale code e.g, 'en-US', 'en-IN', 'ar', 'de', 'ja', 'ko', 'zh' etc.

                                                                                                              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!'
                                                                                                              		


                                                                                                              postData( url, ajaxdata, ajaxoptions )Returns:

                                                                                                              (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.

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

                                                                                                              • url
                                                                                                                Type: string
                                                                                                                Relative or absolute url
                                                                                                              • ajaxdata
                                                                                                                Type: object
                                                                                                                Data to be posted to the server in key value format including exported data in plain string or base64 encoded format, filename, file extension and flag indicating base64 data
                                                                                                              • ajaxoptions
                                                                                                                Type: object
                                                                                                                optional parameter containing options passed to $.ajax function.

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


                                                                                                              saveAs( content, name )Returns: String

                                                                                                              (v9.0.0) Saves a file locally.

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              var data = grid.exportExcel({...});
                                                                                                              pq.saveAs( data, "pqgrid.xlsx");


                                                                                                              tableToArray( $table )Returns: PlainObject

                                                                                                              Generates a two dimensional array and colModel from a table DOM node and returns them as an Object { data: data, colModel: colModel }.

                                                                                                              • $table
                                                                                                                Type: jQuery
                                                                                                                jQuery wrapper on the table DOM node.

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              //get data and colModel from table.
                                                                                                              var obj = $.paramquery.tableToArray( tbl );
                                                                                                              var dataModel = { data: obj.data};
                                                                                                              var colModel = obj.colModel;


                                                                                                              toLetterReturns: string

                                                                                                              returns letter representation of numbers for use in Excel formulas e.g., "A" for 1, "B" for 2 and so on.

                                                                                                              • columnIndex
                                                                                                                Type: number
                                                                                                                index of column beginning from 1

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              var val = pq.toLetter( 5 );
                                                                                                              //returns "E"		
                                                                                                              


                                                                                                              xmlToArray( xmlDoc, obj )Returns: Array

                                                                                                              Generates a two dimensional array from XML Document.

                                                                                                              • xmlDoc
                                                                                                                Type: XMLDocument
                                                                                                                XML Document.
                                                                                                              • obj
                                                                                                                Type: PlainObject
                                                                                                                {itemParent: parentXMLNode, itemNames: [Array of node names] }. It assists the XML Parser by providing necessary XML nodes structural information.

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              //get data from XML.
                                                                                                              var obj = { itemParent: "book", itemNames: ["author", "title", "genre", "price", "publish_date", "description"] };
                                                                                                              var data = $.paramquery.xmlToArray(xmlDoc, obj);


                                                                                                              xmlToJson( xmlDoc, obj )Returns: Object

                                                                                                              Generates an array of objects having key/value pairs from XML Document.

                                                                                                              • xmlDoc
                                                                                                                Type: XMLDocument
                                                                                                                XML Document.
                                                                                                              • obj
                                                                                                                Type: PlainObject
                                                                                                                {itemParent: parentXMLNode, itemNames: [Array of node names] }. It assists the XML Parser by providing necessary XML nodes structural information.

                                                                                                              Code examples:

                                                                                                              Invoke the method:

                                                                                                              //get data from XML.
                                                                                                              var obj = { itemParent: "book", itemNames: ["author", "title", "genre", "price", "publish_date", "description"] };
                                                                                                              var data = $.paramquery.xmlToJson(xmlDoc, obj);