ParamQuery Grid Pro Tutorial

Welcome to the ParamQuery Grid tutorial! This guide will help you get started with the advanced features of the ParamQuery Grid, a powerful jQuery plugin for creating data-rich grid interfaces. In this tutorial, we will cover the topics mentioned in the left side menu:

A Word about its design

            var pager = grid.pager(); //js instance of pager
        

Include Files

If you use ParamQuery with npm then you may skip to next section.

To use ParamQuery without npm first of all include these js and css files in the header section of the web page.

Recommended to use jQuery >= v2.2.x and jQueryUI >= v1.12.x

jQueryUI 1.11.4

   
<!--jQuery dependency, any stable version of jQuery-->    
    <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>    

<!--jQueryUI version 1.11.4 -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!--ParamQuery Grid css files-->
    <link rel="stylesheet" href="path to pqgrid.(min/dev).css" />    

    <!--add pqgrid.ui.css for jQueryUI theme support-->
    <link rel="stylesheet" href="path to pqgrid.ui.(min/dev).css" />

    <!--ParamQuery Grid custom theme e.g., office, bootstrap, rosy, chocolate, etc (optional)-->
    <link rel="stylesheet" href="path to custom theme pqgrid.css" />

<!--Include jsZip file (v2.5.0) before pqgrid js file to support xlsx and zip export (optional)-->
    <script type="text/javascript" src="path to jsZip.js" ></script>   

<!--ParamQuery Grid js files-->
    <script type="text/javascript" src="path to pqgrid.(min/dev).js" ></script>   

    <!--ParamQuery Grid localization file (necessary since v5.2.0)-->
    <script src="localize/pq-localize-xx.js"></script>

<!--Include pqTouch file to provide support for touch devices (optional)-->
    <script type="text/javascript" src="path to pqtouch.min.js" ></script>   

<!--Include jquery.resize to support auto height of detail views in hierarchy (optional)-->
    <script type="text/javascript" src="path to jquery.resize.js" ></script>   

Sample jsfiddle

jQueryUI 1.12, 1.13

   
<!--jQuery dependency, any stable version of jQuery-->    
    <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>    

<!--jQueryUI version 1.12, 1.13 -->
    <link href="https://unpkg.com/[email protected]/jquery-ui.css" rel="stylesheet" />
    <link href="https://unpkg.com/[email protected]/jquery-ui.structure.css" rel="stylesheet" />
    <link href="https://unpkg.com/[email protected]/jquery-ui.theme.css" rel="stylesheet" />
    <script src="https://unpkg.com/[email protected]/jquery-ui.js"></script>

<!--ParamQuery Grid css files-->
    <link rel="stylesheet" href="path to pqgrid.(min/dev).css" />    

    <!--add pqgrid.ui.css for jQueryUI theme support-->
    <link rel="stylesheet" href="path to pqgrid.ui.(min/dev).css" />

    <!--ParamQuery Grid custom theme e.g., office, bootstrap, rosy, chocolate, etc (optional)-->
    <link rel="stylesheet" href="path to custom theme pqgrid.css" />

    <!--Bootstrap icons support (optional)-->
    <link rel="stylesheet" href="path to pq-icons/pq.css" />

<!--Include jsZip file (v2.5.0) before pqgrid js file to support xlsx and zip export (optional)-->
    <script type="text/javascript" src="path to jsZip.js" ></script>   

<!--ParamQuery Grid js files-->
    <script type="text/javascript" src="path to pqgrid.(min/dev).js" ></script>   

    <!--ParamQuery Grid localization file (necessary since v5.2.0)-->
    <script src="localize/pq-localize-xx.js"></script>

<!--Include pqTouch file to provide support for touch devices (optional)-->
    <script type="text/javascript" src="path to pqtouch.min.js" ></script>   

Sample stackblitz

jQuery, jQueryui dependency files can either point to CDN repositories (recommended) or they can point to the files kept on server locally.

For touch support in touch devices, include pqtouch.min.js file from the ParamQuery Pro SDK for versions >= v6.0.0.

NPM Package

Evaluation version of pqgrid can be installed though a nodejs package manager e.g, npm or yarn.

npm i pqgrid

Commercial or OEM version of pqgrid can be installed as a local npm package by pointing "pqgrid" to local file system path in the package.json file -> dependencies section in the project manually.

"dependencies": {
    ...
    "pqgrid": "file:local path to paramquery folder",
    ...
}

pqgrid has following peer dependencies which can also be installed through a package manager.

    jquery
    jquery-ui-pack
    @types/jquery
    @types/jqueryui
    jszip

Dependencies are kept as peer dependencies for efficiency, though you can make them private dependencies by editing package.json file inside pqgrid package if there is any version conflict with any other package. e.g, pqgrid is dependent upon version 2.5 of jsZip and if there is any other package in your project with peer dependency on jsZip any other version, then you can make jsZip a private dependency either in pqgrid or that other package.

pqgrid exports pq module which is imported into your application by

import pq from 'pqgrid';

At least one localization is mandatory which is imported by

import 'pqgrid/localize/pq-localize-en.js';

All css files for pqgrid and dependencies are included commonly in styles.css using @import

/* Add application styles & imports to this file! */
@import '~jquery-ui-pack/jquery-ui.css';
@import '~jquery-ui-pack/jquery-ui.structure.css';

@import '~jquery-ui-pack/jquery-ui.theme.css';

@import '~pqgrid/pqgrid.min.css';
@import '~pqgrid/pqgrid.ui.min.css';
@import '~pqgrid/themes/steelblue/pqgrid.css';
@import '~pqgrid/pq-icons/pq.css'; /* optional; since version 9.0.0 */

Create First jQuery Grid

Note: Angular, React and Vue users may skip this topic.

Within the jQuery ready function, initialize the grid as $( ".selector" ).pqGrid( obj ); where obj is a PlainObject passed to the pqGrid constructor function.

obj provides information about width, height, columns information, data, location and type of data, etc.

colModel and dataModel are the 2 main keys of information in the obj.

As their names indicate, the main role of dataModel is to provide data and data related information to the grid whereas colModel provides information specific to the columns i.e titles, widths, data type (used for sorting), etc. Please check API section to see the comprehensive list of options which can be used in obj, dataModel and colModel.

$(function(){

    //JSON data (array of objects) can be defined locally 
    //or might be a response from an AJAX call from web server/service.
    var data = [
        { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
        { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
        { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
        { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
        { rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
        { rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
        { rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
        { rank: 8, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
        { rank: 9, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
        { rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
        { rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
        { rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
        { rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
        { rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
        { rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
        { rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
        { rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
        { rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
        { rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
        { rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
    ];
                
    //array of columns.
    var colModel = [
        { 
            title: "Rank", //title of column. 
            width: 100, //initial width of column
            dataType: "integer", //data type of column
            dataIndx: "rank" //should match one of the keys in row data.
        },
        { 
            title: "Company", 
            width: 200, 
            dataType: "string", 
            dataIndx: "company" 
        },
        { 
            title: "Revenues ($ millions)", 
            width: 150, 
            dataType: "float", 
            align: "right", 
            dataIndx: "revenues" 
        },
        { 
            title: "Profits ($ millions)", 
            width: 150, 
            dataType: "float", 
            align: "right", 
            dataIndx: "profits" 
        }
    ];

    //main object to be passed to pqGrid constructor.    
    var obj = {
        width: 700, //width of grid
        height: 400, //height of grid
        colModel: colModel,
        dataModel: {data: data}
    };    
    
    $("#grid_json").pqGrid( obj ); 
                                   
    //or

    pq.grid("#grid_json", obj ); 
});        

In the body tag define the div tag/tags which act as placeholders for the grid.

<div id="grid_json"></div>

Create First javascript Grid

Note: Angular, React and Vue users may skip this topic.

Within the DOMContentLoaded event callback function, initialize the grid as pq.grid( ".selector", obj ); where obj is a PlainObject passed to the pqGrid constructor function.

obj provides information about width, height, columns information, data, location and type of data, etc.

colModel and dataModel are the 2 main keys of information in the obj.

As their names indicate, the main role of dataModel is to provide data and data related information to the grid whereas colModel provides information specific to the columns i.e titles, widths, data type (used for sorting), etc. Please check API section to see the comprehensive list of options which can be used in obj, dataModel and colModel.

document.addEventListener("DOMContentLoaded", function(event) {
    //JSON data (array of objects) can be defined locally 
    //or might be a response from an AJAX call from web server/service.
    var data = [
        { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
        { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
        { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
        { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
        { rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
        { rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
        { rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
        { rank: 8, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
        { rank: 9, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
        { rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
        { rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
        { rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
        { rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
        { rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
        { rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
        { rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
        { rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
        { rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
        { rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
        { rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
    ];
                
    //array of columns.
    var colModel = [
        { 
            title: "Rank", //title of column. 
            width: 100, //initial width of column
            dataType: "integer", //data type of column
            dataIndx: "rank" //should match one of the keys in row data.
        },
        { 
            title: "Company", 
            width: 200, 
            dataType: "string", 
            dataIndx: "company" 
        },
        { 
            title: "Revenues ($ millions)", 
            width: 150, 
            dataType: "float", 
            align: "right", 
            dataIndx: "revenues" 
        },
        { 
            title: "Profits ($ millions)", 
            width: 150, 
            dataType: "float", 
            align: "right", 
            dataIndx: "profits" 
        }
    ];

    //main object to be passed to pqGrid constructor.    
    var obj = {
        width: 700, //width of grid
        height: 400, //height of grid
        colModel: colModel,
        dataModel: {data: data}
    };    
    
    pq.grid("#grid_json", obj );

});

In the body tag define the div tag/tags which act as placeholders for the grid.

<div id="grid_json"></div>

Create First Angular Grid

ParamQuery adds so much functionality to Angular applications which is not possible otherwise.

It's assumed that you have installed nodejs, npm or yarn, VSCode on your system and you are bit familiar with online code sharing platform Stackblitz.

pqGrid is written in pure javascript and has no internal dependency on Angular API; it's compatible with all Angular versions and is immune to any breaking changes w.r.t different Angular versions.

• First choose any of the Angular example created with Stackblitz from demos section.
• Download the project from the Stackblitz editor.
• Extract all files into a folder on your system.
• Open a command prompt in the same folder.
• Enter npm install or yarn
• Enter ng serve or npm run ng serve
• Enter the url e.g., localhost:4200 (as mentioned in message of your command window) in your browser.
• Open project folder in VSCode to explore / experiment with the example.
• If you face any issue during development in your project, then please share a stackblitz of your issue.

Create First React Grid

ParamQuery adds so much functionality to React applications which is not possible otherwise.

It's assumed that you have installed nodejs, npm or yarn, VSCode on your system and you are bit familiar with online code sharing platform Stackblitz.

pqGrid is written in pure javascript and has no internal dependency on React API; it's compatible with all React versions and is immune to any breaking changes w.r.t different React versions.

• First choose any of the React examples created with Stackblitz from demos section.
• Click on the download icon in the Stackblitz editor.
• Extract all files into a folder on your system.
• Open a command prompt in the same folder.
• Enter npm install or yarn in the command prompt
• Enter npm start in command prompt
• Enter the url localhost:4200 (as mentioned in message of your command window) in your browser.
• Open project folder in VSCode to explore / experiment with the example.
• If you face any issue during development in your project, then share a stackblitz of your issue.

Create First Vue Grid

ParamQuery adds so much functionality to Vue applications which is not possible otherwise.

ParamQuery is written mostly in pure javascript and has no internal dependency on Vue API; it's compatible with all Vue versions and is immune to any breaking changes w.r.t different Vue versions.

pqgrid can be added in any Vue project using either of the following ways:

• script and link tags

  First of all include pqgrid and its dependencies using script/link html tags as mentioned above in Include Files section

  Include vue.js file with script tag e.g.,

  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

  Then define a pqGrid component as follows:

  Vue.component("pq-grid", {
    props: ["options"],
    mounted: function () {
      pq.grid(this.$el, this.options);
    },
    template: '<div :options="options"></<div>'
  });
  

  Sample stackblitz

  ---

• vue-cli

  First create a new vue-cli project or use an existing vue-cli project

  npm i -g @vue/cli

  vue create hello-world

  Pick any preset:

  • Default ([Vue 2] babel, eslint)
  • Default ([Vue 3] babel, eslint)

  cd hello-world

  npm run serve

  Browse http://localhost:8080/ in your browser to verify the project

  Terminate the running Vue.js project by pressing Ctrl-C twice in command prompt.

  Open hello-world folder in vs code. Edit package.json file, add pqgrid and its peer dependencies in "dependencies" section:

      "pqgrid": "^9.1.1",
      "@types/jquery": ">=2.2.1",
      "@types/jqueryui": ">=1.12.21",
      "jquery": ">=2.2.1",
      "jquery-ui-pack": ">=1.12.3",
      "jszip": "2.5.0"    
  

  Use yarn or npm on command prompt to install the newly added dependencies in package.json

  Add a PqGrid.vue file in the src/components folder with following content.

  <template>
      <div :options="options">
      </div>
  </template>
  
  <script>
  import pq from 'pqgrid'
  
  
  //import a localization file
  import 'pqgrid/localize/pq-localize-en.js';
  
  require('jquery-ui-pack/jquery-ui.css');
  require('jquery-ui-pack/jquery-ui.structure.css');
  require('jquery-ui-pack/jquery-ui.theme.css');
  require('pqgrid/pqgrid.min.css')
  require('pqgrid/pqgrid.ui.min.css')
  require('pqgrid/themes/bootstrap/pqgrid.css')
  
  export default {
      name: 'PqGrid',
      props: ["options"],
      mounted: function () {
          console.log(this.options);
          pq.grid(this.$el, this.options);
      }
  }
  </script>
  

  Add following in template section of App.vue

  <PqGrid :options="options"></PqGrid>

  Add import of PqGrid in App.vue

  import PqGrid from './components/PqGrid.vue'
  

  Add PqGrid in components and add pqgrid options inside data()

  export default {
    name: 'App',
    components: {
      PqGrid, ...
    },
    data() {
        return {
            options: {
              showTop: false,
              reactive: true,
              locale: 'en',
              height: "flex",
              ...
            }
        }
    }
  }
  

  Any eslint rules can be updated or added in package.json -> eslintConfig section

  Run the project again with npm serve or yarn serve

  Download sample project, build and run it using npm or yarn.

RTL

How to load data

When dataModel.url is provided, grid constructs the query strings ( for GET requests ) or POST data on its own and send fields to the remote server at the specified url. The fields send by grid have prefix "pq_" for easy identification e.g., pq_curpage, pq_rpp, etc. Complete list of the name of parameters is provided in the next section. Own custom parameters can be added to the fields send by grid to the server with dataModel.postData and dataModel.postDataOnce options.

If full control is required to construct own query strings / POST data sent to server, it can be done with dataModel.getUrl() callback, though it's rarely required.

dataModel.getData() callback is called by the grid when remote data has arrived and ready to be processed by the grid. In this callback useful bits of data can be picked or incoming data can be transformed to make it suitable for grid consumption.

Remote as well as local paging, sorting and filtering can be used when dataModel.location is remote.

Remote requests

Using themes

Either Paramquery or jQueryUI themes can be used

Icons

Icons are used at many places in the grid e.g. in toolbar, pager, grouping icons, etc. You have a choice to use any of the following icons.

Use with Bootstrap

There is a conflict between jQueryUI button & tooltip with bootstrap due to same plugin names. To avoid conflict and use jQueryUI button and toolbar, the following lines of js should be added immediately after boostrap js file is included.

$.fn.bootstrapBtn = $.fn.button.noConflict();
$.fn.bootstrapTooltip = $.fn.tooltip.noConflict();            

Use with Typescript

Significance of dataModel.data

The grid data is stored in dataModel.data in the form of an array of rows. When we use local paging, dataModel.data contains all the data of all the pages, while in case of remote paging, dataModel.data contains the data for current page only. In the latter case, dataModel.data is refreshed every time we move from page to page or we hit refresh button in the pager. In case of local filtering, dataModel.data contains only the filtered rows, as unfiltered rows are stored in a different variable dataModel.dataUF.

Special Variable Names

These are some of the variable names used in API and examples which are named so by convention.

$grid is the name of jQuery object that refers to grid container div.

            var $grid = $( ".selector" ); // e.g., $( "#grid_json" );

            //it can also be obtained from evt.target inside event callback functions.
            var $grid = $( event.target ).closest( '.pq-grid' );

            //it can also be obtained from grid variable.
            var $grid = grid.widget();

            $grid.pqGrid( 'method_name', parameters );

            //it's returned by pq.grid constructor.
            var grid = pq.grid( "#grid_json", options );

            //it can also be obtained from $grid variable as.
            var grid = $grid.pqGrid('instance');            

            //it can also be obtained directly from this context within event callback functions.
            var grid = this;

            grid.method_name( parameters );

Rows metadata

Call pq methods

There are 2 different syntactic ways to call pq methods having same end result:

1. First one is the use of widget name $( ".selector" ).widgetName( 'method_name', parameters ); e.g., $grid.pqGrid( 'refreshRow', { rowIndx: 2} ) where $grid is the jQuery object wrapped on grid container DOM element. This one is safer ( in the sense it prevents accidental or intentional calling of pqGrid private methods ) but it's verbose, bit slower and garbles up the call stack with intermediate calls to jQueryUI framework.

   This way of method calling is used for jQuery only.

   
   
   
2. Second one is use of widget instance instance.method_name( parameters ) e.g., grid.refreshRow( { rowIndx: 2 } ) where grid is a live instance of pqGrid. This one is faster and concise.

   This way of method calling is used for Angular, jQuery, React or Vue.

Use pq events

PQ has a powerful event system to inform about interesting points in the lifecycle of widget.

DOM events and bubbling ( applicable to jQuery/ plain js only ): By default the PQ events are not emitted to DOM elements since v3.2.0 which if required can be turned on by specifying trigger option in the widget to true. The events also don't bubble by default since v3.2.0. Consider case of nested grids where event listener is bound to outer grid for some event; when same event is emitted by inner grid event bubbling leads to invocation of event listener of the outer grid. This can lead to issues unless we are careful to check the currentTarget of event. Again if required, bubbling can be turned on by setting option bubble to true.

Context of events: The context ( i.e., this variable ) is instance of the grid inside callback options ( 1st way ) and instance listeners ( 2nd way ), while it's a reference to DOM element of the widget inside DOM event listeners ( 3rd way ).

Summary of differences between versions:

How to refresh the data or view of grid

pqGrid tries to refresh view on its own prior to version 2.0.2 in most cases when dataModel properties are changed. This behaviour is sometimes undesirable e.g. consecutive calls to API changing dataModel properties may lead to undesirable refreshes and reloads of data which is not good for performance. This has changed starting from 2.0.2 whereby the data or view of grid can be refreshed in a more controlled manner. pqGrid can be refreshed in various ways depending upon what or which part of the grid needs to be refreshed. Please see the below comparison table to know which method to use:

Performance tips

If you are updating lot of rows let's say hundreds or thousands of them with API methods such as updateRow, addClass, removeClass, attr, removeAttr, the grid is bound to get slow because the view is refreshed by these methods by default and DOM updates are inherently slow. In order to prevent refresh of view with each method call, refresh parameter to these methods can be passed as false and one final consolidated refresh can be done with a call to refresh method in the end.

Note: addRow, updateRow & deleteRow accept multiple rows in a single method call as of version 3.2.0.

Same logic can be applied to other methods in the API which cause a view refresh e.g., addRow, deleteRow. These methods also accept refresh as parameter which can be passed as false. But instead of refresh, these require refreshView in the end because these methods change the number of rows.

There are few callbacks such as column.render & rowInit in which view refresh is not required and is unnecessary waste of resources. These callbacks are invoked at a time when view of the grid is being prepared and refresh of the view is anyway due after these callbacks. So for performance sake it's prudent to pass refresh: false as parameters if any of these methods addClass, removeClass, attr, removeAttr are called from these callbacks.

List of classes

Default options.

Localization Strings

Localization strings for different languages are stored in separate js files with their names ending in localization code e.g.,
localization file for spanish is pq-localize-es.js,
for german it's pq-localize-de.js,
for japanese it's pq-localize-ja.js
and so on.

Below are the contents of the localization file pq-localize-en.js

Set / Change Locale

• Setting localization of grid during initialization is done by simply including locale js file in the document before initialization of the grid. If multiple localization files are loaded then the last localization file is used.

• Localization strings for controls like Bootstrap / jQueryUI dialog, button, colorPicker etc can be obtained from jQuery.paramquery.strings which provides the localization strings from the last loaded locale js file.

• Changing localization of the grid in run time is done by loading corresponding locale js file and setting locale option of the grid to the required localization code.

      //change locale to korean.
      grid.option('locale', 'kr');
  

  
  
• Any particular localization string or strings for a specific grid can be set or changed just like normal options e.g.,

  $grid.pqGrid({ strNoRows : 'No Rows found.' });
  

  or

  $grid.pqGrid( 'option', { strNoRows : 'No Rows found.' });
  

Angularjs Integration

Knockoutjs Integration

var gridModel = function(){
    var self = this;
    self.items = ko.observableArray(ko.utils.arrayMap(data, function(item){
        return new company(item);
    }));

    self.gridOptions = {        
        height: 'flex',
        maxHeight: 400,
        colModel: [
            { title: "Rank", dataIndx: 'rank' },
            { title: "Company", dataType: "string", dataIndx: "company",
                //filter:{ type: 'textbox', condition: 'contain', listeners: ['keyup'] } // for < v5.2.0
                filter:{ crules: [{ condition: 'contain' }] } // for >= v5.2.0
            },
            { title: "Revenues", dataType: "float", dataIndx: "revenues" },
            { title: "Profits", dataType: "float", dataIndx: "profits" }
        ],
        title: "Knockoutjs grid",
        filterModel: {on: true, header: true},
        scrollModel: { autoFit: true },
        dataModel: { data: self.items }
    };
};

<div data-bind="pqGrid: gridOptions"></div>

create: function(){
    gridApi = this;
}

Further Reading