It configures the animation of cell transitions during sorting, filtering, row expansion, column resize, reorder, etc in the grid.

on It enables / disables the animations.

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

A blank column is automatically appended when right key is pressed on the rightmost visible column of grid.

A blank row is automatically appended when down key is pressed on the last visible row of grid.

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

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

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

autoRowHeight event is fired when auto height is complete.

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

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

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

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.

• collapsed

  • Type: boolean
  • Description: Set or get the initial collapsed or expanded state of the grid. In collapsed state, only the top few pixels (title bar) of the grid are visible.

• css

  • Type: object
  • Default: { zIndex: 1000 }
  • Description: An object of CSS rules applied to the grid in full-screen/document state.

• cssCollapse

  • Type: object
  • Default: { height: "2.3em", width: '15em' }
  • Description:(v11.1.0) An object of CSS rules applied to the grid in collapsed state.

• on

  • Type: boolean
  • Default: true
  • Description: Set or get the visibility of the collapsible icon ⏵ in the title bar.

• toggle

  • Type: boolean
  • Default: true
  • Description: Set or get the visibility of the full-screen icon ⛶ in the title bar.

• toggled

  • Type: boolean
  • Description: Get or set the initial full-screen state of the grid.
    When true, the grid occupies the full document height and width.
    When false or undefined, the grid is displayed normally.
    After initialization, use grid.toggle() to switch between full-screen and normal states.

Defines the columns in the grid. It is an array of objects, where each object represents a column.

Notes:

• For local data, the grid can autogenerate colModel from the first row if colModel is not provided.
• If columns are added, removed, or re-arranged, call refreshCM to update the grid.
• If properties of a column are updated, refreshCM is not required.

Defines the horizontal alignment of text in a column.

Possible values: left, right, center

• If the value is undefined and the column dataType is numeric ('float' or 'integer'), the grid automatically sets align = 'right'.
• (v7.0.0+) Individual cells can override this using rowData.pq_cellprop[dataIndx].align.

(v7.0.0) Defines html attributes for the column header cell, used for setting title.

It configures properties of a checkbox column.
Checkbox columns can be created in 2 different ways

Checkbox columns can be programmatically manipulated using Checkbox method.

The following events fire in this order when checkboxes are checked/unchecked:
beforeCheck → beforeValidate → change → rowSelect → check
Note: rowSelect fires only when checkboxes are bound to row selections.

(v9.1.0)
By default, beforeValidate and change events are not fired, and history is not saved when:

• there is a header checkbox, or
• checkboxes are bound to row selections.

This behavior can be changed using cb.history and cb.useTxn options.

Checkbox Column Options

• all

  • Type: boolean
  • Default: false
  • Description:
    When true, the header checkbox affects all rows on all pages;
    when false, it affects only the current page.

• check, uncheck

  • Type: boolean, number, string
  • Default: true, false
  • Description:
    Cell value becomes true or false depending on checkbox state.
    Can be mapped to custom values, e.g.:
    • check: "YES"
    • uncheck: "NO"

• header

  • Type: boolean
  • Default: false
  • Description:
    Shows a checkbox in the column header.
    You may override the default header checkbox using column.title to add a custom label.

• history

  • Type: boolean
  • Description:
    (v9.1.0) Explicitly enable storing checkbox history for undo/redo.
    Works only when change events are enabled.

• maxCheck

  • Type: integer
  • Description:
    Maximum number of allowed checked checkboxes. Should not be used with header checkbox.

• select

  • Type: boolean
  • Default: false
  • Description:
    When true, row selection becomes bound to checkbox state.

• useTxn

  • Type: boolean
  • Description:
    Enable transactions and fire beforeValidate and change events.

dataIndx of another column where checkbox values are stored It's used along with type: 'checkbox'.

Class to be assigned to whole column including header.

(v8.7.0) Class is assigned to header filter cell.

Class is assigned to header cell. This class is also assigned to header filter cell of same column previous to v8.7.0

📐 Collapsible Grouped Columns

A grouped parent column can be made collapsible by defining the collapsible property for it. When collapsible, an icon is displayed next to the column's title, allowing users to toggle between the collapsed and expanded states.

The collapsible property is an object that controls the initial state and visible child columns when collapsed:

• on (Initial State)

  • If true, the column group starts in the collapsed state.
  • If false or undefined, the column group starts in the expanded state (default).

• last (Visibility in Collapsed State)

  • If true, only the last child column within the group remains visible when the group is collapsed.
  • If false or undefined, only the first child column within the group remains visible when the group is collapsed (default).
  • If null (=== null), the visibility of each child column is instead determined by its individual column.showIfOpen property, relative to the parent's open/closed state.

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.

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

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.

This option tells grid how to treat column's data while copy/paste, editing, local sorting, local filtering and validations. Possible values are bool, date, float, integer, string or stringi.

• bool is used for boolean values. It can be true, false, null or undefined.
• date is used for date or datetime fields. It should be valid javascript recognizable date in either of these formats:
  • mm/dd/yy e.g., 07/04/1776
  • ISO 8601 format yy-mm-ddThh:mm:ss e.g., 1776-07-04T08:20:01 or 1776-07-04
• float is used for numbers with decimal places like currency, etc.
• html is used for html text.
• integer is used for integers.
• string is the used for text. It escapes html entities in text so as to make it safe for rendering.
• stringi is similar to string in all aspects except that it's used for case insensitive sorting.

A callback function to reverse a formatted value. It's the counterpart of column.format callback and is required by the grid in filtering UI.

When true, it prevents addition of column via drag n drop in toolPanel -> aggregates panel.

When true, it prevents addition of column via drag n drop in toolPanel -> row grouping panel and in grouping header toolbar. This option replaces column.groupable option.

When true, it prevents addition of column via drag n drop in toolPanel -> column pivot panel.

Set it to false to disable editing for the whole column or implement a callback function to return true or false selectively for different rows.

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

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

It's an object defining the editing behaviour for a column and it overrides the global editModel properties.

Column Editor Properties

Defines inbuilt or custom editor properties for a grid column.
Overrides global editor properties. Can be an object or a callback returning these properties.

• General Behavior

  • Editor not displayed if set to false or callback returns false.
  • Useful for special column types (e.g., checkbox) where cell renderer acts as editor.
  • Can be a callback returning editor properties.

• type

  • Values: textbox, textarea, contenteditable, select, checkbox, callback, string, or null.
  • Callback variant receives cell coordinates and returns control name (e.g., textbox, select).
  • Enables different editors for different rows in the same column.

• init

  • Type: callback (evt, ui) => void
  • Converts/initializes simple HTML controls (textbox, select) into custom editors (e.g., jQueryUI datepicker, autocomplete).
  • Receives ui argument with cell context.
  • Since v8.4.0, only init can be used to create custom editors.

• prepend

  • Object of value-label pairs prepended to select list options.
  • Example: { '' : 'Select an option' } or { 0 : 'a', 1 : 'b' }.
  • Multiple pairs may appear in random order at the top.

• options

  • Array of options for select type editor.
  • Formats:
    • Array of strings: [ "value1", "value2" ]
    • Array of associative pairs: [ { "CB01": "Mark" }, { "CB02": "Robert" } ]
    • JSON objects: [ { customerid: "CB01", contactName: "Mark" }, ... ]
      • Requires labelIndx and valueIndx.
  • Supports disabled (pq_disabled: true) and preselected (pq_selected: true) options.
  • Can also be a callback returning options.

• labelIndx / valueIndx

  • Used with JSON options to bind label/value fields to grid rowData.
  • Example: valueIndx = "customerid", labelIndx = "contactName".

• groupIndx

  • Enables grouping via <optgroup> in select lists.
  • Example: groupIndx = "country" with valueIndx = labelIndx = "region".

• dataMap

  • Array of extra field names to bind from JSON options to select list and rowData.
  • Example: [ "QuantityPerUnit", "UnitPrice", "UnitsInStock", "Discontinued" ].

• mapIndices

  • Maps JSON field names to grid’s dataIndx when they differ.
  • Example: { customerid: "customerID", contactName: "contactname" }.

• getData

  • Optional callback returning custom data/value from editor.
  • Receives ui argument.
  • Returned value saved in rowData[dataIndx].
  • Example: ui.$cell.find("select").val() or selected text.

• cls

  • Injects CSS classes into editor control.
  • Example: cls: "green yellow".
  • Callback variant supported for row-specific classes.

• style

  • Adds inline CSS styles.
  • Example: style: "font-style:italic;".
  • Callback variant supported.

• attr

  • Adds HTML attributes to editor control.
  • Examples:
    • attr: "multiple" for multi-select.
    • attr: "maxlength=5" for input length restriction.
  • Callback variant supported.

• Change Log

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

UI Arguments (for callbacks)

These are the ui arguments passed to editor-related callbacks (init, getData, etc.):

• $cell

  • Type: jQuery
  • jQuery wrapper on container div in which to append the custom editor.

• rowData

  • Type: Array | PlainObject
  • Reference to row data (1D array or object).

• rowIndx

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

• dataIndx

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

• colIndx

  • Type: Integer
  • Zero-based index of the column.

Rendered cell values ( otherwise raw cell data ) in this column are included in the exported data when this option is true.

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

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

• attr (string)
  Adds HTML attributes to the control.

• conditionList (Array)
  Show only the specified filter conditions in the dropdown.
  Example:
  conditionList: ['begin', 'end', 'range']
  If not set, all built-in and custom conditions valid for the column’s data type are shown.

• conditionExclude (Array)
  Hide the specified filter conditions from the dropdown.
  Example:
  conditionExclude: ['between', 'regexp']

• conditions (Object)
  Used to override inbuilt or custom condition properties for current column filter.

  //override range compare function.
  conditions: {
      range:{
          //override compare property of range condition.
          compare: (cellData, value, value2) => boolean
      }
  }
  

• cls (string)
  Inject CSS class(es) to the control.

• crules (Array)
  Used to define multiple filters to a single column.

  crules: [
      { condition: 'contain', value: 'a' },
      { condition: 'end', value: 'b' },
      ...
  ]
  

  Sub-options of crules:

  • condition (string)
    Filter condition: contain, notcontain, begin, end, equal, notequal,
    empty, notempty, less, great, between, range, regexp,
    notbegin, notend, lte, gte.

  • value (any)
    Value to match against.
    Array for range, regex for regexp, ignored for empty/notempty.

  • value2 (any)
    Applicable only for between condition.

• diExtra (Array)
  Extra columns whose data is loaded into filter dropdowns.

  diExtra: [ 'code' ]
  

• dpOptions (Object)
  Options for jQuery UI datepicker.

  dpOptions: {
      ...
  }
  

• dpOptions2 (Object)
  Same as dpOptions, but for 2nd input (e.g., between filter).

• format (string | function)
  Overrides column.format used by jQuery UI datepicker & filter dropdown.

• gridOptions (Object)
  Adds properties to dropdown grid.

  gridOptions: {
      numberCell: {show: false}
  }
  

• groupIndx (string)
  Field name for grouping range condition options.
  Example data:

  [
      { country: 'Japan', region: 'Hokkaidō' },
      { country: 'Japan', region: 'Chūbu' },
      { country: 'UK', region: 'London' },
      { country: 'UK', region: 'Yorkshire' },
      ...
  ]
  

  valueIndx = labelIndx = "region", groupIndx = "country"

• init (Function)
  Callback to custom-initialize filter control. Return true to skip grid initialization.
  Arguments (ui):

  • dataIndx
  • column
  • indx
  • $cell
  • $editor

• listener (object | function | string)
  Event binding for triggering filtering.
  Examples:

  • { 'keyup': function(evt, ui){} }
  • 'change'
  • function(evt, ui){}
    Supports native & custom events, including timeout.

  ui contains:

  • dataIndx
  • column
  • value
  • value2

• maxCheck (integer)
  Max allowed checked checkboxes.

• menuIcon (boolean)
  Controls display of filter menu icon.

• mode (string)
  Defines boolean mode between multiple conditions. Default: AND.

• options (Array | function)
  Options for range filter. Supports:

  • ['Argentina', 'Austria', ...]
  • [ { a: 'Apple' }, { b: 'Bat' }, ... ]
  • [ { ShipCountry: 'Argentina' }, ... ]

  Can be a function returning any of above.
  If defined, grid uses this instead of auto-generating list.

• selectGridCreated (Function)
  Callback when dropdown grid is initialized.
  Arguments: ui: {grid, column}

• selectGridObj (Function)
  Callback before dropdown grid is created.
  Arguments: ui: {obj, column}

• style (string)
  Inline CSS for control.

• title (function)
  Returns title for filter cell dropdowns.
  Signature: (values, column) => string

Custom filter condition can be defined by extending pq.filter.conditions.

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

This is a callback function that may return same properties as column.filter dynamically.

(v10.0.0) It works same as global fmtDateEdit option but specific to the column.

(v10.0.0) It works same as global fmtDateFilter option but specific to the column.

(v10.0.0) It works same as global fmtNumberEdit option but specific to the column.

(v10.0.0) It works same as global fmtNumberFilter option but specific to the column.

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

• If a callback function is used, then the corresponding column.deFormat must also be provided.
• If a string format is used, then the cell data and the format are exported separately.

Notes:

• Use same Excel formatting rules for numbers and datetime values
• When using a string format, Excel receives the raw value + format rule.
• When using a callback, the formatted value is exported to Excel as a string.

String formats follow the same rules as Excel.

To define number formats, you can specify up to four sections, separated by semicolons (;):

1. Positive numbers
2. Negative numbers
3. Zero values
4. Text

Examples — Number Formats

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

Examples — Datetime Formats

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

See Excel format documentation for more examples on numbers, currency, scientific, and datetime formats: https://support.microsoft.com/en-us/office/number-format-codes-5026bbd6-04bc-48cd-bf33-80f18b4eae68

This option sets the format of the date values send as parameters during remote filtering.

This option is removed in v4.0.0, use global formulas option instead of this.

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.

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

Column is hidden when this option is true. To dynamically show/hide the columns, Columns().hide() method is recommended.

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

Maximum possible width of the column in pixels or in percent of width of the grid. Column width i.e., column.width, if set explicitly or computed implicitly more than value of this property is ignored.

Used to display or override display of header menu icon for this column.

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

Grouped column is collapsed in header menu when this is true.

Column is disabled in header menu when this is true, so checkbox state can't be changed.

column is hidden in header menu when this is true.

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

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.

(v8.0.0) When set to false, it skips paste of data on a column

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

This is a callback function to customize sorting of pivot columns

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

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

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

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

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

Callback arguments ui

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

It's a callback function to control rendering of whole cell, that returns any of the below:

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

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

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

Callback arguments ui

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

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

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

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

Column is resizable depending upon the value of this option.

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

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

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

(v9.0.0) This option when set to true prevents column from being exported. This option can also be used for grouped columns.

(v9.1.0) This option skips focus on column cells while key navigation with arrow and tab keys.

Set it to false to disable sorting for a column.

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.

(v7.0.0) Defines css style for all cells in the column. Individual cells can override the column style by rowData.pq_cellstyle[ dataIndx ]]]

(v7.0.0) Defines css style for the column header cell only.

Column Summary Configuration

This object is used to configure summary rows for a column, typically utilized with row grouping, grand summary rows (bottom of the grid), and tree grids.

Sub-options:

• type

  • Description: Specifies the aggregate function to calculate the summary value.
  • Value:
    • A string representing a predefined aggregate function (e.g., "avg", "count", "min", "max", "sum").
    • or the name of a custom aggregate function.
  • For row grouping, you can specify different aggregates for different columns within the summary object using the format dataIndx: "aggregate function".

• edit

  • Type: Boolean
  • Description: Controls the editability of the summary cell in this specific column.
  • Usage: It can be used to override the global editability setting for summary fields defined by groupModel.summaryEdit.

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

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

Hide this column in toolPanel.

Type of column. It has 2 possible values: 'checkbox' and 'detail'.

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

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

Please check column.cb for complementary properties.

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

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

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

Wraps checkbox cell of ordinary columns, row grouping or treegrid within a label.

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

An array of objects, where each object defines a single validation or warning rule for a column or an individual cell. These rules are applied during editing or copy-paste operations.

Notes

• Validations other than nonEmpty run only when the cell value is defined (non-null).
• Global validation options (icon, cls, style from options.validation) can be overridden per column.
• Global warning options from options.warning can also be overridden at the column level.

Sub-options

• type
  Specifies the type of validation. Supported values:

  • minLen – minimum allowed string length
  • maxLen – maximum allowed string length
  • gt – greater than
  • gte – greater than or equal to
  • lt – less than
  • lte – less than or equal to
  • regexp – matches a regular expression
  • nonEmpty – disallows empty (""), null, or undefined
  • neq – not equal to a given value
  • custom callback function

  Callback signature:

  function rule({ column, value, rowData, msg }) {
      // modify msg by reference if needed
  }
  

• value
  The reference value used for the validation.

• msg
  The message displayed in the tooltip when validation or warning is triggered.

• warn
  Set warn: true to mark the rule as a warning instead of an error.

(v7.0.0) It defines vertical alignment of text in the columns. Possible values are "top", "center" and "bottom".

Individual cells can override this with rowData.pq\_cellprop[ dataIndx ].valign

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.

Draws vertical borders around all the columns.

This option applies any column property to all the columns by defining them at a single place.

Tip: Use getter properties to apply the property values conditionally.

Properties defined in this option are:

1. Deep cloned ( in case of nested properties ) while copying to all columns.
2. Not copied to a column which already has defined value for that property, so a columnTemplate property can be overriden in individual columns.
3. Properties are copied to lowermost or innermost data bound columns only for nested columns in colModel.
4. colModel property can't be set in this option.

Context Menu

Defines context menu on body cells, number cells, header cells, tabs, toolbar, etc

• on

  • Type: boolean
  • Description: Turns on/off the context menu.

• preInit

  • Type: (evt: any, ui: any) => void
  • Description:
    • Callback called before every initialization/opening of context menu.
    • Default browser context menu opens if this callback returns false.
    • Default implementation returns false when ctrl or meta key is pressed.
    • evt: type is context event.
    • ui: provides detailed information about the element on which context menu is activated.

• init

  • Type: (evt: any, ui: any) => void
  • Description:
    • Callback called during every initialization/opening of context menu.
    • Default implementation adds focus to the cell on which context menu is activated.
    • evt: type is context event.
    • ui: provides detailed information about the element on which context menu is activated.

• items

  • Type: itemX[] | ((evt, ui) => itemX[])
  • ui fields:
    • $td?: jQuery (body cell)
    • $th?: jQuery (header cell)
    • colIndx: number (-1 for number cell)
    • rowIndx: number
    • rowData: any
    • dataIndx: string (undefined for group columns)
    • column: object
    • filterRow?: boolean (true for header filter row)
  • itemX = citem | string
  • citem structure:
    • cls?: string (CSS class)
    • disabled?: boolean
    • icon?: string
    • action?: ((evt, ui, citem: citem) => boolean | void)
    • name: string (title of the item)
    • shortcut?: string (for display only)
    • style?: string
    • subItems?: Array<itemX> (nested items)
    • tooltip?: string
  • Description:
    • Array of items or callback returning array of items.
    • Items can be objects or predefined string 'separator'.
    • Context menu can be built dynamically via callback.
    • Browser context menu opens if callback returns empty array.
    • Context menu closes by default when an item with action is clicked (preventable by returning false).
    • evt: type is context event.
    • ui: provides detailed information about the element.
    • Works as fallback when cellItems, headItems, imgItems, numItems are not defined.

• bodyItems (v8.7.0)

  • Type: itemX[] | ((evt, ui) => itemX[])
  • Description: Menu items for empty body region. Same structure as items.

• cellItems

  • Type: itemX[] | ((evt, ui) => itemX[])
  • Description: Menu items for body cells. Same structure as items.

• headItems

  • Type: itemX[] | ((evt, ui) => itemX[])
  • Description: Menu items for header cells. Same structure as items.

• imgItems

  • Type: itemX[] | ((evt, ui) => itemX[])
  • Description: Menu items for images. Same structure as items.

• miscItems

  • Type: itemX[] | ((evt, ui) => itemX[])
  • Description: Menu items for miscellaneous grid elements (toolbar, grouping toolbar, title, footer, etc.). Same structure as items.

• numItems

  • Type: itemX[] | ((evt, ui) => itemX[])
  • Description: Menu items for number cells. Same structure as items.

• tabItems (v8.0.0)

  • Type: itemX[] | ((evt, ui) => itemX[])
  • Description: Menu items for tabs. Same structure as items.

It controls the behavior when data is copied from grid with shortcut keys or with API.

• render: When render is true, formatted or rendered cells are copied instead of raw data. column.exportRender overrides this option for individual columns.
• header: (v7.3.0) When true, it includes the header cells in copied data. It can be overridden by header parameter of Range.copy() method.
• plainFmt: (v11.0.0) By default Clipboard carries both rich and plain format. When this option is true, only plain format is carried by clipboard.

It contains information about the data in array format and various other properties related to data. It's mandatory to pass dataModel to grid 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.

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.

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.

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 grid. Remote requests use dataModel.url / dataModel.getUrl and dataModel.getData options to feed data to grid. 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.

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

This option is relevant only when dataModel.location is remote. Callback handler for Ajax error.

This option applies when dataModel.location is remote. It's a callback to process the remote data for the grid.

Examples:

• if remote data is in any other format e.g. XML then this callback can convert it into 2 dimensional array or array of objects.
• if remote data contains strings for number columns, it can be parsed to numbers.

In case of remote paging, this callback returns an object containing data (data for the grid), curPage ( current page ) and totalRecords

In case of no paging, this callback returns an object containing data (data for the grid) only.

This is a callback function that returns the URL and data for GET or POST requests.

Note:

• This option applies only when dataModel.location is remote or lazy.
• If this option is specified, dataModel.url will be ignored.
• It overrides all fields sent by the grid for remote requests. If you need to append custom parameters to the fields already sent by the grid (which is common), use dataModel.postData instead.

Specifies the dataModel.location of the grid. Possible values are local, remote, or lazy.

local

The grid reads data from dataModel.data, which must be set manually. “Local” refers to the grid’s perspective — the data itself can still be loaded from a server via AJAX. Supports only local filtering, paging, and sorting.

remote

The grid automatically sends and receives data from the server. It becomes temporarily unresponsive while loading. Either dataModel.url or dataModel.getUrl must be specified. Supports both local and remote filtering, paging, and sorting.

lazy

The grid loads data from the server in batches, keeping it responsive during background loading. Recommended for large datasets that take time to load in a single request. Requires dataModel.url and remote paging implementation on the server. Supports both local and remote filtering and sorting.

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

Applicable when dataModel.location is remote or lazy. Use this option to include any custom JSON data that should be sent to the server. The data is serialized and appended to the request payload sent by the grid. When defined as a callback, it receives an object { colModel: colModel, dataModel: dataModel } as its parameter. For example, if postData = { key1: value1, key2: value2 }, it is converted to the query string key1=value1&key2=value2.

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

(v8.6.0) When true, progress bar for lazy loading data in one tab is displayed across all tabs.

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

Applicable when dataModel.location is remote or lazy.
Specifies the absolute or relative URL used by the grid to fetch remote data and send requests (GET or POST) for sorting, paging, filtering, etc.
Either dataModel.getUrl or dataModel.url must be defined — getUrl takes precedence if both are provided.

Used to define row details or nested grids within the main grid.

When frozen columns are enabled, the detail view is rendered in the unfrozen pane.

Sub-options:

• cache (Boolean, default: true)
  Determines whether the detail view is cached.
  When set to false, expanding or collapsing a row refreshes its detail data and view.

• hasChild (Function, default: undefined)
  (v9.1.0)
  Callback that receives rowData and returns a boolean indicating whether the row has a child or detail view.

• init (Function, default: undefined)
  Callback that receives:

  { rowData: rowData }
  

  and returns the detail view as a jQuery object.

• collapseIcon (String, default: "ui-icon-triangle-1-e")
  Icon displayed when a row is collapsed.

• expandIcon (String, default: "ui-icon-triangle-1-se")
  Icon displayed when a row is expanded.

• header (Boolean, default: undefined)
  (v8.7.0)
  Displays an icon in the header cell to expand or collapse all detail views simultaneously.

• height (Integer or String, default: "auto")
  Height of the detail row.
  Can be a fixed number or "auto" to match content height (v8.0.0).

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

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

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.

The grid as a whole becomes draggable if this option is set to true. Please check dragModel if you are looking for draggability of individual rows.

Draggable Rows Configuration

Configures properties for draggable rows in the grid.

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

Options

• on

  • Type: boolean
  • Description: Makes grid rows draggable when true.

• afterDrop

  • Type: (evt: any, uiDrop: any) => void
  • Description: Called when drag-and-drop occurs between different grids, just after dropModel.drop callback is called.
    No default implementation.

• beforeDrop

  • Type: (evt: any, uiDrop: any) => void
  • Description: Called when drag-and-drop occurs between different grids, just before dropModel.drop callback is called.
    Default implementation removes nodes from the draggable grid, treegrid, or row groupings.

• clsDnD

  • Type: string
  • Default: pq-dnd
  • Description: Class assigned to draggable control in this grid, used by droppable controls to decide acceptance.

• clsNode (v7.4.0)

  • Type: string
  • Default: pq-dnd-drag
  • Description: Class assigned to dragged row(s).

• contentHelper

  • Type: (diHelper: Array<string>, dragItems: Array<any>) => string
  • Example:

    function(diHelper, dragNodes){
        var rd = dragNodes[0], len = dragNodes.length;
        return diHelper.map(function(di){ return rd[di] }).join(", ") +
            (len > 1 ? " ( " + dragNodes.length + " )" : "");
    }
    

  • Description: Callback function to return content of helper.

• cssHelper

  • Type: object
  • Default:

    {
        opacity: 0.7,
        position: 'absolute',
        height: 25,
        width: 200,
        overflow: 'hidden',
        background: '#fff',
        border: '1px solid',
        boxShadow: '4px 4px 2px #aaaaaa',
        zIndex: 1001
    }
    

  • Description: CSS properties applied to draggable helper.

• diDrag

  • Type: number | string
  • Default: -1
  • Description: dataIndx of column which displays the draggable UI.
    Number column is used when value is -1.

• diHelper

  • Type: Array
  • Description: Array of dataIndx values of columns whose values are displayed in the draggable helper.

• dragNodes

  • Type: (rd: any, evt: any) => Array<any>
  • Example:

    function(rd){
        return [ rd ];
    }
    

  • Description: Callback function to return array of dragged nodes.

• iconAccept

  • Type: string
  • Default: 'ui-icon ui-icon-check'
  • Description: Class of the accept icon displayed in helper.

• iconReject

  • Type: string
  • Default: 'ui-icon ui-icon-cancel'
  • Description: Class of the reject icon displayed in helper.

• isDraggable

  • Type: (ui: any) => boolean
  • Example ui object:

    {
        rowIndx: number,
        rowData: any,
        colIndx: number
    }
    

  • Description: Callback called for every row in the viewport to decide individual draggability.

• options

  • Type: object
  • Description: Options taken from jQueryUI draggable API (some may not work).

• tmplDrag

  • Type: string
  • Default:

    <span class='ui-icon ui-icon-grip-dotted-vertical pq-drag-handle'
          style='cursor:move;vertical-align:text-bottom;touch-action:none;float:left;'>
    </span>
    

  • Description: Markup template for drag UI in cells of draggable rows.

• tmplDragN

  • Type: string
  • Default:

    <span class='ui-icon ui-icon-grip-dotted-vertical pq-drag-handle'
          style='cursor:move;position:absolute;left:2px;top:4px;'>
    </span>
    

  • Description: Markup template for drag UI in number cells of draggable rows.

• tmplHelper

  • Type: string
  • Default:

    <div class='pq-border-0 pq-grid-cell'>
        <span class='pq-icon' style='vertical-align:text-bottom;margin:0 5px;'></span>
        <span></span>
    </div>
    

  • Description: Markup template for drag helper.

Drop Properties Configuration

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

Options

• on: boolean

  • Description: Makes a grid droppable when true.

• accept: string`

  • Default: '.pq-dnd'
  • Description: CSS selector of accepted draggable components.
    Multiple selectors can be defined by separating them with commas, e.g. '.cls1,.cls2,.cls3'.

• clsParent: string

  • Default: pq-dnd-parent
  • Description: CSS class assigned to potential parent of the dragged node.

• divider: integer

  • Description: Creates a vertical divider line in the treegrid to differentiate between potential parents depending on the dragged node helper’s position (left or right of the line).

• isDroppable: (evt: any, ui: any) => (void | boolean)

  • ui object fields:

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

  • Description:
    • By default, all rows in the grid accept draggable items.
    • This callback is called when draggable items are moved over different rows.
    • Returning false rejects the draggable items.
    • evt is derived from the jQueryUI draggable drag event.
    • ui provides grid‑specific fields in addition to draggable event fields.
    • rowIndx and rowData give info about the row being dragged over.
    • ratioY() returns a value between 0 and 1 depending on proximity to the top or bottom of the row.
    • Must check availability of row fields (they are undefined when dragging over empty space or when grid has no rows).
    • Draggable object reference can be obtained from ui.helper.data('Drag').
    • Row info can be obtained from Drag.getUI(). See Drag API for details.

• drop: (evt: any, ui: any) => void

  • ui object fields:

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

  • Description:
    • Called when accepted draggable items are finally dropped.
    • evt is derived from the jQueryUI droppable drop event.
    • ui provides grid‑specific fields in addition to droppable event fields.
    • rowIndx and rowData give info about the row being dropped onto.
    • ratioY() returns a value between 0 and 1 depending on proximity to top or bottom of the row.
    • Row fields are undefined when dropped over empty space or when grid has no rows.
    • Default implementation: Handles common DnD scenarios within/between grids, grouped rows, and treegrid using moveNodes.
    • You can override this callback with your own implementation.
    • Draggable object reference can be obtained from ui.helper.data('Drag').
    • Row info can be obtained from Drag.getUI(). See Drag API for details.

• options: object

  • Description: Options taken from jQueryUI droppable API (note: some options may not work).

Editing can be disabled for all columns by setting it to false or a callback function can be implemented.

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

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

Configures key navigation and other editor properties.

Options

• addDisableCls

  • Type: Boolean
  • Default: (empty)
  • Description:
    • Added in v7.0.0.
    • When true, adds the pq-cell-disable CSS class to disabled cells.

• allowInvalid

  • Type: Boolean
  • Default: false
  • Description:
    • When true, invalid values are not rejected.
    • Instead, the class invalidClass is added to the cell.

• clicksToEdit

  • Type: Integer
  • Default: 2
  • Description:
    • Number of clicks required to enter edit mode.
    • 1 = single click, 2 = double click.

• filterKeys

  • Type: Boolean
  • Default: true
  • Description: Prevents non-digit characters in float and integer dataType columns.

• invalidClass

  • Type: String
  • Default: 'pq-cell-red-tr pq-has-tooltip'
  • Description: Class added when allowInvalid is true and validation fails.

• keyUpDown

  • Type: Boolean
  • Default: (empty)
  • Description:
    • Up/down arrow keys move focus to the cell above or below while editing.
    • v7.3.0 change: default changed from true to undefined.

• onBlur

  • Type: String
  • Default: 'validate'
  • Description: Controls behavior when the editor loses focus.
    • validate: stays in edit mode until validation succeeds.
    • save: saves the value if valid, exits edit mode even if invalid.
    • "": does nothing; editor stays in edit mode.

• onSave

  • Type: String
  • Default: 'nextFocus'
  • Description: Cell navigation when the save key is pressed in editor. Values:
    • nextEdit: edits next editable cell (right → down).
    • nextFocus: focuses the next cell to the right (or left with Shift).
    • downFocus (v7.3.0): focuses the cell below (or above with Shift).
    • "": focus stays on the same cell.

• onTab

  • Type: String
  • Default: 'nextFocus'
  • Description: Cell navigation when Tab is pressed in editor; uses the same values as onSave.

• pressToEdit

  • Type: Boolean
  • Default: true
  • Description: Starts edit mode when any input key is pressed while the cell is focused.

• saveKey

  • Type: Integer
  • Default: $.ui.keyCode.ENTER
  • Description:
    • Key that triggers save, in addition to Tab.
    • Alt+Enter inserts line breaks in multiline editors (e.g., textarea).
    • v7.5.0: Enter alone can create line breaks in multiline editors if this option is set to any value other than $.ui.keyCode.ENTER.

• warnClass

  • Type: String
  • Default: 'pq-cell-blue-tr pq-has-tooltip'
  • Description: Class added when a cell fails a warning-level validation.

Note:
filterKeys, keyUpDown, and saveKey can be overridden per column using column.editModel.

It provides the editor properties for the whole grid.

Options

• attr

  • Type: String
  • Default: (empty)
  • Description: Adds an HTML attribute to the editor.

• cls

  • Type: String
  • Default: (empty)
  • Description: Adds a CSS class to the editor.

• getData

  • Type: function
  • Default: (empty)
  • Description:
    • Added in v8.2.0.
    • A callback function used to return custom data or value from a custom editor.

• init

  • Type: function
  • Default: (empty)
  • Description:
    • Added in v8.2.0.
    • A callback function used to initialize or convert a simple HTML control (textbox, select, etc.) defined by type into a custom editor such as datepicker, autocomplete, or any other UI plugin.

• select

  • Type: Boolean
  • Default: (empty)
  • Description: Selects text inside the cell editor when it receives focus.

• style

  • Type: String
  • Default: (empty)
  • Description: Adds inline CSS styles to the editor.

• type

  • Type: String
  • Default: 'contenteditable'
  • Description:
    • Defines the editor type: 'contenteditable', 'textbox', 'textarea', 'select', or a callback that returns the editor type.
    • v8.4.0 changes:
      • Default changed from 'textarea' to 'contenteditable'.
      • New-line insertion with Alt+Enter moved to 'contenteditable'.

Note: Editor options can be overridden per column using column.editor.

Controls the fill handle, a small square at the bottom-right corner of a selected range of cells. Dragging the fill handle horizontally or vertically copies or autofills the contents of the initial selection to other cells.

Possible values:

• '' : Disables the fill handle.
• 'horizontal' : Enables the fill handle only for horizontal dragging.
• 'vertical' : Enables the fill handle only for vertical dragging.
• 'all' : Enables the fill handle in both horizontal and vertical directions.

It describes the filtering behavior of the grid.

Options

• on

  • Type: boolean
  • Default: true
  • Description: Enables or disables filtering.

• menuIcon

  • Type: boolean
  • Default: (empty)
  • Description:
    • Shows the filter menu icon in the header filter row when menuIcon is true
    • Can be overridden at column level using column.filter.menuIcon.

• gridOptions

  • Type: object
  • Default: (empty)
  • Description: Default options for the grid inside the filter menu (range condition).

• mode

  • Type: string
  • Default: "AND"
  • Description: Determines how multiple columns are filtered together.
    Possible values: "AND" or "OR".

• header

  • Type: boolean
  • Default: (empty)
  • Description: Shows column filter input controls in the header row when header is true.

• hideClearIcon

  • Type: boolean
  • Default: (empty)
  • Description:
    • Added in v10.1.0.
    • Hides the clear icon in filter UI textboxes when set to true.

• hideRows

  • Type: boolean
  • Default: (empty)
  • Description:
    • Normally, filtered rows are separated from non-filtered rows:
      • filtered → dataModel.data
      • non-filtered → dataModel.dataUF
    • When hideRows is true, filtered rows become visible and non-filtered rows are hidden, but both remain inside dataModel.data.
    • Supported in plain grid and (since v8.0.0) tree grid.

• timeout

  • Type: integer
  • Default: 400
  • Description:
    • Used when column.filter.listener = 'timeout'.
    • Filtering is triggered after the number of milliseconds specified by timeout.

• type

  • Type: string
  • Default: 'local'
  • Description:
    • Determines whether filtering is performed locally or remotely.
    • Allowed values: 'local', 'remote'.

Configures the column flex (autofit) feature to set column width so all cell content is visible without wrap. It's activated by double-clicking a header's right edge or calling the flex method.

• on: Toggles flex feature on/off

• one: Applies flex once on grid creation and data load.

• all: If true, affects all columns; if false, affects only the target column when right edge of any column's header is double clicked / tapped.

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

The localeFmt option can be omitted to adapt automatically to the user’s locale.

This setting is overridden by column.format, cell level, or row level formats.

(v10.0.0) It sets Excel-like format of datetime values in a cell editor.

See fmtDate option for examples.

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

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

(v10.0.0) It sets Excel-like format of datetime values in a column filter editor.

See fmtDate option for examples.

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

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

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

The localeFmt option can be omitted to adapt automatically to the user’s locale.

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

(v10.0.0) It sets Excel-like format of number values in a cell editor.

See fmtNumber for examples.

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

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

(v10.0.0) It sets the Excel-like format of number values in a column filter editor.

See fmtNumber for examples.

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

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

(v11.1.0) focus and keyboard navigation related options:

• focusable (boolean, default: true)
  When true, allows cells to receive focus and display the focus outline.
  When false, cells cannot receive focus, and the focus outline is not shown.

• onTab (string, default: 'nextFocus')
  Controls how the Tab key behaves within the grid:

  • "nextFocus"
    Moves focus to the next cell in reading order:
    • In LTR mode, focus moves to the cell on the right
    • In RTL mode, focus moves to the cell on the left
    • At the end of a row, it moves to the first cell of the next row
    • Shift+Tab moves focus in the reverse direction
  • ""
    Focus leaves the grid and moves to the next focusable control on the page, instead of navigating between grid cells.

This option defines computed column formulas — expressions that calculate a column’s value based on other cell values in the same row.

Formulas are declared after their dependent columns, ensuring that all referenced values are available before evaluation.

The formula function receives two parameters:

• rowData — the complete data of the current row
• column — metadata of the current column being computed

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

this option displays borders for frozen panes.

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

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.

Used to configure row grouping and pivot grid.

• groupModel.on enables grouping
• groupModel.pivot enables pivot
• Grouping/pivot add row props: pq_gtitle, pq_gsummary, pq_grandsummary, pq_level, pq_close
• Use Group().option() only after initialization
• Summary rows:
  • via agg (v5.1.0+)
  • older: column.summary
• column.renderLabel can partially render group titles/cells

Group / Pivot Options

• agg:object — aggregation mapping per column { dataIndx: "min"|"sum"|"max"|"avg" }
  Example: { silver: "min", gold: "sum" }
• collapsed:array — collapse/expand state per level e.g., [ false, true ]. All expanded by default.
• dataIndx:array — grouping fields (e.g., ["country","age"])
• fixCols:boolean — fix grouped columns left (ignored if titleIndx or titleInFirstCol)
• grandSummary:boolean — show grand summary at bottom
• groupCols:array — pivot column groups (e.g., ["year","sport"])
• header:boolean — show grouping toolbar (drag/drop grouped columns)
• headerMenu:boolean — enable menu for toggling group options
• hideLines:boolean — (v9.1.0) hide hierarchy lines
• icon:array — expand/collapse icons (default [ 'ui-icon-triangle-1-se', 'ui-icon-triangle-1-e' ])
• indent:number — per-level indent = indent × level; default: undefined (no indent)
  (v11.1.0) values ≤ 3 are treated as em, values > 3 as px.
• menuItems:array — items in grouping toolbar menu ("merge", "fixCols", "grandSummary")
• merge:boolean — vertically merge equal grouped values
• nodeClose:object — { nodeId: boolean } open/close state (pq_close) of individual nodes
• on:boolean — enable/disable grouping
• pivot:boolean — enable pivot mode
• pivotColsTotal:string — "after"|"before"|"hideifOpen"|""
• pivotTotalForSingle:boolean — show total even for single pivot column
• showSummary:array — summary row visibility per level
• summaryEdit:boolean — summary fields editable; respects: editable, column.editable, column.summary.edit
• skipSingleSummary:boolean — (v7.0.0) skip summary for single-row groups
• summaryInTitleRow:string — ""|"collapsed"|"all" summary visibility in title row
• title:array — strings/callbacks for partial title rendering
  Priority: column.renderLabel > groupModel.title > groupModel.titleDefault
• titleInFirstCol:boolean — hierarchical titles in first visible column
• titleDefault:string|function — group title template (default {0} ({1})) where {0} is value and {1} is no of items
• titleIndx:string — column to show hierarchical group titles

Checkbox Options

• cascade:boolean — synchronized parent-child checking
• cbId:string — checkbox value field (pq_group_cb)
• checkbox:boolean — checkbox in first column (requires titleInFirstCol)
• checkboxHead:boolean — header checkbox
• maxCheck:number — max allowed checked items
• select:boolean — checkbox binds to row selection
• useLabel:boolean — wrap checkbox cell in <label>
  Priority: column.useLabel > groupModel.useLabel

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

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.

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

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

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

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

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

Few examples:

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

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.

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.

It displays header menu for show/hide columns and filter columns.

It declares the UI of the header menu.
It can also be defined or overridden in individual columns using column.menuUI.

Options

• buttons

  • Type: Array
  • Default: ['clear', 'ok']
  • Description: Buttons displayed at the bottom of the filter menu.

• singleFilter

  • Type: boolean
  • Default: (empty)
  • Description: Enables a single filter condition instead of the default two filter conditions per column.

• tabs

  • Type: Array
  • Default: ['hideCols', 'filter', 'export']
  • Description:
    • Tabs to be displayed in the header cell menu.
    • Since v9.0.0, the export tab was added for convenient control of the skipExport column property.

• gridOptions

  • Type: Object
  • Default:

    {
      "autoRow": false,
      "copyModel": { "render": true },
      "editable": function(ui){ return !ui.rowData.pq_disabled; },
      "fillHandle": "",
      "filterModel": { "header": true, "on": true },
      "hoverMode": "row",
      "hwrap": false,
      "rowBorders": false,
      "rowHt": 24,
      "rowHtHead": 26,
      "hideVScroll": true,
      "scrollModel": { "autoFit": true },
      "showTop": false,
      "height": 300,
      "wrap": false
    }
    

  • Description:
    Default options for the grid used inside the header menu and filter menu (range condition).

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

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

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

Minimum possible width of the grid in pixels.

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

Extra column that displays row numbers starting from 1. You can hide this column by setting numberCell.show to false.

(v9.0.0) Added the menuUI sub-option to display a popup menu on the number column header.

(v11.0.0) The default width is now 'auto', and the format sub-option introduced to support Excel-style number formatting, e.g., "#,###" formats number cells with thousand separators.

Contains paging properties. Localization strings for the pager can also be passed here.

pageModel sub-options

• curPage (integer, default: 0)
  Current page number (starts from 1).

• format (string)
  (v7.4.0) Number formatting for all displayed values, e.g., #,###.
  Also applied to the rPPOptions dropdown when options are plain numbers.

• layout (array, default: ["first","prev","|","strPage","|","next","last","|","strRpp","|","refresh","|","strDisplay"])
  Pager UI template

• rPP (integer, default: 10)
  Number of results per page.

• rPPOptions (array, default: [10, 20, 50, 100])
  Options for "results per page" dropdown.
  Supports:

  • Array of numbers → [10, 20, 30]
  • (v7.4.0) Array of key–value objects → [{10: 'Ten'}, {20: 'Twenty'}, {50: 'Fifty'}, {100000: 'All'}]

• totalPages (integer, default: 0)
  Total number of pages.
  Auto-calculated for local data.

• type (string)
  Enables paging for local or remote data.
  Possible values:

  • "local"
  • "remote"
    Paging is disabled when type is null or undefined.

Defines properties for pasting rows or cells into the grid.

Sub-options:

• on: Toggles the paste feature on/off.
• select: If true, selects the rows/cells affected by the paste operation.
• allowInvalid: If true, accepts invalid cell values but marks them with the class defined by editModel.invalidClass.
• type: Determines the paste action:
  • replace: Replaces the existing selection.
  • append: Appends pasted data to the selected rows/cells.
  • prepend: Prepends pasted data to the selected rows/cells.

An array of objects, where each object defines a single floating picture with the following properties:

{
  name?: string // name of picture
  src: string // url or base64 encoding of picture
  from: [number, number, number, number] // [colIndx, horizontal offset, rowIndx, vertical offset ]
  to?: [number, number, number, number] // Optional endpoint coordinates
  cx?: number // width
  cy?: number // height
}

Pictures loaded from the same domain are exportable to Excel. Please check Pic() and Range().pic() methods to work with floating pictures during runtime.

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.

New in v6.1.0

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

reactive option:

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

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

Know how: This option detects changes by

• using getters and setters for object properties
• listening to Array manipulation methods like push, splice, shift, unshift, pop, sort for arrays.

As a side note it works quite similar to reactivity of Vue framework.

Limitations:

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

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

(v8.4.0) Grid finds and refreshes only the affected or dependent cells in the viewport after editing a cell.

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

It has 3 possible values:

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

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

Draws horizontal borders around all the rows.

Set constant initial height of all rows in grid.

• (v11.1.0): rowHt is considered in css em units if < 10, px otherwise.
• Assign pq_ht property to rowData to set different heights for different rows.

Set constant initial height of all header rows in grid.

• (v11.1.0): rowHt is considered in css em units if < 10, px otherwise.

Set constant initial height of all footer rows in grid.

• (v11.1.0): rowHt is considered in css em units if < 10, px otherwise.
• Assign pq_ht property to rowData to set different heights for different rows.

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

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

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

(v7.4.0) Rows can be resized by dragging the number cells bottom edge.

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

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

Properties defined in this option are:

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

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

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

(v11.0.0) By default, scrollbars span only the unfrozen panes of the grid. When bigSB (big scrollbar) is set to true, the scrollbar extends across both frozen and unfrozen panes.

Selection related options:

• all (boolean)
  Controls selection when Ctrl + A is pressed.

  • When true: selects all pages
  • When false/undefined: selects only the current page

• column (boolean, default: true)
  Allows column selection by clicking column headers.
  Enabled by default since v7.0.0.

• mode (string, default: 'block')
  Determines selection mode:

  • "single" → select only one row/cell
  • "block" → select multiple rows/cells

• native (boolean)
  Enables native browser selection for the entire grid.
  For enabling it only in specific areas, apply the class pq-native-select.

• row (boolean, default: true)
  Selects all cells in the row by clicking on number cells.

• toggle (boolean)
  Applies only to row selection.

  • When false/undefined:

    • Clicking an unselected row replaces the whole selection
    • Clicking a selected row clears all selection
    • Ctrl + click needed to add/remove rows from selection

  • When true:

    • Clicking an unselected row adds it to selection
    • Clicking a selected row removes it

  • Shift + click (range selection) behaves the same in both modes.

• type (string, default: 'cell')
  UI selection type:

  • "cell" → cell selection
  • "row" → row selection
  • null → disable UI selection

  For both row + cell selection: use cell selection + checkbox-based row selection.

Governs display of bottom section of the grid. Frozen rows at bottom and Paging toolbar are displayed in the bottom section.

It determines display of the header of the columns.

Governs display of title in the top section(above the column headers) of the grid.

Governs display of top section (above the column headers) of the grid.

Governs display of toolbar within the top region(above the column headers) of the grid.

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

Defines the properties and behavior for column sorting.

Sub-options

• cancel

  • When true, clicking a header cycles through: ascending → descending → unsorted.
  • When false, cycles through only: ascending → descending.
  • Applies to single-column sorting and the first column in multi-column sorting.

• ignoreCase

  • Set to true for case-insensitive sorting of string columns.

• multiKey

  • Modifier key used to enable multi-column sorting when clicking additional header cells.
  • Set to null (and set single: false) to allow multi-column sorting without a modifier key.

• number

  • In multi-column sorting, displays a numeric priority (starting from 1) next to each sorted column’s header title.

• on

  • Boolean. Set to false to disable sorting for all columns.

• single

  • Controls whether sorting is single-column or multi-column.
  • true → only one column can be sorted at a time (sorter array has 1 object).
  • false → multiple columns can be sorted simultaneously (sorter array has multiple objects).

• sorter

  • An array of objects: { dataIndx: <column>, dir: "up" | "down" }.
  • Specifies the current sorting state for each sorted column.

• space

  • Reserves space in header cells (for sort icon + number indicator) even for non-sorted columns.
  • Primarily useful for flex layouts.

• type

  • Determines where sorting occurs.
  • Possible values: "local", "remote".

• wholeCell

  • Makes the entire header cell clickable for sorting (instead of just the title).
  • Requires selectionModel.column = false.

Note: Use the sort method to dynamically update sortModel options.

Specifies which column properties are preserved by saveState method. To include additional properties, set their value to 1; to skip existing properties, set the value to 0. For nested properties (e.g., filter), specify the required sub-options as an array.

Specifies which grid properties are preserved by saveState method. To include additional properties, set their value to 1; to skip existing properties, set the value to 0. For nested properties (e.g., groupModel, pageModel), specify the required sub-options as an array. Support for treeModel added.

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.

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.

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

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

Aggregate options for Pivot toolPanel aggregate pane and summary editor corresponding to data types of columns. e.g., for date datatype columns, "count", "max" and "min" options are available.

Any inbuilt or custom aggregate can be included or removed by updating this option e.g., count can be added while stdev, stdevp, sum can be removed for numbers as below:

summaryOptions: { number: "avg,min,max,count" }

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.

(v8.1.0) Configures properties for displaying a tabs UI similar to a spreadsheet application. The UI is enabled when the tabs sub-option has a defined value (even an empty array).

Type Definition: tab

Sub-options:

• activeId: Index of the currently active tab
• newTab: Callback to return a new tab object
• noAdd: Disables adding new tabs from the UI
• noSortable: Disables sorting tabs from the UI
• tabs: Array of initial tab objects

The definition for a single tab object used within the tabModel.tabs array.

Properties:

• extraRows?: number // extra rows
• extraCols?: number // extra columns
• gridOptions?: pq.gridT.options | function // grid options used during initialization
• hidden?: boolean // initially hidden
• noClose?: boolean // tab can't be closed
• noRename?: boolean // tab can't be renamed
• name?: string // name of tab
• sheet?: worksheet // worksheet structure

The index of the active tab, starting from 0.

A callback function that is executed whenever a new tab is added. It must return a valid tab object.

If true, new tabs cannot be added through the UI.

If true, tabs cannot be reordered (sorted) from the UI.

An array of initial tab objects. Defining this option (even as an empty array) turns on the tabs UI.

Title of the grid.

Defines the toolbar UI for the grid. The toolbar is an Object containing the following properties:

• cls: CSS class for the toolbar container.
• style: CSS style for the toolbar container.
• items: An array of control objects defining the contents of the toolbar.

toolbar.item Properties:

• attr: Assigns a general attribute to the control.
• attrFile **: Assigns an attribute specifically to a file control.
  Example: attrFile: 'accept=".xlsx"'
• cls: Assigns a CSS class to the control.
• icon: Defines the class of a jQuery UI icon or a custom 16×16 icon.
  Applicable to button and file controls (v7.2).
• init (v7.1.0): Callback used to initialize a custom control (e.g., datepicker, colorpicker).
  Receives the DOM element of the control as an argument.
• label: Sets the label text. Applicable to button, checkbox, textbox, and textarea controls.
• listeners: An array of event listeners for the control.
• listener:
  • As an object: Adds a single event listener where the key is the DOM event name and the value is the callback.
    Example: listener: { 'click': function(){ } }
    Supports non-DOM event "timeout", which triggers the callback asynchronously after the interval defined in filterModel.timeout since the last keyup or change event.
  • As a callback: Adds a single event listener without specifying the event type (inferred from the control type).
    Example: For select, input, or textarea, the change event is used automatically.
• options: Defines options for the control.
  • For a select list: Can be an array of options or a callback returning options.
  • For a button: Options are passed as an object during initialization.
    Example: options: { text: false, showLabel: false } creates an icon-only button.
    See the jQuery UI button API for the full list of options.
• style: Applies CSS styles to the control.
  For non-button controls with labels, the style is applied to the label instead of the control.
• type: Specifies the type of control.
  Supported values: checkbox, color, textbox, textarea, file, button, select, separator, an HTML string, or a callback returning an HTML string.
  (v11.x): Additional built-in types include
  • align
  • bgColor: Background color
  • bold
  • border
  • cut
  • copy
  • fgColor: Foreground color
  • fontSize
  • fontFamily
  • fullscreen
  • import: Import csv or xlsx file
  • italic
  • paste
  • pic: Floating pictures
  • picCell: Cell pictures
  • redo
  • underline
  • undo
  • valign
  • wrap
• value Sets the initial or current value of the control.

Context: The context (this) of callbacks/listeners is the grid instance. The control reference is event.target in listeners.

It provides GUI within the grid for managing pivoting, row grouping, and aggregate columns.

Sub-options:

• disablePivotChkBox (boolean)
  Disable the pivot check box displayed beside Pivot mode.

• hideAggPane (boolean)
  Hides the Aggregate pane.

• hideColPane (boolean)
  Controls visibility of the pivot pane.

  • When true: pivot pane is always hidden.
  • When false: pivot pane is hidden when pivot mode (groupModel.pivot) is off, and visible when pivot mode is on.

• hideGroupChkBox (boolean)
  Hides the grouping check box displayed beside Row grouping title.

• hidePivotChkBox (boolean)
  Hides the pivot checkbox used to toggle pivot mode (groupModel.pivot).

• hideRowPane (boolean)
  Hides the Row grouping pane.

• show (boolean)
  Shows the toolPanel initially. Use ToolPanel() methods to show/hide after initialization.

Sets tracking properties for inline add, update, and delete operations.

• on
  Must be set to true to enable tracking.

• dataModel.recIndx
  Must be configured before using key transactional methods.

When these are set, the following transactional methods become available:

• isDirty() – Checks if there are any unsaved changes.
• getChanges() – Retrieves added, updated, and deleted rows.
• commit() – Commits all tracked changes.
• rollback() – Reverts all tracked changes.

Treegrid groups rows based on a common parent and displays them hierarchically.

treeModel allows configuration of treegrid behavior.
Use Tree().option() to set options after initialization.
Also see Tree() method.

Tree-related options

• childstr (string, default: 'children')

  • Field name containing nested children.
  • Prefix with pq_ (e.g., pq_children) to exclude nested nodes from getChanges() during batch editing.

• dataIndx (string | integer, required)

  • Column used to display tree nodes.
  • Mandatory for treegrid.

• filterLockSummary (boolean)

  • (v7.7.0) Prevents summary values from changing during filtering.
  • Works only with filterInTitleRow.

• filterShowChildren (boolean)

  • (v7.7.0) Shows all children when the parent matches a filter.

• format (string)

  • Possible values: nested, flat.
  • Auto-detected from data.
  • Nested data example:

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

  • Flat data example:

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

• hideLines (boolean)

  • (v9.1.0) Hide hierarchy connector lines.

• historyAdd (boolean)

  • (v7.4.0) Controls history for addNodes. Defaults to historyModel.on.

• historyDelete (boolean)

  • (v7.4.0) Controls history for deleteNodes. Defaults to historyModel.on.

• historyMove (boolean)

  • (v7.4.0) Controls history for moveNodes. Not added to history by default.

• iconCollapse (array, default: ['ui-icon-triangle-1-se','ui-icon-triangle-1-e'])

  • [openIcon, closeIcon].

• iconFolder (array, default: ['ui-icon-folder-open','ui-icon-folder-collapsed'])

• iconFile (string, default: 'ui-icon-document')

  • Icon for leaf nodes.

• icons (boolean)

  • Show icons beside all nodes.

• id (string, default 'id')

  • Field storing unique row identifier.
  • Required for nested or flat formats.

• indent (integer, default 1.5)

  • per-level indent = indent × level; (v11.1.0) values ≤ 3 are treated as em, values > 3 as px.

• parentId (string, default 'parentId')

  • Field storing parent row ID (flat data).

• leafIfEmpty (boolean)

  • (v7.4.0) Converts empty folders (after add/delete/move/undo/redo) into leaf nodes.

• nodeClose (object)

  • (v7.2.0) Set pq_close state for nodes.
  • Example:

    {
        1: false,
        2: true,
        10: true,
        21: false
    }
    

• render (function)

  • Custom rendering beside the icon/checkbox.
  • Similar to column.renderLabel (which has higher precedence).
  • Can return text, HTML, or an object:
    • attr
    • cls
    • iconCls
    • style
    • text
  • 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 "<b>Hello there</b>";
        }
        return { attr, cls, iconCls, style, text };
    }
    

• summary (boolean)

  • Show summary row for children.

• summaryInTitleRow (boolean)

  • (v7.7.0) Show summary within parent row.
  • Disable treeModel.summary when using this.

Checkbox-related options

• cascade (boolean)

  • Checking/unchecking a parent applies to children.

• cbId (string, default 'pq_tree_cb')

  • Stores checkbox state (true/false/null).
  • Example of hidden column for disabled checkboxes:

    {
        dataIndx: 'pq_tree_cb',
        hidden: true,
        editable: function(ui){
            // return false to disable checkbox
        }
    }
    

• checkbox (boolean | function)

  • Add checkbox to nodes.
  • Function example:

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

• checkboxHead (boolean)

  • Adds checkbox in the header

• maxCheck (integer)

  • Maximum total number of checked boxes

• select (boolean)

  • Row selection tied to checkbox state.

• useLabel (boolean)

  • Wraps checkbox cell in <label> (similar to column.useLabel).

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.

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

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

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

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

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

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

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.