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

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

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

    

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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.

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

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

• listener = { 'name of event' : function( evt, ui ){ } }
• listener = 'name of event'
• listener = function( evt, ui ){ }

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

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

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

By default a column is groupable except when this option is set to false.

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

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

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

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 can't be dragged when this is true.

Any draggable column can't be dropped on this column when this option is true.

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.

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

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.

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

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

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

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

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

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

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.

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

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

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

Determines display of vertical borders of the columns.

Code examples:

Initialize the pqGrid with columnBorders option specified.

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

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

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

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

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

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

}});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

It contains paging properties. Localization strings for pager can also be passed to this option.

Following are the pageModel sub-options:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

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.

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.

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

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

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

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

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.

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.

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

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

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

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.

checkbox: function( node ){
    if( node.name.indexOf( "php" ) >= 0){
        return true;
    }
}

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

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

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

Code examples:

Initialize the pqGrid with treeModel option specified.

$( ".selector" ).pqGrid({ treeModel : { dataIndx: 'name' } });

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

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

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

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

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

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

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

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

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