Version: 4.0.0

ParamQuery Grid Pro API Documentation for Version 4.0.0

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

Code examples:

Initialize the pqGrid with autofill option specified.

//turn autofill off.
$( ".selector" ).pqGrid( { autofill: false } );

Get or set the autofill option, after initialization:

//getter
var autofill = $( ".selector" ).pqGrid( "option", "autofill" );

//setter
$( ".selector" ).pqGrid( "option", "autofill", false );
    

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.

$( ".selector" ).pqGrid( { fillHandle: 'vertical' } );

Get or set the fillHandle option, after initialization:

//getter
var fillHandle = $( ".selector" ).pqGrid( "option", "fillHandle" );

//setter
$( ".selector" ).pqGrid( "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.
$( ".selector" ).pqGrid( { bootstrap: { on : true } } );

Get or set the bootstrap option, after initialization:

//getter
var bootstrap = $( ".selector" ).pqGrid( "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
$( ".selector" ).pqGrid( { bubble: true } );

Get or set the bubble option, after initialization:

//getter
var bubble = $( ".selector" ).pqGrid( "option", "bubble" );
    

collapsibleType: Object
Default: {on: true, collapsed: false, toggle: true, css: { zIndex: 1000 } }

The grid can be collapsed or expanded with help of collapsible icon on top right corner and it can be turned into a screen overlay with toggle button icon.
on is used to set or get the visibility of collapsible icon. Click on collapsible icon alternates the grid between expanded and collapsed state.
collapsed is used to set or get the initial collapsed or expanded state of the grid upon creation.
toggle is used to set or get the visibility of toggle icon. Click on toggle icon alternates the grid between default display state and maximized state.
css is an object containing css rules which are applied to grid in maximized state.

Code examples:

Initialize the pqGrid with collapsible option specified.

//create grid in collapsed state initially.
$( ".selector" ).pqGrid( { collapsible: { collapsed : 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 }
];
$( ".selector" ).pqGrid( {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: "left"

It determines the horizontal alignment of text in the columns. Possible values are "left", "right" and "center".

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" }
];
$( ".selector" ).pqGrid({colModel: colM });


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

It configures properties of a checkbox column and has significance only when used along with column.type = 'checkbox'.
When header is true, a checkbox is displayed in the header cell, otherwise not. The default header checkbox can be overridden with column.title to add custom label beside checkbox.
When all is true, checkbox selection in the header cell affects all checkboxes in that column on all pages, otherwise it affects the checkboxes in that column on the current page only.
When select is true, selection of rows gets bound to checkboxes.
cell value becomes equal to check or uncheck depending upon whether checkbox is checked. The checkboxes can be mapped to non boolean values e.g., 'YES' or 'NO' by specifying check = 'YES' and uncheck = 'NO'.

Code examples:

Initialize the pqGrid with column > cb option specified.

var colM = [
{
    type: 'checkbox',
    cb: {all: true, header: false}
}];

$( ".selector" ).pqGrid( { colModel: colM } );


column > clsType: String
Default: undefined

Class to be assigned to whole column including header.

Code examples:

Initialize the pqGrid with column > cls option specified.

var colM = [
    { title: "Company", width: 100 , cls:'pq-col' },
    { title: "Rank", width: 100 }
];
$( ".selector" ).pqGrid( {colModel:colM } );


column > collapsibleType: Object
Default: undefined

A grouped column becomes collapsible whenever it's defined with collapsible property set to empty object { } or with defined sub properties. A collapsible icon is displayed at right top corner of grouped column to toggle the collapsed state. In collapsed state, all children columns are hidden except first child.

  • on: When on is true, column is initialized in collapsed state, otherwise it's expanded state.
  • last: When last is true, last child of grouped column is visible instead of first column 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 }
];
$( ".selector" ).pqGrid({ 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.
$( ".selector" ).pqGrid( "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 }
];
$( ".selector" ).pqGrid({ colModel: colM });

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

//getter
var colM = $( ".selector" ).pqGrid( "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.
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > copyType: Boolean
Default: undefined

When set to false, this option prevents a column from being copied to the clipboard . This can also be used to exclude a non-grouped column from exported data.

Code examples:

Initialize the pqGrid with column > copy option specified.

var colM = [
    { title: "Company", width: 100, copy: false},
    { title: "Rank", width: 100, dataIndx:0 }
];
$( ".selector" ).pqGrid({ colModel: colM });


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

$( ".selector" ).pqGrid({ 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/yyyy e.g., 07/04/1776
    • ISO 8601 format yyyy-mm-ddThh:mm:ss e.g., 1776-07-04T08:20:01
  • 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" }
];
$( ".selector" ).pqGrid({ colModel: colM });


column > editableType: Boolean or Function
Default: true

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 { rowIndx, rowData, colIndx, dataIndx, column } as parameter.

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

$( ".selector" ).pqGrid({ 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.
$( ".selector" ).pqGrid( { 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.
$( ".selector" ).pqGrid({ colModel: colM });


column > exportRenderType: Boolean
Default: undefined

Rendered cells in this column are included in the exported data when this option is true.
This option can also be used to override render parameter of exportData() method for the current column.


column > filterType: Object
Default: undefined

It describes the filter behavior of the column using an object having following sub-options: condition, value, value2, type, subtype, init, prepend, options, labelIndx, valueIndx, groupIndx, cache, cls, style, attr, listeners

condition is a string and can be any one of 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).
condition can also be implemented as a callback which can be used to implement custom filtering. It accepts 2 arguments where first argument is value against which the second argument is matched. It returns true when the match is found.

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. value2 is applicable only when condition is between

The following sub-options are applicable when header filtering is on. Click here to see an example on how to use header filter options.

type can be textbox, textarea, select, checkbox, callback function, html string or null. subtype can be triple for tri - state checkbox.

init is a callback function called during initialization of control which can be implemented to convert simple html control defined as type into a custom control i.e., jQueryUI datepicker, autocomplete or any other plugin. 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).

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

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

Select lists are generated from the options and stored in cache for performance. If need arise as to reset the options and regenerate the select list, cache should be set to null before specifying fresh set of options.

cls is a string to inject css class(es) to the control.

style adds inline css style to the control.

attr adds html attributes to the control. It is quite useful in a number of use cases e.g., a select list can be turned into a multiple select list by addition of '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"'

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 (added in v4.0.0) 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.

Code examples:

Initialize the pqGrid with column > filter option specified.

var colM =
[
    {
        title: "ShipCountry",
        filter: {
            type: 'textbox',
            condition: 'equal',
            value: 'france',
            listener: 'timeout'
        }
    },
    {
        title: "Ship Region",
        filter:{
            type: 'select',
            value: ['AR', 'CA', 'WA'],
            attr: 'multiple',
            condition: 'range',
            listener: 'change'
        }
    }
];
$( ".selector" ).pqGrid( {colModel: colM} );

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

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

//setter
//set filter of 2nd column
colM[1].filter =
{
    type: "select",
    options: [ "AUS", "IN", "US" ],
    condition: "equal",
    value: "IN"
};
$( ".selector" ).pqGrid( "option", "colModel", colM );

column > formatType: String
Default: undefined

It describes the display format of the cell data in a column for numbers, currencies and dates using a string:

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" }
];
$( ".selector" ).pqGrid({ colModel: colM });


column > formulaType: Function
Default: undefined

This option is removed in v4.0.0, use formulas option instead of this. It's a callback function that is implemented when cell data is dependent upon other cell values.

Code examples:

Initialize the pqGrid with column > formula option specified.

var colM = [
{
    dataIndx: 'profit',
    dataType: "float",
    formula: function(ui){
        var rd = ui.rowData;
        return rd.revenue - rd.expense;
    }
}];
$( ".selector" ).pqGrid( {colModel:colM} );


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;
        }
    }
];
$( ".selector" ).pqGrid( {colModel:colM} );


column > halignType: String
Default: "left"

It determines the horizontal alignment of text in the column headers. Possible values are "left", "right" and "center". It's default value is same as column.align

Code examples:

Initialize the pqGrid with column > halign option specified.

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


column > hiddenType: Boolean
Default: undefined

Column is hidden when this option is true.

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

$( ".selector" ).pqGrid({ 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.
$( ".selector" ).pqGrid( "option", "colModel", colM );

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

$( ".selector" ).pqGrid( {colModel:colM} );


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%' }
];

$( ".selector" ).pqGrid( {colModel:colM} );


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 > postRender( ui )Type: Function
Default: null

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 i.e., $td can be accessed as jQuery object which can be further manipulated to bind individual event listeners or create fully interactive cells such as charts or graphs. As this function can affect the performance of grid especially while scrolling the view in virtual mode, it can be called asynchronously by specifying option postRenderInterval. This callback works only when option postRenderInterval is defined.

  • ui
    Type: Object
    • 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.

Code examples:

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

var colM = [
{ title: "ShipCountry", width: 100, postRender:function( ui ){} },
{ title: "Customer Name", width: 100 }];
//postRender is provided for 1st column.
$( ".selector" ).pqGrid( { colModel: colM } );


column > render( ui )Type: Function or String
Default: null

It's a callback function 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.

If no render function is provided or if render callback returns null or undefined, then data is displayed as such in the cell or cell is rendered depending upon column.type.

  • ui
    Type: Object
    • rowData
      Type: Array or PlainObject
      Reference to 1-dimensional array or object representing row data.
    • cellData
      Type: String or Boolean or Number or Object or Date
      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 > resizableType: Boolean
Default: true

Column is resizable depending upon the value of this option.

Code examples:

Initialize the pqGrid with column > resizable option specified.

var colM = [
//set 1st column as not resizable.
{ title: "ShipCountry", width: 100, resizable: false,
{ title: "Customer Name", width: 100 }];

$( ".selector" ).pqGrid( { colModel: colM } );


column > sortableType: Boolean
Default: true

Set it to false to disable sorting for a column.

Code examples:

Initialize the pqGrid with column > sortable option specified.

var colM = [
{ title: "ShipCountry", width: 100, sortable: false },
{ title: "Customer Name", width: 100 }];
$( ".selector" ).pqGrid( { colModel: colM } );


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]
    }}
];
$( ".selector" ).pqGrid( { colModel: colM } );


column > summaryType: Object
Default: undefined

An object containing type and edit properties of summary for this column. It's used with grouping of rows (see groupModel) and/or used in grand summary row at the bottom.

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.

Code examples:

Initialize the pqGrid with column > summary option specified.

var colM =
[
    {
        dataIndx: "ShipCountry",
        summary: { type: "min", edit: true },
        ...
    },
    ...
];
$( ".selector" ).pqGrid( { colModel: colM } );


column > titleType: String or Function
Default: null

Title or Heading of the column. It can be a callback that returns html to be displayed as column title.

Code examples:

Initialize the pqGrid with column > title option specified.

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


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 hidden or added or removed dynamically.

Code examples:

Initialize the pqGrid with column > type option specified.

var colM = [
{ title: "", width: 50, type: 'checkbox' },
{ title: "Customer Name", width: 100 }];
$( ".selector" ).pqGrid( { colModel: colM } );


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 },
    ]
}];
$( ".selector" ).pqGrid( { 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%' }];
$( ".selector" ).pqGrid( { colModel: colM } );


columnBordersType: Boolean
Default: true

Determines display of vertical borders of the columns.

Code examples:

Initialize the pqGrid with columnBorders option specified.

$( ".selector" ).pqGrid( { columnBorders: false } );


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.
$( ".selector" ).pqGrid( { columnTemplate: { width: '20%', minWidth: 50 } } );


copyModelType: Object
Default: { on: true, render: false }

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.

Code examples:

Initialize the pqGrid with copyModel option specified.

$( ".selector" ).pqGrid( { 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'],
    ...
];
$( ".selector" ).pqGrid( { dataModel: { data: dataSales, ... }, ... } );

Get or set the dataModel option, after initialization:

//getter
  //get complete dataModel.
var dataModel = $( ".selector" ).pqGrid( "option", "dataModel" );
  //get sub-option of dataModel.
var data = $( ".selector" ).pqGrid( "option", "dataModel.data" );

//setter
  //either new value should contain all sub-options
$( ".selector" ).pqGrid( "option", "dataModel", { data: dataSales, ... } );
  //or pass individual sub-options which is safer.
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( { 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.

$( ".selector" ).pqGrid( { 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' } ];
//pass it to pqGrid.
$( ".selector" ).pqGrid( { dataModel: { data: dataSales } } ); 

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

//getter
var data=$( ".selector" ).pqGrid( "option" , "dataModel.data" );

//setter
$( ".selector" ).pqGrid( "option", "dataModel.data", dataSales );

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.

$( ".selector" ).pqGrid( {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.

$( ".selector" ).pqGrid( {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.

$( ".selector" ).pqGrid({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=$( ".selector" ).pqGrid( "option" , "dataModel.getData" );

//setter
$( ".selector" ).pqGrid("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.

$( ".selector" ).pqGrid( { 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=$( ".selector" ).pqGrid( "option" , "dataModel.getUrl" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( { dataModel:{ location:"remote" } } );

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

//getter
var location=$( ".selector" ).pqGrid( "option", "dataModel.location" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( {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.

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

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

//getter
var postData=$( ".selector" ).pqGrid( "option", "dataModel.postData" );

//setter
$( ".selector" ).pqGrid( "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.

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

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

//getter
var postDataOnce =$( ".selector" ).pqGrid( "option", "dataModel.postDataOnce" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( {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.

$( ".selector" ).pqGrid( { dataModel:{ url: "/demos/pagingGetOrders" } } );

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

//getter
var url = $( ".selector" ).pqGrid( "option" , "dataModel.url" );

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

detailModelType: Object
Default: {cache: true, collapseIcon:"ui-icon-triangle-1-e", expandIcon:"ui-icon-triangle-1-se"}

It contains information about the detail view of row. This option is also useful for nesting of grids. Frozen columns are supported only in virtualX: true mode along with this feature. It consists of following options:
cache: determines 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.
init: is a callback function which receives rowData as argument and has to return detail view as jQuery object.
collapseIcon: determines the icon to be displayed when row is collapsed.
expandIcon: determines the icon to be displayed when row is expanded.

Code examples:

Initialize the pqGrid with detailModel option specified.

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

Get or set the detailModel option, after initialization:

//getter
var detailModel = $( ".selector" ).pqGrid( "option", "detailModel" );

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

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.

$( ".selector" ).pqGrid( dragColumns: { enabled: false } );


draggableType: Boolean
Default: false

The pqGrid becomes draggable if this option is set to true.

Code examples:

Initialize the pqGrid with draggable option specified.

$( ".selector" ).pqGrid( {draggable: true} );

Get or set the draggable option, after initialization:

//getter
var draggable=$( ".selector" ).pqGrid( "option", "draggable" );

//setter
$( ".selector" ).pqGrid( "option", "draggable", 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. It receives { rowData: rowData, rowIndx: rowIndx} as parameter.

Code examples:

Initialize the pqGrid with editable option specified.

$( ".selector" ).pqGrid( {editable:false} );

Get or set the editable option, after initialization:

//getter
var editable=$( ".selector" ).pqGrid( "option", "editable" );

//setter
$( ".selector" ).pqGrid( "option", "editable", false );
$( ".selector" ).pqGrid( "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: { cellBorderWidth: 0, clicksToEdit: 2, pressToEdit: true, filterKeys: true, keyUpDown: true, saveKey: $.ui.keyCode.ENTER, onSave: 'nextFocus', onTab: 'nextFocus', onBlur: 'validate', allowInvalid: false, invalidClass: 'pq-cell-red-tr pq-has-tooltip', warnClass: 'pq-cell-blue-tr pq-has-tooltip' }

The border width of the container displayed around the editor can be changed using cellBorderWidth.

clicksToEdit provides the editing behaviour of the grid w.r.t clicks (1 for single click or 2 for double click) required to edit a cell.

pressToEdit puts a cell into edit mode when any input key is pressed while cell has focus.

saveKey determines the ascii code of custom key to save data in a cell in addition to Tab key.

onSave determines the cell navigation when save key is pressed in an editor. Next editable cell calculated from left to right and top to bottom is put into edit mode when onSave is nextEdit. Next cell is focused when onSave is nextFocus. Same cell is focused when onSave is null.

onTab determines the cell navigation when tab key is pressed in an editor. It has the same option values as onSave.

filterKeys option is used to prevent non digits in float and integer dataType columns.

keyUpDown is used for key navigation in the editing cells using up and down key.

onBlur determines the behaviour of the editor when it's blurred. onBlur = 'validate' keeps the editor in edit mode until it passes the validation. onBlur = 'save' saves the value if validation is met, exits from edit mode irrespective of whether editor passes the validation. onBlur = '' doesn't do anything and the editor remains in edit mode.

allowInvalid when true doesn't reject an invalid value but instead adds a class invalidClass to the cell.

invalidClass adds a class to a cell when allowInvalid option is true and the cell fails validation. 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.
$( ".selector" ).pqGrid( {editModel: { clicksToEdit: 2, saveKey: $.ui.keyCode.ENTER } );

Get or set the editModel option, after initialization:

//getter
var editModel=$( ".selector" ).pqGrid( "option", "editModel" );

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

editorType: Object
Default: { type: 'textbox', cls: '' , style: '', select: false }

It provides the editor properties for whole grid. type sets the kind of editor out of 'contenteditable', 'textbox', 'textarea'. style sets the css style. cls sets the css class. select option is useful for selection of text in a cell editor upon focus. 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.
$( ".selector" ).pqGrid( {editor: { type: 'textbox', style: 'border-radius:5px;' } } );

Get or set the editor option, after initialization:

//getter
var editor=$( ".selector" ).pqGrid( "option", "editor" );

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

filterModelType: Object
Default: { on: true, mode: "AND", header: false, timeout: 400, type: 'local' }

It describes the filtering behavior of the grid.

Filtering can be turned on or off depending upon the property on.

Multiples columns are filtered together depending upon mode which can be either 'AND' or 'OR'.

Column filter input controls are displayed at top of the rows in the header when header is true.

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

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.

$( ".selector" ).pqGrid( { filterModel: { header: true } } );

Get or set the filterModel option, after initialization:

//getter
var filterModel=$( ".selector" ).pqGrid( "option", "filterModel" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( { flex: { on: true } } );

Get or set the flex option, after initialization:

//getter
var flex = $( ".selector" ).pqGrid( "option", "flex" );

//setter
$( ".selector" ).pqGrid( "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. 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;
    }]
];

$( ".selector" ).pqGrid( {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.

$( ".selector" ).pqGrid( {formulasModel: {on: false}} );


freezeBordersType: Boolean
Default: true

this option displays borders for frozen panes.

Code examples:

Initialize the pqGrid with freezeBorders option specified.

$( ".selector" ).pqGrid( {freezeBorders: false} );

Get or set the freezeBorders option, after initialization:

//getter
var freezeBorders = $( ".selector" ).pqGrid( "option", "freezeBorders" );

//setter
$( ".selector" ).pqGrid( "option", "freezeBorders", false );

freezeColsType: Integer
Default: 0

The number of columns which can be frozen similar to MS Excel. The frozen columns remain fixed while non-frozen columns can be scrolled horizontally.

Code examples:

Initialize the pqGrid with freezeCols option specified.

$( ".selector" ).pqGrid( {freezeCols:2} );

Get or set the freezeCols option, after initialization:

//getter
var freezeCols=$( ".selector" ).pqGrid( "option", "freezeCols" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( {freezeRows:2} );

Get or set the freezeRows option, after initialization:

//getter
var freezeRows=$( ".selector" ).pqGrid( "option", "freezeRows" );

//setter
$( ".selector" ).pqGrid( "option", "freezeRows", 1 );

groupModelType: Object
Default: See sub-options below

It defines the grouping properties of rows. It can be grouped 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 can also be provided for the aggregated rows with complementary options in column.summary.

Following are the groupModel sub-options.

OptionTypeDefaultDescription
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 (String or Integer) of groupby columns by which the rows are grouped.
fixColsbooleantrue The groupby columns are fixed towards the left of viewport in the same order as groupModel.dataIndx when this option is true.
grandSummaryboolean Grand summary row is displayed at the bottom of grid when this option is true.
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.
indentintegerundefined 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.
onbooleanfalse Option to turn on/off the grouping.
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.
summaryInTitleRowboolean'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[ ] Format of group headings as an array of strings or callback functions. Headings are displayed as groupModel.titleDefault when there is no value in the array for corresponding levels of grouping.
titleInFirstColbooleanfalse group titles are always displayed in first visible column of grid. This option makes sense when used along with fixCols: false and positive value of indent.
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.

Code examples:

Initialize the pqGrid with groupModel option specified.

$( ".selector" ).pqGrid( {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 as height in percent of the containing block. 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.

$( ".selector" ).pqGrid( {height: 400} );

Get or set the height option, after initialization:

//getter
var height = $( ".selector" ).pqGrid( "option", "height" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( { historyModel: { on: false }} );

Get or set the historyModel option, after initialization:

//getter
var historyModel = $( ".selector" ).pqGrid( "option", "historyModel" );

//setter
$( ".selector" ).pqGrid( "option", "historyModel", { allowInvalid: false } );

hoverModeType: String
Default: 'row'

It provides the hover (mouseenter and mouseleave) behaviour of grid w.r.t cells and rows.

Code examples:

Initialize the pqGrid with hoverMode option specified.

$( ".selector" ).pqGrid({ hoverMode:'cell' });

Get or set the hoverMode option, after initialization:

//getter
var hoverMode=$( ".selector" ).pqGrid( "option", "hoverMode" );

//setter
$( ".selector" ).pqGrid( "option", "hoverMode", 'row' );

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.

Code examples:

Initialize the pqGrid with hwrap option specified.

$( ".selector" ).pqGrid( {hwrap:true} );

Get or set the hwrap option, after initialization:

//getter
var hwrap=$( ".selector" ).pqGrid( "option", "hwrap" );

//setter
$( ".selector" ).pqGrid( "option", "hwrap", true );

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.

$( ".selector" ).pqGrid({ maxHeight: 100 });

Get or set the maxHeight option, after initialization:

//getter
var maxHeight = $( ".selector" ).pqGrid( "option", "maxHeight" );

//setter
$( ".selector" ).pqGrid( "option", "maxHeight", 400 );

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.

$( ".selector" ).pqGrid({ maxWidth: 100 });

Get or set the maxWidth option, after initialization:

//getter
var maxWidth = $( ".selector" ).pqGrid( "option", "maxWidth" );

//setter
$( ".selector" ).pqGrid( "option", "maxWidth", 400 );

mergeCellsType: Array
Default: null

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.

Code examples:

Initialize the pqGrid with mergeCells option specified.

$( ".selector" ).pqGrid({
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 = $( ".selector" ).pqGrid( "option", "mergeCells" );

//setter
mergeCells: [
    { r1: 1, c1: 2, rc: 5, cc: 3 },
    { r1: 10, c1: 0, rc: 4, cc: 6 }
];

$( ".selector" ).pqGrid( "option", mergeCells );

minWidthType: Integer
Default: 50

Minimum possible width of the grid in pixels.

Code examples:

Initialize the pqGrid with minWidth option specified.

$( ".selector" ).pqGrid({ minWidth:100 });

Get or set the minWidth option, after initialization:

//getter
var minWidth=$( ".selector" ).pqGrid( "option", "minWidth" );

//setter
$( ".selector" ).pqGrid( "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.
$( ".selector" ).pqGrid( { numberCell: {show: false} } );

Get or set the numberCell option, after initialization:

//getter
var numberCell=$( ".selector" ).pqGrid( "option", "numberCell" );

//setter
$( ".selector" ).pqGrid( "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.
rPPinteger10 Results displayed per page.
rPPOptionsarray[10, 20, 50, 100] Results per page options in pager dropdown.
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.
$( ".selector" ).pqGrid( { 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.

$( ".selector" ).pqGrid( {pasteModel: { on: false }} );

Get or set the pasteModel option, after initialization:

//getter
var pasteModel = $( ".selector" ).pqGrid( "option", "pasteModel" );

//setter
$( ".selector" ).pqGrid( "option", "pasteModel.allowInvalid", false );

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.

Code examples:

Initialize the pqGrid with postRenderInterval option specified.

$( ".selector" ).pqGrid( { postRenderInterval : 200 } );

Get or set the postRenderInterval option, after initialization:

//getter
var postRenderInterval = $( ".selector" ).pqGrid( "option", "postRenderInterval" );

resizableType: Boolean
Default: false

The grid can be resized horizontally and vertically if this is set to true.

Code examples:

Initialize the pqGrid with resizable option specified.

$( ".selector" ).pqGrid( {resizable: true} );

Get or set the resizable option, after initialization:

//getter
var resizable=$( ".selector" ).pqGrid( "option", "resizable" );

//setter
$( ".selector" ).pqGrid( "option", "resizable", true );

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.

Code examples:

Initialize the pqGrid with rowInit option specified.

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

Get or set the rowInit option, after initialization:

//setter
$( ".selector" ).pqGrid( "option", "rowInit", function( ui ){ } );

roundCornersType: Boolean
Default: true

Display of rounded corners at all 4 corners of the grid.

Code examples:

Initialize the pqGrid with roundCorners option specified.

$( ".selector" ).pqGrid( {roundCorners:true} );

Get or set the roundCorners option, after initialization:

//getter
var roundCorners=$( ".selector" ).pqGrid( "option", "roundCorners" );

//setter
$( ".selector" ).pqGrid( "option", "roundCorners", true );

rowBordersType: Boolean
Default: true

Determines display of horizontal borders of the rows.

Code examples:

Initialize the pqGrid with rowBorders option specified.

$( ".selector" ).pqGrid( {rowBorders:false} );

Get or set the rowBorders option, after initialization:

//getter
var rowBorders=$( ".selector" ).pqGrid( "option", "rowBorders" );

//setter
$( ".selector" ).pqGrid( "option", "rowBorders", true );

scrollModelType: Object
Default: { horizontal: true, pace: 'fast', autoFit: false, lastColumn: 'auto', theme: false, flexContent: undefined }

horizontal determines the visibility of horizontal scrollbar, however it's not recommended to use this sub-option to hide scrollbar and is deprecated in favour of autoFit and flex width.
pace governs behavior of the scrollbar sliders. Possible values are 'consistent', 'optimum' and 'fast'. 'consistent' and 'optimum' are meant for delegate scrolling while 'fast' is meant for live scrolling.
When true, autoFit changes the width of the columns to fit them all into the grid without scrolling. It prevents scrolling until all the columns have reached minWidth at which point the scrolling is inevitable. Any resize/change in the grid width leads to proportional change in width of columns.
lastColumn has 3 possible values. lastColumn = 'auto' changes the width of the last column to prevent trailing empty space in the grid. lastColumn = 'fullScroll' enables full scrolling in the grid so as to enable comparison upto last column in right unfrozen pane with that of last column in frozen pane. lastColumn = 'none' doesn't do anything.
theme option affects the theme of the scrollbars. If it's true, scrollbars puts on same theme as used by grid, otherwise it displays 3 dimensional scrollbars. theme can be set only during initialization.
flexContent = true is useful when the dimensions (usually height ) of a row or cell may change anytime after grid is laid out e.g., when cell contains images of unspecified height and width or when details of a row display content of unknown height via Ajax.

Code examples:

Initialize the pqGrid with scrollModel option specified.

$( ".selector" ).pqGrid({ scrollModel:{pace: 'fast', autoFit: true, theme: true } });

Get or set the scrollModel option, after initialization:

//getter
var scrollModel=$( ".selector" ).pqGrid( "option", "scrollModel" );

//setter
//forcefully hide the horizontal scrollbar.
$( ".selector" ).pqGrid( "option", "scrollModel.horizontal", false } );

//adjust widths of the columns so as to
//display all columns within the grid until all the columns have reached minWidth.
$( ".selector" ).pqGrid( "option", "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.
columnbooleanundefined Columns can be selected by click on the column headers when it's true.
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, selected row can be deselected by successive click on the row when this option value is true, otherwise the selected row can be deselected by ctrl-click.
typestring'cell' Row or cells can be selected by UI (keyboard / mouse) depending upon its value: 'cell', 'row' or null.

Code examples:

Initialize the pqGrid with selectionModel option specified.

$( ".selector" ).pqGrid( {selectionModel: { type: 'cell', mode: 'block'} } );

Get or set the selectionModel option, after initialization:

//getter
var selectionModel=$( ".selector" ).pqGrid( "option", "selectionModel" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( { showBottom : true } );

Get or set the showBottom option, after initialization:

//getter
var showBottom = $( ".selector" ).pqGrid( "option", "showBottom" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( {showHeader: false} );

Get or set the showHeader option, after initialization:

//getter
var showHeader = $( ".selector" ).pqGrid( "option", "showHeader" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( { showTitle : true } );

Get or set the showTitle option, after initialization:

//getter
var showTitle = $( ".selector" ).pqGrid( "option", "showTitle" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( { showTop : true } );

Get or set the showTop option, after initialization:

//getter
var showTop=$( ".selector" ).pqGrid( "option", "showTop" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( { showToolbar : true } );

Get or set the showToolbar option, after initialization:

//getter
var showToolbar=$( ".selector" ).pqGrid( "option", "showToolbar" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( {sortable: false} );

Get or set the sortable option, after initialization:

//getter
var sortable = $( ".selector" ).pqGrid( "option", "sortable" );

//setter
$( ".selector" ).pqGrid( "option", "sortable", false );

sortModelType: Object
Default: { cancel: true, ignoreCase: false, multiKey: 'shiftKey', number: true, on: true, single: true, sorter: [ ], space: false, type: 'local' }

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

Code examples:

Initialize the pqGrid with sortModel option specified.

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

Get or set the sortModel option, after initialization:

//getter
var sortModel = $( ".selector" ).pqGrid( "option", "sortModel" );

//setter
$( ".selector" ).pqGrid( "option", "sortModel", { type: 'remote' } );

stringifyType: Boolean
Default: undefined

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.

$( ".selector" ).pqGrid( { stringify : true } );

Get or set the stringify option, after initialization:

//getter
var stringify=$( ".selector" ).pqGrid( "option", "stringify" );
//setter
$( ".selector" ).pqGrid( "option", "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.

$( ".selector" ).pqGrid( { stripeRows : false } );

Get or set the stripeRows option, after initialization:

//getter
var stripeRows=$( ".selector" ).pqGrid( "option", "stripeRows" );

//setter
$( ".selector" ).pqGrid( "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 causes fixed rows to automatically show up at the bottom of grid with data drawn from this array. This option is added in v3.3.0 and it's no longer required to call createTable() to create fixed rows. It can be get and set at runtime after initialization like any other option.

Code examples:

Initialize the pqGrid with summaryData option specified.

$( ".selector" ).pqGrid({
    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.


swipeModelType: Object
Default: { on: 'touch', speed: 20, ratio: 0.15, repeat: 20 }

Determines swipe of the viewport using mouse or touch. When on is true, viewport can be swiped using both mouse and touch. When on is 'touch', viewport can be swiped using touch only. When on is false, viewport can't be swiped.
If swipe is not desirable over a particular region in the viewport, then 'pq-no-capture' class can be assigned to that region to prevent swipe.
The following sub-options affect scrolling speed and duration once swipe has been initiated by mouse or touch gesture.
speed determines the speed of viewport movement.
ratio fixes the threshold while calculating swipe action. It's ratio of distance through which pointer has moved to the time taken to move the pointer.
repeat determines the number of times to move the viewport, hence useful to extend or limit the duration of swipe.

Code examples:

Initialize the pqGrid with swipeModel option specified.

$( ".selector" ).pqGrid( { swipeModel : { on: 'touch' } } );

Get or set the swipeModel option, after initialization:

//getter
var swipeModel = $( ".selector" ).pqGrid( "option", "swipeModel" );

//setter
$( ".selector" ).pqGrid( "option", "swipeModel", { on : false } );

titleType: String
Default: null

Title of the pqGrid.

Code examples:

Initialize the pqGrid with title option specified.

$( ".selector" ).pqGrid( {title:'Shipping Details'} );

Get or set the title option, after initialization:

//getter
var title=$( ".selector" ).pqGrid( "option", "title" );

//setter
$( ".selector" ).pqGrid( "option", "title", "Order Details" );

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.

$( ".selector" ).pqGrid({ trackModel : { on: true } });

Get or set the trackModel option, after initialization:

//getter
var trackModel = $( ".selector" ).pqGrid( "option", "trackModel" );

//setter
$( ".selector" ).pqGrid( "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
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.
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;
    }
}
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.
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 }
];
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.
renderfunctionundefinedCallback function to render custom node text, html, icon, css style, css class and html attribute.

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 };
    }
selectbooleanundefinedRow selections are bound to checkbox states.
summarybooleanundefinedshow summary of the grouped tree nodes. Check column.summary option to define summary of columns.

Code examples:

Initialize the pqGrid with treeModel option specified.

$( ".selector" ).pqGrid({ 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
$( ".selector" ).pqGrid( { trigger: true } );

Get or set the trigger option, after initialization:

//getter
var trigger = $( ".selector" ).pqGrid( "option", "trigger" );
    

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:

  • type: which can be 'textbox', 'textarea', 'file', 'button', 'select', 'checkbox', html string or a callback function returning html string.
  • 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.
  • cls: class to be assigned to the control.
  • 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.
  • attr: attribute to be assigned to the control.
  • label: Applicable to button, checkbox, textbox and textarea.
  • icon: class of the button icon which can be any of the jqueryui icons or a custom icon 16 x 16.
  • listeners: An array of event listeners for the control.
  • listener: An object to add single event listener to the control where key is type of event and value is callback. e.g., listener: { 'click': function(){ } }
  • 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
  • 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 }
    ]
};
$( ".selector" ).pqGrid( { toolbar: toolbar } );

Get or set the toolbar option, after initialization:

//getter
var toolbar = $( ".selector" ).pqGrid( "option", "toolbar" );

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.
$( ".selector" ).pqGrid( {validation: { icon: '' } } );

Get or set the validation option, after initialization:

//getter
var validation = $( ".selector" ).pqGrid( "option", "validation" );

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

virtualXType: Boolean
Default: false

Virtual rendering for the columns or x axis. It's useful to set this option as true while displaying lot number of columns. Swipe along x axis is not supported when this option is true.

Code examples:

Initialize the pqGrid with virtualX option specified.

$( ".selector" ).pqGrid( {virtualX: false} );

Get or set the virtualX option, after initialization:

//getter
var virtualX=$( ".selector" ).pqGrid( "option", "virtualX" );

//setter
$( ".selector" ).pqGrid( "option", "virtualX", true );

virtualYType: Boolean
Default: false

Virtual rendering for the rows or y axis. It's useful to set this option as true while displaying lot number of rows. Swipe along y axis is not supported when this option is true.

Code examples:

Initialize the pqGrid with virtualY option specified.

$( ".selector" ).pqGrid( {virtualY: false} );

Get or set the virtualY option, after initialization:

//getter
var virtualY=$( ".selector" ).pqGrid( "option", "virtualY" );

//setter
$( ".selector" ).pqGrid( "option", "virtualY", true );

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.
$( ".selector" ).pqGrid( { warning: { icon: '' } } );

Get or set the warning option, after initialization:

//getter
var warning = $( ".selector" ).pqGrid( "option", "warning" );

//setter
var warning = {
    icon: 'ui-icon-info',
    cls: 'ui-state-default'
};
$( ".selector" ).pqGrid( "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 as width in percent of the containing block. 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.

$( ".selector" ).pqGrid( { width: 500} );

Get or set the width option, after initialization:

//getter
var width=$( ".selector" ).pqGrid( "option", "width" );

//setter
$( ".selector" ).pqGrid( "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.

$( ".selector" ).pqGrid( {wrap:true} );

Get or set the wrap option, after initialization:

//getter
var wrap=$( ".selector" ).pqGrid( "option", "wrap" );

//setter
$( ".selector" ).pqGrid( "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.
$( ".selector" ).pqGrid( "addClass", {rowIndx: 2, cls: 'pq-delete pq-edit'} );

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


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

//Insert an empty row at rowIndx : 3
$( ".selector" ).pqGrid( "addRow",
    { newRow: {}, rowIndx: 3 }
);

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

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

//Add a cell title
$( ".selector" ).pqGrid( "attr",
        {rowIndx: 2, dataIndx: 'profits', attr: { title: 'cell title' } }
);


collapse( )

Collapse the grid.

  • This method does not accept any arguments.

Code examples:

Invoke the method:

$( ".selector" ).pqGrid( "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
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 column used to find a column recursively in gcm ( default ) or in cm. Return true within the callback when column is found.

  • 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.
$( ".selector" ).pqGrid( "commit" );

//commit all updated records.
$( ".selector" ).pqGrid( "commit", { type: 'update' } );

//commit updated records with matching rows only.
$( ".selector" ).pqGrid( "commit", { type: 'update', rows: rows } );

//commit added records only and update the primary key of added records from rows.
$( ".selector" ).pqGrid( "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.
    $( ".selector" ).pqGrid( "copy" );
    


    createTable( { $cont, data } )

    Generates a table having structure similar to and synchronized with the columns in the grid. It's useful for creating frozen rows especially at the bottom. Any subsequent call to createTable using same $cont parameter replaces the previous table with a new table, hence it can also be used to refresh table with new data.

    • $cont
      Type: jQuery
      container in which to append the new table.
    • data
      Type: Array
      Two dimensional array or array of key/value pair objects holding data for the new table. The key names should correspond to dataIndx in colModel.

    Code examples:

    Invoke the method:

    //create a frozen row having 4 columns in div container using 2 dimensional array.
    $( ".selector" ).pqGrid( "createTable", {$cont: $("
    "), data: "Total", "", 35, 120 //2 dimensional array } ); //create a frozen row having 4 columns in div container using JSON data. $( ".selector" ).pqGrid( "createTable", {$cont: $("
    "), data: [{ rank: "Total", company: "", revenues: 35, profits: 120 }] } );


    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.
    $( ".selector" ).pqGrid( "data", {rowIndx: 2, data: { key1: value1, key2: value2 } );
    
    //get whole meta data of 3rd row.
    var data = $( ".selector" ).pqGrid( "data", {rowIndx: 2} ).data;
    
    //get partial meta data of 3rd row with key name 'key1'.
    var value1 = $( ".selector" ).pqGrid( "data", {rowIndx: 2, data: 'key1'} ).data;
    
    //Add meta data to a cell
    $( ".selector" ).pqGrid( "data", {rowIndx: 2, dataIndx: 'profits',
                data: { 'a': {'b': true} }
            });


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

    Deletes a row 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.
    $( ".selector" ).pqGrid( "deleteRow", { rowIndx: 4 } );
    
    //Delete multiple rows.
    $( ".selector" ).pqGrid( "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:

      $( ".selector" ).pqGrid( "destroy" );


      disable()

      Disables the pqGrid.

        Code examples:

        Invoke the method:

        $( ".selector" ).pqGrid( "disable" );


        enable()

        Enables the pqGrid.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "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.
          $( ".selector" ).pqGrid( "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.
          $( ".selector" ).pqGrid( "editFirstCellInRow", { rowIndx: 2 } );


          expand( )

          Expand the grid.

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "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:

          $( ".selector" ).pqGrid( "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:

          $( ".selector" ).pqGrid( "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.
          • 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. Only single rule can be applied to single column/ dataIndx.

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


          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.
              $( ".selector" ).pqGrid( "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();
          


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

          Used to get a cell when indices are known. Either rowIndx or rowIndxPage and either colIndx or dataIndx can be passed. It returns a td element wrapped in jQuery object if td is displayed in the viewport.

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

          Code examples:

          Invoke the method:

          //get cell in 3rd row and 4th column.
          var $td = $( ".selector" ).pqGrid( "getCell", { rowIndx: 2, dataIndx: "contactName" } );


          getCellHeader( { dataIndx, colIndx } )Returns: jQuery

          Used to get a header cell when either colIndx or dataIndx is known. It returns header cell wrapped in jQuery object if cell is displayed in the viewport.

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

          //get header cell in 4th column.
          var $th = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "getChanges" );
          //Format of JSON object returned by this method is as below:
          {
              updateList: [rowData1, rowData2..]
              addList: [rowData1, rowData2..]
              deleteList: [rowData1, rowData2..]
          }
          
          var changes = $( ".selector" ).pqGrid( "getChanges", {format: 'byVal'} );
          //Format of JSON object returned by this method is as below:
          {
              updateList: [row1, row2..]
              addList: [row1, row2..]
              deleteList: [row1, row2..]
          }
          


          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 = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "getColumn",{ dataIndx: "profits" } );


          getColModel( )Returns: Array

          Used to get colModel of grid. It's different from options > colModel in the case of header grouping as it provides information about the lower most column cells in the header.

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

          var colModel = $( ".selector" ).pqGrid( "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.

          • 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 },... ]
          


          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 = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "getEditCellData" );


          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 = $( ".selector" ).pqGrid( "getInstance" ).grid;
          
          //any method can be called on grid in an easier to use and read syntax.
          var $tr = grid.getRow( { rowIndx: 2 });
          


          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 = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "getRowsByClass", { cls : 'pq-delete' } );
          
          //get first row having the above class.
          var rowData = arr[0].rowData;
          var rowIndx = arr[0].rowIndx;
          


          getViewPortIndx( )Returns: Object

          In virtual mode, only the visible rows and columns are rendered 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 = $( ".selector" ).pqGrid( "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.
          $( ".selector" ).pqGrid( "goToPage", { page: 3} );


          Group( )

          Returns group instance.

              var Group = grid.Group();
          

          Following methods can be invoked on the group instance.

          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.
          Group.addGroup( "company" );
          
          //add new group at index 1.
          Group.addGroup( "sport", 1 );
          
          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' );
          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' );
          option options ( Object ) updates any number of groupModel options at once after initialization
          //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.
          Group.removeGroup( "company" );

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

          var group = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "hasClass",
              {rowIndx: 2, cls: 'pq-delete'}
          );
          
          //Check whether 3rd row & 'profits' field has class 'pq-delete'.
          var hasClass = $( ".selector" ).pqGrid( "hasClass",
              {rowIndx: 2, dataIndx: 'profits', cls: 'pq-delete'}
          );


          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:

           $( ".selector" ).pqGrid( "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();
                  


          hscrollbar()

          Returns the widget instance of horizontal scrollbar.

          • This method does not accept any arguments.

          Code examples:

          Invoke the method:

           var hscrollbar = $( ".selector" ).pqGrid( "hscrollbar" );


          importWb({ extraCols, extraRows, keepCM, headerRow, 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.
          • headerRow
            Type: Integer
            Number of top rows in worksheet to be treated as grid header.
          • 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:

          $( ".selector" ).pqGrid( "isDirty" );


          isEditableCell( { rowIndx, dataIndx } )Returns: Boolean

          Checks whether a cell can be edited depending upon the options editable and column > editable.

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

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "isEditableCell", { rowIndx: 3, dataIndx: "profits" } );


          isEditableRow( { rowIndx } )Returns: Boolean

          Checks whether a row can be edited depending upon the option editable.

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

          Code examples:

          Invoke the method:

          $( ".selector" ).pqGrid( "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 single cell when either rowData / rowIndx and dataIndx or value if value is passed as parameters.
          It validates a whole row when rowIndx / rowData is passed while dataIndx is not passed.
          It validates collection of rows when data parameter is passed where data is in format of array of row objects similar to dataModel.data.
          When allowInvalid parameter is true, this method adds a class editModel.invalidClass to all invalid cells and returns a collection of all invalid cells.
          When allowInvalid parameter is false 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.
          $( ".selector" ).pqGrid( "isValid", { rowIndx: 3, dataIndx: "profits", value: 12.45 } );
          
          //validate 4th row.
          $( ".selector" ).pqGrid( "isValid", { rowIndx: 3 } );
          //validate a row whose reference (rowData) is known.
          $( ".selector" ).pqGrid( "isValid", { rowData: rowData } );
          


          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 = $( ".selector" ).pqGrid( "loadState" );


          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 = $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "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:

          $( ".selector" ).pqGrid( "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:

          $( ".selector" ).pqGrid( "option", {disabled: true} );


          pageData()Returns: Array

          It gets the data for current page.

            Code examples:

            Invoke the method:

            //get data for current page.
            var data = $( ".selector" ).pqGrid( "pageData" );
            


            pager()

            Returns the widget instance of pager.

            • This method does not accept any arguments.

            Code examples:

            Invoke the method:

             var pager = $( ".selector" ).pqGrid( "pager" );


            paste()

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

              Code examples:

              Invoke the method:

              //paste data.
              $( ".selector" ).pqGrid( "paste" );
              


              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
              $( ".selector" ).pqGrid( "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 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.
              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.
              cut dest (optional) It cuts or empties the contents of cells lying within the range The removed content can be used later on with paste. The removed content is immediately pasted to destination range when dest parameter is specified. e.g., grid.Range( { c1: 0 } ).cut( { dest: { c1: 2 } ) cuts the content of 1st column from left and pastes it onto the 3rd column from left.
              copy dest (optional) 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 from left and pastes it onto the 3rd column from left.
              clear It clears or removes the contents of cells lying within the range.
              count Integer It returns the number of cells within the range.
              merge refresh (Boolean, optional) It merges all the cells lying in the range into a single cell. Added in v3.3.0
              replace range (Object), index (optional) 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 (optional) 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.
              unmerge refresh (optional) It unmerges the top left merged cell if any lying in the range. Added in v3.3.0
              value val (Array, optional) 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:

                


              refresh()

              It's used to refresh the view of grid after update of records, addition of classes, attributes through JSON or other properties that affect the rows in current page or layout of grid e.g., height, width, etc. Being a computational intensive operation, if a number of such options / properties of the grid are being updated, this method should be called only once at the end.

              • This method does not accept any arguments.

              Code examples:

              Invoke the method:

              $( ".selector" ).pqGrid( "refresh" );


              refreshCell( { rowIndw, 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:

              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "refreshDataAndView" );


              refreshHeader()

              Refreshes the column headers.

              • This method does not accept any arguments.

              Code examples:

              Invoke the method:

              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "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.
              $( ".selector" ).pqGrid( "removeAttr",
                  {rowIndx: 2, attr: 'title style'}
              );
              
              //remove title from 'profits' field in 3rd row.
              $( ".selector" ).pqGrid( "removeAttr",
                  {rowIndx: 2, dataIndx: 'profits', attr: 'title'}
              );


              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.
              $( ".selector" ).pqGrid( "removeClass",
                  {rowIndx: 2, cls: 'pq-delete pq-edit'}
              );
              
              //remove a class 'pq-delete' from 'profits' field in 3rd row.
              $( ".selector" ).pqGrid( "removeClass",
                  {rowIndx: 2, dataIndx: 'profits', cls: 'pq-delete'}
              );


              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.
              $( ".selector" ).pqGrid( "removeData",
                  {rowIndx: 2, data: 'name'}
              );
              //Remove all data from 3rd row.
              $( ".selector" ).pqGrid( "removeData",
                  {rowIndx: 2}
              );
              //remove data with key 'delete' & 'valid' from 'profits' field in 3rd row.
              $( ".selector" ).pqGrid( "removeData",
                  {rowIndx: 2, dataIndx: 'profits', data: 'delete valid'}
              );


              reset( { filter, group, sort } )

              Resets the grid to its initial state w.r.t 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.
              $( ".selector" ).pqGrid( "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.
              $( ".selector" ).pqGrid( "rollback" );
              
              //rollback delete operations only.
              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "saveEditCell" );


              saveState( { save} )Returns: String

              Saves the current state of grid as string in browser local storage (optional) and returns the state as string.
              It saves the columns information i.e., column order, widths, etc, sorted columns, paging, filtering & grouping.
              It doesn't save the data of grid.
              The state string returned by this method can even be saved in a database.

              • save
                Type: Boolean
                optional parameter with default value of true. State is not saved in local storage if this is false.

              Code examples:

              Invoke the method:

              //save the current state of grid.
              var state = $( ".selector" ).pqGrid( "saveState" );


              scrollColumn( { colIndx, dataIndx } )

              Scrolls the view horizontally (if required) to make the column visible in pqGrid. Either of colIndx or dataIndx can be provided.

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

              Code examples:

              Invoke the method:

              $( ".selector" ).pqGrid( "scrollColumn", { dataIndx: "lastname" } );


              scrollRow( { rowIndxPage } )

              Scrolls the view vertically (if required) to make the row visible in pqGrid.

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

              Code examples:

              Invoke the method:

              $( ".selector" ).pqGrid( "scrollRow", { rowIndxPage: 30 } );


              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 = $( ".selector" ).pqGrid( "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.
              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} )

              Selects a row or cell depending upon the parameters. It brings the cell or row into viewport and sets focus on it in addition to selecting it. It deselects everything if null is passed as parameter. It doesn't set the focus on row/cell when focus is false.

              • rowIndx
                Type: Integer
                Zero based index of the row.
              • rowIndxPage
                Type: Integer
                Zero based index of the row on current page.
              • colIndx
                Type: Integer
                Zero based index of the column.
              • focus
                Type: Integer
                Optional argument with default value of true.

              Code examples:

              Invoke the method:

              //select 3rd row
              $( ".selector" ).pqGrid( "setSelection", {rowIndx:2} );
              //select cell in 10th row and 4th column.
              $( ".selector" ).pqGrid( "setSelection", {rowIndx: 9,colIndx: 3} );
              //deselect everything.
              $( ".selector" ).pqGrid( "setSelection", null );


              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:

              $( ".selector" ).pqGrid( "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.
              • sorter
                Type: Array
                Optional parameter with default value of sortModel.sorter.

              Code examples:

              Invoke the method:

              $( ".selector" ).pqGrid( "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:

              $( ".selector" ).pqGrid( "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 = $( ".selector" ).pqGrid( "toolbar" );


              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 is considered a parent node.

              Following methods can be invoked on the instance.

              Method Parameters Description
              addNodes nodes(array), parentNode(optional) 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.
                  tree.addNodes( [
                      { id: 100, parentId: 1, ... },
                      { id: 101, parentId: 1, ... },
                      { id: 102, parentId: 100, ... },
                      ...
                  ] );
              
                  tree.addNodes( [
                      { id: 100, ... },
                      { id: 101, ... },
                      ...
                  ], tree.getNode(1) );
              
              checkNodes nodes(array) 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(array)

              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} )
                  ] );
              
              eachChild node, function Recursively calls function on each child of passed node. Also calls function on the passed node.
                  //Example:
                  tree.eachChild( tree.getNode( 1 ), function( node ){
              
                  } );
              
              eachParent node, function 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(array)

              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

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

              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

              returns node when id of the node is known. Node is same as rowData.

                  var node = tree.getNode( id );
              
              getParent node

              returns parent node of specified node.

                  var node = tree.getParent( childnode );
              
              getRoots

              returns all root nodes as an array.

                  var nodes = tree.getRoots( );
              
              isCollapsed node

              Checks whether node is collapsed. Returns boolean value.

              var isCollapsed = tree.isCollapsed( getNode( 1 ) );
              
              isFolder node

              Checks whether node is collapsible & expandable node. Returns boolean value.

              var isFolder = tree.isFolder( getNode( 1 ) );
              
              option options(Object) Update number of options after initialization.
              //Example: create tree after initialization.
              tree.option( {dataIndx: 'name' });
              
              unCheckNodes nodes(array) un checks 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 treegrid = $( ".selector" ).pqGrid( "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:

              
              $( ".selector" ).pqGrid( "updateRow", {
                  rowIndx: 2,
                  newRow: { 'ProductName': 'Cheese', 'UnitPrice': 30 }
              });
              
              //update multiple rows at once.
              $( ".selector" ).pqGrid( "updateRow", {
                  rowList: [
                      { rowIndx: 2, newRow: { 'ProductName': 'Cheese', 'UnitPrice': 30 }},
                      { rowIndx: 5, newRow: { 'ProductName': 'Butter', 'UnitPrice': 25 }}
                  ]
              });
              


              vscrollbar()

              Returns the widget instance of vertical scrollbar.

              • This method does not accept any arguments.

              Code examples:

              Invoke the method:

               var vscrollbar = $( ".selector" ).pqGrid( "vscrollbar" );


              widget()Returns: jQuery

              Returns a jQuery object containing the pqGrid.

              • This method does not accept any arguments.

              Code examples:

              Invoke the method:

              var widget = $( ".selector" ).pqGrid( "widget" );

              Events
              beforeCheck( event, ui )Type: pqGrid:beforeCheck

              Triggered before checkbox is checked or unchecked in a checkbox column or treegrid with checkboxes. It can be canceled by returning false.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.
                • rows
                  Type: Array
                  Collections of row objects having rowIndx, rowData.
                • source
                  Type: String
                  Origin of checkbox event e.g., 'header'.
                • check
                  Type: Boolean
                  state of the checkbox.

              Code examples:

              Initialize the pqGrid with the beforeCheck callback specified:

              $( ".selector" ).pqGrid({
                  beforeCheck: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:beforeCheck event:

              $( ".selector" ).on( "pqGrid:beforeCheck", 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:

              $( ".selector" ).pqGrid({
                  beforeColumnCollapse: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:beforeColumnCollapse event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  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:

              $( ".selector" ).pqGrid({
              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.
                  }
              }
              });


              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:

              $( ".selector" ).pqGrid({
                  beforeGroupExpand: 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 out of them. Return false cancels the paste operation.

              • 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){
              
                              //beforePaste event can be used to modify/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 just before pqGrid is about to expand the row in case of row detail implemented via detailModel. Row expansion can be canceled by returning false.

              • 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 beforeRowExpand callback specified:

              $( ".selector" ).pqGrid({
                  beforeRowExpand: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:beforeRowExpand event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  beforeRowSelect: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:beforeRowSelect event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  beforeSort: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:beforeSort event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  beforeTableView: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:beforeTableView event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  beforeTreeExpand: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:beforeTreeExpand event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  beforeValidate: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:beforeValidate event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  cellBeforeSave: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:cellBeforeSave event:

               $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  cellClick: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:cellClick event:

              $( ".selector" ).on( "pqGrid: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 corresponding to cell.

              Code examples:

              Initialize the pqGrid with the cellDblClick callback specified:

              $( ".selector" ).pqGrid({
                  cellDblClick: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:cellDblClick event:

              $( ".selector" ).on( "pqGrid: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. 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 corresponding to cell.

              Code examples:

              Initialize the pqGrid with the cellKeyDown callback specified:

              $( ".selector" ).pqGrid({
                  cellKeyDown: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:cellKeyDown event:

              $( ".selector" ).on( "pqGrid:cellKeyDown", function( event, ui ) {} );

              cellRightClick( event, ui )Type: pqGrid:cellRightClick

              Triggered when a cell is right clicked.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row corresponding to cell.
                • colIndx
                  Type: Integer
                  Zero based index of the column corresponding to cell.
                • dataIndx
                  Type: Integer or String
                  Zero based index in array or key name in JSON.

              Code examples:

              Initialize the pqGrid with the cellRightClick callback specified:

              $( ".selector" ).pqGrid({
                  cellRightClick: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:cellRightClick event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  cellSave: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:cellSave event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  change: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:change event:

              $( ".selector" ).on( "pqGrid:change", function( event, ui ) {} );

              check( event, ui )Type: pqGrid:check

              Triggered after beforeCheck event is fired and checkbox state is changed in checkbox column or treegrid with checkboxes.

              rows is passed as argument instead of rowData / rowIndx when multiple checkboxes are affected at once e.g., when JSON data is loaded having some cells with true value initially.

              selections are bound to checkboxes by cb.select property.

              • 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.
                • rows
                  Type: Array
                  Collections of row objects having rowIndx, rowData.
                • source
                  Type: String
                  Origin of checkbox event e.g., 'header'.
                • check
                  Type: Boolean
                  state of the checkbox.

              Code examples:

              Initialize the pqGrid with the check callback specified:

              $( ".selector" ).pqGrid({
                  check: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:check event:

              $( ".selector" ).on( "pqGrid:check", 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:

              $( ".selector" ).pqGrid({
                  beforeColumnCollapse: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:columnCollapse event:

              $( ".selector" ).on( "pqGrid:beforeColumnCollapse", 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:

              $( ".selector" ).pqGrid({
                  columnDrag: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:columnDrag event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  columnOrder: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:columnOrder event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  columnResize: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:columnResize event:

              $( ".selector" ).on( "pqGrid:columnResize", function( event, ui ) {} );

              complete( event, ui )Type: pqGrid:complete

              Triggered when grid has completed data binding and view rendering.

              Code examples:

              Initialize the pqGrid with the complete callback specified:

              $( ".selector" ).pqGrid({
                  complete: 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:

              $( ".selector" ).pqGrid({
                  create: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:create event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  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:

              $( ".selector" ).pqGrid({
                  editorBegin: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:editorBegin event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  editorBlur: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:editorBlur event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  editorEnd: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:editorEnd event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  editorFocus: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:editorFocus event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  editorKeyDown: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:editorKeyDown event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  editorKeyPress: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:editorKeyPress event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  editorKeyUp: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:editorKeyUp event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  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:

              $( ".selector" ).pqGrid({
                  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:

              $( ".selector" ).pqGrid({
                  group: function( event, ui ) {}
              });


              groupChange( event, ui )Type: pqGrid:groupChange

              Added in 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:

              $( ".selector" ).pqGrid({
                  groupChange: 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:

              $( ".selector" ).pqGrid({
                  headerCellClick: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:headerCellClick event:

              $( ".selector" ).on( "pqGrid:headerCellClick", 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:

              $( ".selector" ).pqGrid({
                  history: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:history event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  load: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:load event:

              $( ".selector" ).on( "pqGrid:load", 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:

              $( ".selector" ).pqGrid({
                  refresh: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:refresh event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  refreshHeader: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:refreshHeader event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  refreshRow: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:refreshRow event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  render: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:render event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  rowClick: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:rowClick event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  rowDblClick: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:rowDblClick event:

              $( ".selector" ).on( "pqGrid:rowDblClick", function( event, ui ) {} );

              rowRightClick( event, ui )Type: pqGrid:rowRightClick

              Triggered when a row is right clicked.

              • event
                Type: Event
              • ui
                Type: Object
                • rowData
                  Type: Object
                  Reference to 1-dimensional array or object representing row data.
                • rowIndx
                  Type: Integer
                  Zero based index of the row.

              Code examples:

              Initialize the pqGrid with the rowRightClick callback specified:

              $( ".selector" ).pqGrid({
                  rowRightClick: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:rowRightClick event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  rowSelect: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:rowSelect event:

              $( ".selector" ).on( "pqGrid:rowSelect", 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:

              $( ".selector" ).pqGrid({
                  selectChange: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:selectChange event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  selectChange: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:selectEnd event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  sort: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:sort event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  toggle: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:toggle event:

              $( ".selector" ).on( "pqGrid: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:

              $( ".selector" ).pqGrid({
                  treeExpand: function( event, ui ) {}
              });

              Bind an event listener to the pqGrid:treeExpand event:

              $( ".selector" ).on( "pqGrid: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.
              • column
                Type: Object
                current column

              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
              agg.all = function(arr, col){
                  return "Sum: " + format( agg.sum(arr, col) )
                      +", Max: " + format( agg.max(arr, col) )
                      +", Min: " + format( agg.min(arr, col) );
              };
              


              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( worksheet | worksheetRow, fn: ((cell: gridT.worksheetCell) => void ) )

              Iterates through each cell in a worksheet or a row and invokes callback function on them.

              • worksheet
                Type: PlainObject
                worksheet
              • fn
                Type: Function
                Callback function which receives each cell as argument.

              Code examples:

              Invoke the method:

              pq.excel.eachCell(sheet, function( cell ){
              	//do something with each cell.
              });
              


              importXl({ file, content, sheets, type, url }, fn: (wb: gridT.workbook) => void )

              Imports xlsx file into a json workbook. 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;


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