ParamQuery Grid API

https://paramquery.com/api
Admin
ParamQuery Grid API documentation details the Range and Selection objects for managing cell...
Tokens:155,293
Snippets:1,412
Trust Score:8.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Get ParamQuery Select Instance

Source: https://paramquery.com/api/24/select

Provides an example of using the 'getInstance' method to retrieve the ParamQuery Select instance, which allows for direct invocation of its methods.

```javascript
var select = $( ".selector" ).pqSelect( "getInstance" ).select; 
select.open();
```

--------------------------------

### ParamQuery: Initialize with dataModel.getUrl

Source: https://paramquery.com/api/24

Provides an example of initializing a ParamQuery grid with a custom 'dataModel.getUrl' function. This function dynamically generates the URL and data for GET or POST requests to the server.

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

--------------------------------

### Get pqPager Instance

Source: https://paramquery.com/api/pager

Provides examples of how to obtain a reference to the pqPager widget instance, either by selecting the pager element directly or by accessing it through the grid instance.

```javascript
var $pqPager = $grid.find( ".pq-pager" );
//or 
var pager = grid.pager(); //javascript instance. ( >= v3.2.0 )
```

--------------------------------

### Initialize pqGrid with dataModel.postDataOnce

Source: https://paramquery.com/api/index

Configures dataModel.postDataOnce for pqGrid, specifying custom data that is sent to the server only once. This is useful for initial setup parameters.

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

--------------------------------

### ParamQuery: Initialize with dataModel.getUrl

Source: https://paramquery.com/api/24/Index

Provides an example of initializing a ParamQuery grid with a custom 'dataModel.getUrl' function. This function dynamically generates the URL and data for GET or POST requests to the server.

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

--------------------------------

### Get or set editor option in pqGrid

Source: https://paramquery.com/api/index

Demonstrates how to get the current editor settings or update them, for example, changing the editor type to 'textarea' and adding a custom CSS class.

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

--------------------------------

### Initialize pqGrid with Data Model

Source: https://paramquery.com/api/index

Shows the basic initialization of pqGrid with a `dataModel` option, including sample local data. It also demonstrates how to get and set the `dataModel` and its sub-options after initialization.

```javascript
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, ... }, ... } );
```

```javascript
//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 );
```

--------------------------------

### Initialize pqGrid with complete callback

Source: https://paramquery.com/api/index

Example of initializing pqGrid with a 'complete' callback. This function is called after the grid has finished its data binding and rendering process.

```javascript
$( ".selector" ).pqGrid({
  complete: function( event, ui ) {}
});
```

--------------------------------

### Get or set rowBorders option in pqGrid

Source: https://paramquery.com/api/24

Provides examples for getting the current rowBorders setting and for enabling or disabling horizontal row borders in the pqGrid after initialization.

```javascript
//getter
var rowBorders=$( ".selector" ).pqGrid( "option", "rowBorders" ); 
//setter
$( ".selector" ).pqGrid( "option", "rowBorders", true );
```

--------------------------------

### Get or set rowBorders option in pqGrid

Source: https://paramquery.com/api/24/Index

Provides examples for getting the current rowBorders setting and for enabling or disabling horizontal row borders in the pqGrid after initialization.

```javascript
//getter
var rowBorders=$( ".selector" ).pqGrid( "option", "rowBorders" ); 
//setter
$( ".selector" ).pqGrid( "option", "rowBorders", true );
```

--------------------------------

### Initialize pqGrid with Warning Options

Source: https://paramquery.com/api/index

Demonstrates how to initialize a pqGrid with custom properties for warning tooltips. This example shows how to configure the warning tooltip to not display an icon.

```javascript
//no display of icon in the warning tooltip.
$( ".selector" ).pqGrid( { warning: { icon: ''} } );
```

--------------------------------

### Initialize pqGrid with dataModel.data

Source: https://paramquery.com/api/index

Demonstrates how to initialize pqGrid by providing data either as an array of arrays or an array of objects directly to the dataModel.data option. This data is then used to populate the grid.

```javascript
//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 steps option for pqScrollBar

Source: https://paramquery.com/api/scrollbar

Illustrates how to get the current value of the steps option or set a new value for the pqScrollBar. The setter example sets steps to false.

```javascript
//getter
var steps = $( ".selector" ).pqScrollBar( "option", "steps" );
//setter
$( ".selector" ).pqScrollBar( "option", "steps", false );
```

--------------------------------

### Initialize pqGrid with create callback

Source: https://paramquery.com/api/index

Shows how to initialize pqGrid with a 'create' callback. This event fires when the grid is initially created, and for local data, it signifies completion of data binding and rendering.

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

--------------------------------

### Get or set pace option for pqScrollBar

Source: https://paramquery.com/api/scrollbar

Demonstrates how to get the current pace option or set a new pace for an initialized pqScrollBar. The setter uses 'optimum' as an example value.

```javascript
//getter
var pace = $( ".selector" ).pqScrollBar( "option", "pace" ); 
//setter
$( ".selector" ).pqScrollBar( "option", "pace", "optimum" );
```

--------------------------------

### Get or Set length Option for pqScrollBar

Source: https://paramquery.com/api/24/scrollbar

Provides examples for getting the current length of the pqScrollBar or setting a new length after the widget has been initialized. It illustrates the getter and setter usage for the 'length' option.

```javascript
//getter
var length=$( ".selector" ).pqScrollBar( "option", "length"); 
//setter
$( ".selector" ).pqScrollBar( "option", "length", 300 );
```

--------------------------------

### Initialize pqGrid with create Callback

Source: https://paramquery.com/api/24

Initializes the pqGrid with a callback for the 'create' event, which is triggered after the grid has been fully rendered. This is suitable for post-initialization setup.

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

--------------------------------

### Get or set pasteModel option in pqGrid

Source: https://paramquery.com/api/24

Shows how to retrieve the current pasteModel configuration or update it after the pqGrid has been initialized. The example demonstrates getting the option and then setting a specific property like 'validate'.

```javascript
//getter
var pasteModel = $( ".selector" ).pqGrid( "option", "pasteModel" );
//setter
$( ".selector" ).pqGrid( "option", "pasteModel", { validate: false } );
```

--------------------------------

### Initialize pqGrid with dataReady callback

Source: https://paramquery.com/api/index

Provides an example of initializing pqGrid with a 'dataReady' callback. This event is triggered when the grid's data is prepared for rendering, typically after data modifications or refreshes.

```javascript
$( ".selector" ).pqGrid({
  dataReady: function( event, ui ) {}
});
```

--------------------------------

### Initialize pqGrid with create Callback

Source: https://paramquery.com/api/24/Index

Initializes the pqGrid with a callback for the 'create' event, which is triggered after the grid has been fully rendered. This is suitable for post-initialization setup.

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

--------------------------------

### Get or set pasteModel option in pqGrid

Source: https://paramquery.com/api/24/Index

Shows how to retrieve the current pasteModel configuration or update it after the pqGrid has been initialized. The example demonstrates getting the option and then setting a specific property like 'validate'.

```javascript
//getter
var pasteModel = $( ".selector" ).pqGrid( "option", "pasteModel" );
//setter
$( ".selector" ).pqGrid( "option", "pasteModel", { validate: false } );
```

--------------------------------

### Get or Set cur_pos Option for pqScrollBar

Source: https://paramquery.com/api/24/scrollbar

Shows how to get the current value of the 'cur_pos' option or set a new value for the slider's position after the pqScrollBar has been initialized. It includes examples for both getter and setter usage.

```javascript
//getter
var cur_pos = $( ".selector" ).pqScrollBar( "option", "cur_pos" ); 
//setter
$( ".selector" ).pqScrollBar( "option", "cur_pos", 300 );
```

--------------------------------

### Initialize pqGrid with Column Summary Option

Source: https://paramquery.com/api/24

Provides an example of initializing the pqGrid with the 'summary' option for a column, specifying types and titles for group summaries.

```javascript
var colM = [
  {
    title: "ShipCountry",
    width: 100,
    summary:{
      type: ["min", "max"],
      title: [ "Min: {0}", "Max: {0}" ]
    }
  },
  {
    title: "Customer Name",
    width: 100
  }
];
$( ".selector" ).pqGrid( { colModel: colM } );
```

--------------------------------

### Initialize pqGrid with Bootstrap Support Enabled

Source: https://paramquery.com/api/index

Initializes a pqGrid instance and enables Bootstrap support by setting the 'on' property within the bootstrap option to true. This allows applying Bootstrap styling to the grid.

```javascript
//turn bootstrap support on.
$( ".selector" ).pqGrid( { bootstrap: { on : true } } );
```

--------------------------------

### Get or Set nested colModel Option

Source: https://paramquery.com/api/index

Demonstrates retrieving and setting nested column models within an initialized pqGrid. This allows for dynamic manipulation of grouped column structures. The examples show how to get the entire colModel, access nested colModels, and update them.

```javascript
//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 );
```

--------------------------------

### Get/Set dataModel.url

Source: https://paramquery.com/api/24

Provides examples for getting and setting the url option in ParamQuery, which is used for fetching remote data.

```javascript
//getter
var url=$( ".selector" ).pqGrid( "option" , "dataModel.url" );
//setter
$( ".selector" ).pqGrid( "option" , "dataModel.url", "http://paramquery.com/getOrders" );
```

--------------------------------

### Initialize pqPager with Bootstrap

Source: https://paramquery.com/api/pager

Demonstrates how to initialize the pqPager widget with Bootstrap support enabled. This involves passing a configuration object with the 'bootstrap' option set to true.

```javascript
$( ".selector" ).pqPager( { bootstrap: { on: true } } );
```

--------------------------------

### Get Bootstrap Option in pqGrid

Source: https://paramquery.com/api/index

Shows how to retrieve the current configuration of the bootstrap option for a pqGrid instance.

```javascript
//getter
var bootstrap = $( ".selector" ).pqGrid( "option", "bootstrap" );
```

--------------------------------

### Get/Set dataModel.url

Source: https://paramquery.com/api/24/Index

Provides examples for getting and setting the url option in ParamQuery, which is used for fetching remote data.

```javascript
//getter
var url=$( ".selector" ).pqGrid( "option" , "dataModel.url" );
//setter
$( ".selector" ).pqGrid( "option" , "dataModel.url", "http://paramquery.com/getOrders" );
```

--------------------------------

### Initialize pqGrid with Column Model

Source: https://paramquery.com/api/index

Demonstrates initializing the pqGrid component with a custom column model, specifying titles, widths, and data indexes for columns. This example shows how to define the structure of the grid's columns.

```javascript
var colM = [
  { title: "Company", width: 100 ,dataIndx : 1},
  { title: "Rank", width: 100,dataIndx : 0 }
];
```

```javascript
var colM = [
  { title: "Company", width: 100 ,dataIndx: "company" },
  { title: "Rank", width: 100, dataIndx: "rank" }
];
$( ".selector" ).pqGrid({ colModel: colM });
```

--------------------------------

### Get or set resizable option in pqGrid

Source: https://paramquery.com/api/24

Provides examples for accessing the current resizable setting of the pqGrid and for enabling or disabling resizing after initialization.

```javascript
//getter
var resizable=$( ".selector" ).pqGrid( "option", "resizable" ); 
//setter
$( ".selector" ).pqGrid( "option", "resizable", true );
```

--------------------------------

### Initialize pqGrid with Column Validations

Source: https://paramquery.com/api/index

Demonstrates how to initialize the pqGrid component with column definitions that include validation rules. This example shows how to set minimum length and warning conditions for a column.

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

--------------------------------

### Get/Set detailModel option

Source: https://paramquery.com/api/index

Demonstrates how to get the `detailModel` option and set its sub-options (e.g., `cache`) after the pqGrid has been initialized.

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

--------------------------------

### Get/Set Column Width

Source: https://paramquery.com/api/24

Provides examples for getting and setting the width of a column in the pqGrid after initialization. This allows for dynamic adjustment of column dimensions.

```javascript
//getter
var colM=$( ".selector" ).pqGrid( "option", "colModel" );
var width = colM[0].width;
//setter
colM[1].width = 120;
$( ".selector" ).pqGrid( "option", "colModel", colM );
```

--------------------------------

### Initialize pqGrid with Column Summary Option

Source: https://paramquery.com/api/24/Index

Provides an example of initializing the pqGrid with the 'summary' option for a column, specifying types and titles for group summaries.

```javascript
var colM = [
  {
    title: "ShipCountry",
    width: 100,
    summary:{
      type: ["min", "max"],
      title: [ "Min: {0}", "Max: {0}" ]
    }
  },
  {
    title: "Customer Name",
    width: 100
  }
];
$( ".selector" ).pqGrid( { colModel: colM } );
```

--------------------------------

### Get or set resizable option in pqGrid

Source: https://paramquery.com/api/24/Index

Provides examples for accessing the current resizable setting of the pqGrid and for enabling or disabling resizing after initialization.

```javascript
//getter
var resizable=$( ".selector" ).pqGrid( "option", "resizable" ); 
//setter
$( ".selector" ).pqGrid( "option", "resizable", true );
```

--------------------------------

### Get/Set Column Width

Source: https://paramquery.com/api/24/Index

Provides examples for getting and setting the width of a column in the pqGrid after initialization. This allows for dynamic adjustment of column dimensions.

```javascript
//getter
var colM=$( ".selector" ).pqGrid( "option", "colModel" );
var width = colM[0].width;
//setter
colM[1].width = 120;
$( ".selector" ).pqGrid( "option", "colModel", colM );
```

--------------------------------

### Initialize pqGrid with Toolbar

Source: https://paramquery.com/api/index

Demonstrates how to initialize a pqGrid component with a custom toolbar configuration. The toolbar can include various items like buttons and checkboxes with specific labels, icons, and event listeners.

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

--------------------------------

### Initialize detailModel

Source: https://paramquery.com/api/24/Index

Shows how to initialize the ParamQuery grid with the detailModel option, configuring settings for row detail views and nesting.

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

--------------------------------

### Get/Set dataModel.sortIndx

Source: https://paramquery.com/api/24

Provides examples for getting and setting the sortIndx option in ParamQuery, including single and multiple column sorting for both array and JSON data.

```javascript
//getter
var sortIndx = $( ".selector" ).pqGrid( "option" , "dataModel.sortIndx" );
//setter using integer for array data.
$( ".selector" ).pqGrid("option", "dataModel.sortIndx", 0);
//setter using string for JSON data.
$( ".selector" ).pqGrid("option", "dataModel.sortIndx", "rank");
//setter using array of strings for JSON data with multiple column sorting
$( ".selector" ).pqGrid("option", "dataModel.sortIndx", ["rank", "profits"] );
```

--------------------------------

### Initialize pqGrid with Column Template

Source: https://paramquery.com/api/24

Illustrates how to use the 'columnTemplate' option to define common properties for all columns, promoting the DRY principle. This example sets default width percentages and minimum widths.

```javascript
$( ".selector" ).pqGrid( { columnTemplate: { widthPercent: 10, minWidth: 50 } } );
```

--------------------------------

### Get/Set dataModel.sortIndx

Source: https://paramquery.com/api/24/Index

Provides examples for getting and setting the sortIndx option in ParamQuery, including single and multiple column sorting for both array and JSON data.

```javascript
//getter
var sortIndx = $( ".selector" ).pqGrid( "option" , "dataModel.sortIndx" );
//setter using integer for array data.
$( ".selector" ).pqGrid("option", "dataModel.sortIndx", 0);
//setter using string for JSON data.
$( ".selector" ).pqGrid("option", "dataModel.sortIndx", "rank");
//setter using array of strings for JSON data with multiple column sorting
$( ".selector" ).pqGrid("option", "dataModel.sortIndx", ["rank", "profits"] );
```

--------------------------------

### Initialize pqGrid with pageModel.rPPOptions

Source: https://paramquery.com/api/index

Initializes the ParamQuery grid with an array of options for the number of results per page. This populates the dropdown for page size selection.

```javascript
$( ".selector" ).pqGrid({pageModel:{ rPPOptions:[10, 100, 200] }});
```

--------------------------------

### Initialize pqGrid with beforeSort callback

Source: https://paramquery.com/api/24

Sets up a pqGrid instance with the 'beforeSort' callback, which is triggered before data sorting initiated by the user.

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

--------------------------------

### Initialize pqGrid with Column Template

Source: https://paramquery.com/api/24/Index

Illustrates how to use the 'columnTemplate' option to define common properties for all columns, promoting the DRY principle. This example sets default width percentages and minimum widths.

```javascript
$( ".selector" ).pqGrid( { columnTemplate: { widthPercent: 10, minWidth: 50 } } );
```

--------------------------------

### Get or set timeout option for pqScrollBar

Source: https://paramquery.com/api/scrollbar

Demonstrates retrieving the current timeout setting or updating it for the pqScrollBar. The setter example changes the timeout to 200 milliseconds.

```javascript
//getter
var timeout = $( ".selector" ).pqScrollBar( "option", "timeout" ); 
//setter
$( ".selector" ).pqScrollBar( "option", "timeout", 200 );
```

--------------------------------

### Initialize pqGrid with Column Title Option

Source: https://paramquery.com/api/24

Shows a basic example of initializing the pqGrid with specified titles for columns.

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

--------------------------------

### Initialize pqPager with Results Per Page Options (rPPOptions)

Source: https://paramquery.com/api/pager

Illustrates initializing the pqPager widget and providing a custom array of options for the results per page dropdown.

```javascript
$( ".selector" ).pqPager( { rPPOptions: [1,5,10] } );
```

--------------------------------

### Get or set ratio option for pqScrollBar

Source: https://paramquery.com/api/scrollbar

Shows how to retrieve the current ratio option or update it for an existing pqScrollBar instance. The setter example updates the ratio to 0.2.

```javascript
//getter
var ratio = $( ".selector" ).pqScrollBar( "option", "ratio" );
//setter
$( ".selector" ).pqScrollBar( "option", "ratio", 0.2 );
```

--------------------------------

### Initialize detailModel

Source: https://paramquery.com/api/24

Shows how to initialize the ParamQuery grid with the detailModel option, configuring settings for row detail views and nesting.

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

--------------------------------

### Get or Set Validation Option in pqGrid

Source: https://paramquery.com/api/index

Provides examples for both retrieving the current validation tooltip settings and updating them after the pqGrid has been initialized. This allows for dynamic control over how validation messages are displayed.

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

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

--------------------------------

### Initialize pqGrid with editorBegin

Source: https://paramquery.com/api/24

Initializes the pqGrid component with the editorBegin callback function. This callback is executed when an editor begins.

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

--------------------------------

### Get or Set pqSelect width Option

Source: https://paramquery.com/api/select

Provides examples for retrieving or updating the 'width' option of the pqSelect component. This option controls the fixed width of the select list.

```javascript
//getter
var width = $( ".selector" ).pqSelect( "option", "width" );
//setter
$( ".selector" ).pqSelect( "option", "width", 120 );
```

--------------------------------

### Get or Set pqSelect selectallText Option

Source: https://paramquery.com/api/select

Provides examples for retrieving or updating the 'selectallText' option of the pqSelect component. This option customizes the label text for selecting all items.

```javascript
//getter
var selectallText = $( ".selector" ).pqSelect( "option", "selectallText" );
//setter
$( ".selector" ).pqSelect( "option", "selectallText", 'Select All' );
```

--------------------------------

### Initialize pqGrid with Column Title Option

Source: https://paramquery.com/api/24/Index

Shows a basic example of initializing the pqGrid with specified titles for columns.

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

--------------------------------

### Get or Set pqSelect search Option

Source: https://paramquery.com/api/select

Provides examples for retrieving or updating the 'search' option of the pqSelect component. This option controls the visibility of the search input field.

```javascript
//getter
var search = $( ".selector" ).pqSelect( "option", "search" );
//setter
$( ".selector" ).pqSelect( "option", "search", false );
```

--------------------------------

### Initialize pqGrid with editorBegin

Source: https://paramquery.com/api/24/Index

Initializes the pqGrid component with the editorBegin callback function. This callback is executed when an editor begins.

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

--------------------------------

### Initialize pqGrid with virtualX Option

Source: https://paramquery.com/api/index

Demonstrates the initialization of a pqGrid with the virtualX option set. This option is used for virtual rendering along the x-axis, which is beneficial when dealing with a large number of columns.

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

--------------------------------

### Get or set dataModel recIndx option

Source: https://paramquery.com/api/24

Demonstrates how to retrieve or update the dataModel.recIndx option, which defines the primary key for records. It shows examples for both array and JSON data types.

```javascript
//getter
var recIndx = $( ".selector" ).pqGrid( "option", "dataModel.recIndx" );
//setter
//for array            
$( ".selector" ).pqGrid( "option", "dataModel.recIndx", 0 );
//for JSON                        
$( ".selector" ).pqGrid( "option", "dataModel.recIndx", "id" );
```

--------------------------------

### Initialize pqGrid with render callback

Source: https://paramquery.com/api/24

Sets up the pqGrid with a 'render' callback, which is executed after the grid's DOM structure is created but before full initialization. This is useful for tasks like adding toolbars.

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

--------------------------------

### Get or set dataModel recIndx option

Source: https://paramquery.com/api/24/Index

Demonstrates how to retrieve or update the dataModel.recIndx option, which defines the primary key for records. It shows examples for both array and JSON data types.

```javascript
//getter
var recIndx = $( ".selector" ).pqGrid( "option", "dataModel.recIndx" );
//setter
//for array            
$( ".selector" ).pqGrid( "option", "dataModel.recIndx", 0 );
//for JSON                        
$( ".selector" ).pqGrid( "option", "dataModel.recIndx", "id" );
```

--------------------------------

### Initialize pqGrid with toggle callback

Source: https://paramquery.com/api/24

Shows how to initialize a pqGrid with the 'toggle' callback, which is triggered when the grid's maximize/minimize button is clicked.

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

--------------------------------

### Initialize pqGrid with toggle callback

Source: https://paramquery.com/api/24/Index

Shows how to initialize a pqGrid with the 'toggle' callback, which is triggered when the grid's maximize/minimize button is clicked.

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

--------------------------------

### Initialize pqGrid with render callback

Source: https://paramquery.com/api/24/Index

Sets up the pqGrid with a 'render' callback, which is executed after the grid's DOM structure is created but before full initialization. This is useful for tasks like adding toolbars.

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

--------------------------------

### Get or Set num_eles Option for pqScrollBar

Source: https://paramquery.com/api/24/scrollbar

Shows how to retrieve the current value of the 'num_eles' option or update the number of slider positions for the pqScrollBar after it has been initialized. Includes getter and setter examples.

```javascript
//getter
var num_eles = $( ".selector" ).pqScrollBar( "option", "num_eles" ); 
//setter
$( ".selector" ).pqScrollBar( "option", "num_eles", 50 );
```

--------------------------------

### Initialize pqGrid with editorBegin callback

Source: https://paramquery.com/api/index

Shows how to initialize pqGrid with an 'editorBegin' callback. This function is called when an in-cell editor is created, providing access to row and column data, as well as the editor element.

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

--------------------------------

### Get/Set maxWidth option in ParamQuery

Source: https://paramquery.com/api/index

Provides examples for getting the current 'maxWidth' value and setting a new maximum width for the pqGrid instance. This allows dynamic control over the grid's width constraints.

```javascript
var maxWidth = $( ".selector" ).pqGrid( "option", "maxWidth" );
$( ".selector" ).pqGrid( "option", "maxWidth", 400 );
```

--------------------------------

### Initialize pqGrid with resizable enabled

Source: https://paramquery.com/api/24/Index

Illustrates how to initialize the pqGrid and enable the resizable feature, allowing the grid to be resized both horizontally and vertically.

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

--------------------------------

### Get or Set Column Class in pqGrid

Source: https://paramquery.com/api/24

Provides examples for retrieving the CSS class assigned to a column or updating it for a specific column in a pqGrid after initialization. This enables dynamic styling of columns.

```javascript
//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get class of 1st column
var cls = colM[0].cls;
//setter
//set class to 'pq-someclass' for 2nd column in colModel.
colM[1].cls = 'pq-someclass';
$( ".selector" ).pqGrid( "option", "colModel", colM );
```

--------------------------------

### Initialize pqGrid with groupModel showSummary

Source: https://paramquery.com/api/index

Initializes the pqGrid with the groupModel's showSummary option, determining whether to display a summary row at the bottom of each group.

```javascript
$( ".selector" ).pqGrid( {
groupModel: {
showSummary: [ "true", "false", ... ]
}
});
```

--------------------------------

### Get or Set Column Alignment in pqGrid

Source: https://paramquery.com/api/24

Provides examples for retrieving the alignment of a specific column or setting the alignment for columns in a pqGrid after initialization. This allows for dynamic text alignment adjustments.

```javascript
//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get align of 1st column
var dataType = colM[0].align;
//setter
//set align of 2nd column.
colM[1].align = "center";
$( ".selector" ).pqGrid( "option", "colModel", colM );
```

--------------------------------

### Get or Set Column Class in pqGrid

Source: https://paramquery.com/api/24/Index

Provides examples for retrieving the CSS class assigned to a column or updating it for a specific column in a pqGrid after initialization. This enables dynamic styling of columns.

```javascript
//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get class of 1st column
var cls = colM[0].cls;
//setter
//set class to 'pq-someclass' for 2nd column in colModel.
colM[1].cls = 'pq-someclass';
$( ".selector" ).pqGrid( "option", "colModel", colM );
```

--------------------------------

### Initialize pqGrid with Column Template

Source: https://paramquery.com/api/index

Illustrates using the `columnTemplate` option to define common properties for all columns, which can be overridden individually. This example sets a default width and minimum width for columns.

```javascript
//define all columns to have same width unless overridden in individual columns.
$( ".selector" ).pqGrid( { columnTemplate: { width: '20%', minWidth: 50 } } );
```

--------------------------------

### Initialize pqGrid with editorKeyUp callback

Source: https://paramquery.com/api/index

Initializes the pqGrid component with a specified editorKeyUp callback function. This callback is executed when a key is released after input in an editor.

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

--------------------------------

### Get or Set Column Alignment in pqGrid

Source: https://paramquery.com/api/24/Index

Provides examples for retrieving the alignment of a specific column or setting the alignment for columns in a pqGrid after initialization. This allows for dynamic text alignment adjustments.

```javascript
//getter
var colM = $( ".selector" ).pqGrid( "option", "colModel" );
//get align of 1st column
var dataType = colM[0].align;
//setter
//set align of 2nd column.
colM[1].align = "center";
$( ".selector" ).pqGrid( "option", "colModel", colM );
```

--------------------------------

### ParamQuery Grid: Initialize with Show Toolbar Option

Source: https://paramquery.com/api/index

Initializes the ParamQuery Grid, specifying whether the toolbar within the top region should be displayed.

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

--------------------------------

### Get/Set Page Model Options in ParamQuery Grid

Source: https://paramquery.com/api/24

Provides examples for getting the current 'pageModel' configuration or updating it after initialization. This includes retrieving the entire 'pageModel' object or setting properties like 'curPage'.

```javascript
//getter
var pageModel=$( ".selector" ).pqGrid( "option", "pageModel" ); 
//setter
$( ".selector" ).pqGrid( "option", "pageModel", { curPage: 3 } );
```

--------------------------------

### Initialize pqPager with create callback

Source: https://paramquery.com/api/24/pager

Initializes the pqPager widget and specifies a callback function to be executed immediately after the widget has been successfully created. This is useful for post-initialization setup.

```javascript
$( ".selector" ).pqPager({
  create: function( event, ui ) {}
});
```

--------------------------------

### Get/Set Page Model Options in ParamQuery Grid

Source: https://paramquery.com/api/24/Index

Provides examples for getting the current 'pageModel' configuration or updating it after initialization. This includes retrieving the entire 'pageModel' object or setting properties like 'curPage'.

```javascript
//getter
var pageModel=$( ".selector" ).pqGrid( "option", "pageModel" ); 
//setter
$( ".selector" ).pqGrid( "option", "pageModel", { curPage: 3 } );
```

--------------------------------

### Initialize pqGrid with resizable enabled

Source: https://paramquery.com/api/24

Illustrates how to initialize the pqGrid and enable the resizable feature, allowing the grid to be resized both horizontally and vertically.

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

--------------------------------

### Initialize and Manage showTitle Option in ParamQuery Grid

Source: https://paramquery.com/api/24

Illustrates the use of the showTitle option to govern the display of the grid's title in the top section. Examples are provided for initial setup and for retrieving or updating the option.

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

```javascript
//getter
var showTitle = $( ".selector" ).pqGrid( "option", "showTitle" ); 
//setter
$( ".selector" ).pqGrid( "option", "showTitle", false );
```

--------------------------------

### ParamQuery Grid Options

Source: https://paramquery.com/api/index

This section details the various configuration options available for the pqGrid component. These options control the grid's behavior, appearance, and data handling capabilities.

```JavaScript
pqGrid({
  width: 400,
  height: 300,
  editable: false,
  // ... other options
});
```

--------------------------------

### Get/Set Total Pages in ParamQuery Grid

Source: https://paramquery.com/api/24

Provides examples for getting the total number of pages or setting it for a ParamQuery Grid. This uses the 'option' method to access or modify the 'pageModel.totalPages' property, primarily for remote paging.

```javascript
//getter
var totalPages=$( ".selector" ).pqGrid( "option", "pageModel.totalPages" );
//setter
$( ".selector" ).pqGrid( "option", "pageModel.totalPages", 2 );
```

--------------------------------

### Initialize pqGrid with Column Widths

Source: https://paramquery.com/api/index

Shows how to initialize the pqGrid with specific column widths defined either in pixels or as a percentage of the grid's total width.

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

--------------------------------

### Get/Set Results Per Page in ParamQuery Grid

Source: https://paramquery.com/api/24

Provides examples for getting the current 'results per page' setting or updating it for a ParamQuery Grid. This uses the 'option' method to access or modify the 'pageModel.rPP' property.

```javascript
//getter
var rPP=$( ".selector" ).pqGrid( "option", "pageModel.rPP" );
//setter
$( ".selector" ).pqGrid( "option", "pageModel.rPP", 20 );
```

--------------------------------

### ParamQuery Select: Initialize with maxDisplay

Source: https://paramquery.com/api/select

Provides an example of initializing the ParamQuery select with the 'maxDisplay' option set. This option limits the number of options shown before switching to a display text.

```JavaScript
$( ".selector" ).pqSelect( { maxDisplay: 3 } );
```

--------------------------------

### Initialize and Manage showTitle Option in ParamQuery Grid

Source: https://paramquery.com/api/24/Index

Illustrates the use of the showTitle option to govern the display of the grid's title in the top section. Examples are provided for initial setup and for retrieving or updating the option.

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

```javascript
//getter
var showTitle = $( ".selector" ).pqGrid( "option", "showTitle" ); 
//setter
$( ".selector" ).pqGrid( "option", "showTitle", false );
```

--------------------------------

### Initialize pqPager with Results Per Page (rPP)

Source: https://paramquery.com/api/pager

Demonstrates initializing the pqPager widget and setting the 'rPP' (results per page) option to a specific number.

```javascript
$( ".selector" ).pqPager( { rPP: 20 } );
```

--------------------------------

### Get/Set Total Pages in ParamQuery Grid

Source: https://paramquery.com/api/24/Index

Provides examples for getting the total number of pages or setting it for a ParamQuery Grid. This uses the 'option' method to access or modify the 'pageModel.totalPages' property, primarily for remote paging.

```javascript
//getter
var totalPages=$( ".selector" ).pqGrid( "option", "pageModel.totalPages" );
//setter
$( ".selector" ).pqGrid( "option", "pageModel.totalPages", 2 );
```

--------------------------------

### Initialize pqGrid with columnOrder callback

Source: https://paramquery.com/api/index

Provides an example of initializing pqGrid with a 'columnOrder' callback function. This function is executed when the order of columns is changed via drag and drop.

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

--------------------------------

### Get/Set Results Per Page in ParamQuery Grid

Source: https://paramquery.com/api/24/Index

Provides examples for getting the current 'results per page' setting or updating it for a ParamQuery Grid. This uses the 'option' method to access or modify the 'pageModel.rPP' property.

```javascript
//getter
var rPP=$( ".selector" ).pqGrid( "option", "pageModel.rPP" );
//setter
$( ".selector" ).pqGrid( "option", "pageModel.rPP", 20 );
```

--------------------------------

### Get or Set timeout Option for pqScrollBar

Source: https://paramquery.com/api/24/scrollbar

Shows how to retrieve the current timeout value or set a new timeout for the pqScrollBar when using deferred scrolling with 'optimum' pace. Includes getter and setter examples for the 'timeout' option.

```javascript
//getter
var timeout = $( ".selector" ).pqScrollBar( "option", "timeout" ); 
//setter
$( ".selector" ).pqScrollBar( "option", "timeout", 200 );
```
Tokens:
Raw