Version: 7.x

ParamQuery Grid Pro API Documentation for Version 7.x

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


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.

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

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 > clsHeadType: String
Default:
Class to be assigned to header cell only.

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: true
When set to false, this option prevents a column from being copied to the clipboard and excludes a column from exported data in case of non-grouped columns.

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, html string or null. Callback variant is used to create custom editors from scratch and receives an object argument containing the below ui properties. In v3.0.0, callback variant can also return 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.

Either type or init callback variant can be used to create custom controls but bit more work is required in case of type callback.

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.

Check column.copy option to include / exclude column as a whole in exported data.


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 that can be used to custom initialize a control i.e., jQueryUI datepicker, autocomplete or any other plugin. It was mostly used in older versions but it's rarely required since v5.2.0 as the grid takes care of initialization of controls. This callback needs to return true when it successfully initializes a control, otherwise pqGrid assumes responsibility to initialize a control. It receives ui as argument containing the below mentioned properties.
  • dataIndx
  • column
  • $cell: jQuery wrapper on the cell containing control(s).
  • $editor: jQuery wrapper on control(s).
listenerobject, function, string listener is an object, string, function or undefined used to bind event with control to call inbuilt or custom callback function upon firing of event. 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, change, click, etc or an inbuilt custom event timeout. timeout is useful for textbox, textarea. The callback is fired after number of microseconds ( specified in filterModel.timeout ) have elapsed since the last keyup or change event.

ui in callback is an object holding the following properties.

  • dataIndx
  • column
  • value: Current value in the control.
  • value2: Second value in the control. Applicable only for 'between' condition.

listener is optional since v5.2.0 and is not required in most cases.

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.

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 > formatType: String or Function
Default:

It describes the display format of the cell data in a column for numbers, currencies and dates using a string or a callback function.

Callback function is new 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 after converting the format string to Excel equivalent format string. Every effort is made to preserve dataType of column.

Few examples for numbers:

"#.000"
"#,###.0"
"$#,###.00"
"#.###,00€"

Few examples for dates: (uses jQueryUI format for dates) $.datepicker.formatDate( format, date )

"mm-dd-yy"
"dd-mm-yy"
"dd/mm/yy"

Code examples:

Initialize the pqGrid with column > format option specified.

var colM = [
    { dataIndx: 'revenue', dataType: "float", format: "¥#,###" },
    { dataIndx: "ShipDate", dataType: "date", format: "yy-mm-dd" },
    { 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
This option signifies the format of raw data ( value of cell data ) and is used to deformat the date values send as parameters during remote filtering. ( v5.3.0 ). If raw date format is dd/mm/yy, then there is no need to specify this option.

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.

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.

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 > 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 > renderHead( ui )Type: Function
Default:
(v7.0.0) A callback function to control rendering of header cell which works similar to column.render callback.

Code examples:

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

var colM = [
{
    dataIndx: "Region",
    renderHead: function( ui )
        //set title of header cell.
        return {
            text: "
" + ui.cellData + "
", style: "color:red;", attr: 'title="header cell"' }; } } ]


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 > 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: null
An array of objects where object is { type: type, value: value, msg: msg, warn: warn }, it determines the validation or warning rules for a column/cell. type can be minLen, maxLen, gt, gte, lt, lte, regexp, nonEmpty 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 should not be "", null or undefined, regexp is regular expression, callback function receives an object { column:column, value:value, rowData:rowData, msg:msg } where msg can be modified by callback function. msg is the message displayed in tooltip for validation or warning. warn = true turns the 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. In v2.4.0 one more type = neq has been added which stands for 'not equal to'.

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
Determines display of vertical borders of the columns.

columnTemplateType: Object
Default: undefined

It's convenient to use this option to define common column properties at a single place rather than repeating them in all columns in keeping with the principle of DRY (don't repeat yourself).

Any properties defined in this option are:
  1. deep cloned ( in case of nested properties ) and copied to all columns.
  2. Property is not copied when column contains defined value for that property, so they 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.

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.

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 only when dataModel.location is remote.
  • 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 either "remote" or "local". 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 by implementor using AJAX synchronous or asynchronous requests. When location is remote, grid takes care of sending and receiving the data from server on its own. In the later case, it's necessary to provide dataMode.url/dataModel.getUrl and dataModel.getData options.

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 only when dataModel.location is remote. 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 only when dataModel.location is remote. 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 > 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 only when dataModel.location is remote. 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.
initFunctionundefinedis a callback function which receives rowData as argument and has to return 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.
heightInteger180Constant default height of detail view. This sub-option added in v5.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;
    }
}});

Get or set the detailModel option, after initialization:

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

//setter
//safer to set individual sub-options.
grid.option( "detailModel.cache", false );

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 ){
    var rowIndx = ui.rowIndx;
    if ( $(this).pqGrid("hasClass", {rowIndx: rowIndx, cls: 'pq-delete' } ) ) {
        return false;
    }
    else {
        return true;
    }
});

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
selectBooleanselects text in a cell editor upon focus
styleStringadds css style to editor
typeString'textarea' sets the kind of editor out of 'contenteditable', 'textbox', 'textarea', 'select' or a callback function.

(v7.3.0) Default value is changed from 'textbox' to 'textarea'

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.
hideRowsboolean(v6.2.4) Filtering hides the rows when hideRows is true instead of taking out the rows from data. This makes filtering similar to that found in spreadsheets like MS Excel & google spreadsheet.
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 } );

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.
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: true
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 wrap = true otherwise the overflowing text becomes hidden and continuation symbol ... is displayed at the end.

localeType: String
Default: en
(v6.1.0) Locale of the grid. Its value can be obtained from localization file e.g., it can have any value out of 'en', 'ja', etc.

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[ 'ok', 'clear' ] Buttons at bottom of filter menu.
singleFilterboolean Use only single filter condition instead of default 2 filter conditions per column.
tabsArray[ 'hideCols', 'filter' ] Choose tabs to be displayed in menu.
gridOptionsObject
        {
            autoRow: false
            copyModel: {render: true},
            fillHandle: '',
            filterModel:{header:true, on: true},
            hoverMode: 'row',
            hwrap: false,
            rowBorders: false,
            rowHt: 24,
            rowHtHead: 23,
            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 );

numberCellType: Object
Default: { width: 50, title: "", resizable: false, minWidth: 50, show: true }
Number cells indicating the row number are displayed in the grid. It can be removed or hidden by setting numberCell > show to false.

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

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

rowBordersType: Boolean
Default: true
Determines display of horizontal borders of 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.

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 upon Ctrl - A. It selects all pages when it's true otherwise it selects only the current page.
columnbooleantrue Columns can be selected by click on the column headers when it's true. It's true by default since v7.0.0
modestring'block' Single row/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 true, selected row can be deselected by successive click on the row.

When false, null or undefined, the selected row can be deselected by ctrl-click.

Since v5.4.0, this option also affects selection of rows in a similar way.

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

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, sorting on a column can be canceled by clicking on a column header while column is in descending sort order. It's applicable to single column sorting and first column of multiple column sorting only. In multiple column sorting, sorting for non-first columns can be canceled anyway irrespective of value of this sub-option.

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.(v5.6.0)

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


summaryOptionsType: Object
Default: { number: "avg,sum,max,min", 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.

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(){ } }
    A new custom event "timeout" is added in v5.4.0 that calls the function asynchronously after a certain time interval.
  • listener: Callback to add single event listener to the control. Type of the event is construed from the type of control. Added in v3.3.0
  • options: Array of options or callback returning options for the select list. In case of button or other jQueryUI control, the options are passed as such while initializing the control. For example to create an icon only button, options: { text: false, showLabel: false } can be passed.
  • 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 '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" );

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

Also see Tree() method.

PropertydataTypeDefaultDescription
Tree related options:
childstrstring'children'Name of field in rows containing nested children nodes.
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 }
];
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 );

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 a class or multiple classes (separated by empty space) to a row or cell. Either rowData or rowIndx can be passed.

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

Code examples:

Invoke the method:

//Add classes 'pq-delete' & 'pq-edit' to 3rd row.
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'} );


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.

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.

  • This method does not accept any arguments.

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.

  • This method does not accept any arguments.

Code examples:

Invoke the method:

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


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


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.

    1. rowList parameter is added to support multiple deletes.

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

    Code examples:

    Invoke the method:

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


    destroy()

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

      Code examples:

      Invoke the method:

      grid.destroy( );


      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.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

            grid.expand( );
                        


            exportCsv( { url, render } )

            This method is deprecated, use exportData instead. It exports the grid data into CSV format file with csv extension. The grid prompts the user to download the exported file.

            • url
              Type: String
              Url where grid posts the data to be returned back as csv file.
            • render
              Type: Boolean
              Set true to include rendered cells. Default is false.

            Code examples:

            Invoke the method:

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


            exportExcel( { url, sheetName, render } )

            This method is deprecated, use exportData instead. It exports the data in the grid into Excel format file with xlsx extension. The grid prompts the user to download the exported file.

            • url
              Type: String
              Url where grid posts the data to be returned back as xlsx file.
            • sheetName
              Type: String
              Name of the Worksheet.
            • render
              Type: Boolean
              Set true to include rendered cells. Default is false.

            Code examples:

            Invoke the method:

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


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

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

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

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

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

            Code examples:

            Invoke the method:

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


            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. This method refreshes the focus if it is called without any parameters.

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

            Code examples:

            Invoke the method:

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


            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 can be used to execute Excel formula programatically and get its value.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

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


            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.getCellHeader( { 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 JSON object returned by this method is as below:
                  {
                      updateList: [rowData1, rowData2..]
                      addList: [rowData1, rowData2..]
                      deleteList: [rowData1, rowData2..]
                  }
                  
                  var changes = grid.getChanges( {format: 'byVal'} );
                  //Format of JSON object returned by this method is as below:
                  {
                      updateList: [row1, row2..]
                      addList: [row1, row2..]
                      deleteList: [row1, row2..]
                  }
                  


                  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.

                  • This method does not accept any arguments.

                  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.

                  • This method does not accept any arguments.

                  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.

                  • This method does not accept any arguments.

                  Code examples:

                  Invoke the method:

                  var obj = grid.getEditCell( );
                  
                  var $td = obj.$td; //table cell
                  
                  var $cell = obj.$cell; //editor wrapper.
                  
                  var $editor = obj.$editor; //editor.
                  


                  getEditCellData()Returns: String

                  Gets the data (saved or unsaved) associated with currently edited cell. Returns null if no cell is being edited.

                  • This method does not accept any arguments.

                  Code examples:

                  Invoke the method:

                  var dataCell = grid.getEditCellData( );


                  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

                  Gets the instance of grid for convenient invocation of grid methods. Returns an object { 'grid': grid }.

                  • This method does not accept any arguments.

                  Code examples:

                  Invoke the method:

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


                  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.

                  • This method does not accept any arguments.

                  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;
                  


                  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.

                  • This method does not accept any arguments.

                  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.

                  • This method does not accept any arguments.

                  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.

                  • This method does not accept any arguments.

                  Code examples:

                  Invoke the method:

                              history.undo();
                          


                  importWb({ extraCols, extraRows, keepCM, headerRowIndx, sheet, workbook })

                  Imports data from a json workbook into grid.

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

                  Code examples:

                  Invoke the method:

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


                  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.

                  • This method does not accept any arguments.

                  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.

                  • This method does not accept any arguments.

                  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.

                    • This method does not accept any arguments.

                    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.

                      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.

                      • This method does not accept any arguments.

                      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.

                      • This method does not accept any arguments.

                      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.

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

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

                      • This method does not accept any arguments.

                      Code examples:

                      Invoke the method:

                      grid.refreshDataAndView( );


                      refreshHeader()

                      Refreshes the column headers.

                      • This method does not accept any arguments.

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


                      refreshToolbar()

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

                      • This method does not accept any arguments.

                      Code examples:

                      Invoke the method:

                      grid.refreshToolbar( );


                      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.

                      • This method does not accept any arguments.

                      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 a class or multiple classes (separated by empty space) from a row or cell. Either rowData or rowIndx can be passed.

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

                      Code examples:

                      Invoke the method:

                      //Remove classes 'pq-delete' & 'pq-edit' from 3rd row.
                      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'}
                      );


                      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.

                      • This method does not accept any arguments.

                      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

                      • 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. It prototypically inherits all methods of Range object. Every grid has a unique Selection instance.

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

                      MethodParametersDescription
                      getSelection It returns array of all selected cells as { rowIndx, rowData, colIndx, dataIndx }
                      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 });

                      • This method does not accept any arguments.

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

                      • This method does not accept any arguments.

                      Code examples:

                      Invoke the method:

                      //add 3rd row to selection
                      sel.add( {rowIndx: 2});
                      
                      //add 2nd, 3rd & 7th row to selection
                      sel.add(rows: [ { rowIndx: 1 },{ rowIndx: 2}, {rowIndx: 6} ] });
                      
                      //removes 10th row from selection.
                      sel.remove({rowIndx: 9});
                      
                      //remove 2nd, 3rd & 7th row from selection
                      sel.remove({rows: [ { rowIndx: 1 },{ rowIndx: 2}, {rowIndx: 6} ] });
                      
                      //remove all row selections
                      sel.removeAll();
                      
                      //Find whether 3rd row is selected.
                      var isSelected = sel.isSelected({rowIndx: 2 });
                      
                      //Get all row selections
                      var selectionArray = sel.getSelection();
                      
                      


                      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.

                      • This method does not accept any arguments.

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


                      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.

                      • This method does not accept any arguments.

                      Code examples:

                      Invoke the method:

                      grid.toggle( );


                      toolbar()

                      Returns the toolbar DOM node wrapped in jQuery object.

                      • This method does not accept any arguments.

                      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

                      • This method does not accept any arguments.

                      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

                      • This method does not accept any arguments.

                      Code examples:

                      Invoke the method:

                       var treegrid = grid.Tree( );
                      treegrid.expandAll();


                      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.

                      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.

                      • This method does not accept any arguments.

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


                      beforeCellKeyDown( event, ui )Type: pqGrid:beforeCellKeyDown

                      Triggered before a key is pressed in a selected cell. In case of multiple cell selection, the last selected cell receives the keys input. Default handling of keys by the grid can be prevented by returning false.

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

                      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.

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


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


                      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 a row through method invocation or paste of rows/cells. Checks for editability of row/cell and validations take place after this event. All ui arguments are passed by reference so any modification to the arguments affects subsequent data processing by the grid. It fires only once when a number of cells are affected together (e.g., paste of multiple cells) rather than firing for each individual cell.

                      • event
                        Type: Event
                      • ui
                        Type: Object
                        • 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 ) {} );

                      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 a row through method invocation, paste of rows/cells, undo, redo. Checks for editability of row/cell and validations take place before this event. It fires only once when a number of cells are affected together (e.g., paste of multiple cells, undo, redo, etc) rather than firing for each individual cell. This event is suitable to intimate the remote server about any data changes in the grid. This event has the same ui parameters as beforeValidate event but with a significant difference being that ui parameters are considered read only for this event.

                      • event
                        Type: Event
                      • ui
                        Type: Object
                        • 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 ) {} );

                      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.

                      Code examples:

                      Initialize the pqGrid with the filter callback specified:

                      pq.grid( selector,{
                          filter: 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 ) {} );

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

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

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

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

                      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 (new in v6.0.0)
                        Type: Array
                        Array of rows from which values are taken.

                      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 )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 in the form of "$##,###.00" where number of trailing zeros represent number of decimal places. ( . ) is decimal separator. ( , ) is thousand separator. ( $ ) is currency symbol.

                      Code examples:

                      Invoke the method:

                      var value = pq.deFormatNumber( "$1,679.45", "$#,###.00");
                      //result is 1679.45
                      


                      exportWb({ workbook, url, type })Returns: String or Returns: Blob

                      Exports json workbook to xlsx. Also returns the exported data which can be processed locally.

                      • workbook
                        Type: PlainObject
                        workbook to be exported.
                      • url
                        Type: String
                        Absolute or relative url where grid posts the data to be returned back by server as a download file. The data is not posted when url is not provided.
                      • type
                        Type: String
                        maps to type parameter of jsZip, "base64", "blob".

                      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, 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 file.

                      • file
                        Type: File
                        File object from HTML5 file input control.
                      • content
                        Type: Blob
                        Blob or base64 data of xlsx file.
                      • sheets
                        Type: Array
                        Array of indices(numbers) or names(strings) of sheet to be imported. If omitted, then all sheets are imported into 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.
                      	}
                      );
                      


                      formatNumber( val, format )Returns: String

                      formats a number or currency.

                      • val
                        Type: Number
                        value to be formatted.
                      • format
                        Type: String
                        format in the form of "$##,###.00" where number of trailing zeros represent number of decimal places. ( . ) is decimal separator. ( , ) is thousand separator. ( $ ) is currency symbol.

                      Code examples:

                      Invoke the method:

                      var formatValue = pq.formatNumber( 67945, "#.00");
                      //result is 67945.00
                      


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