Overview

This guide is meant to assist in upgrading from ParamQuery Pro 2.x to ParamQuery Pro 3.0.0. All changes which are impacted by upgrade are listed below, along with how to upgrade your code to work with PQ Pro 3.x. For new features please refer the changeLog included in the SDK.

General Changes

Official support for bootstrap (version 3.x) has been added with this version. That implies PQ plugins can not only be used in bootstrap environment but bootstrap specific classes e.g., table-striped, table-bordered, etc and bootstrap glyphicons can also be used in the plugins.

Grid

Layout

The box-sizing css property of grid has been changed to border-box in order to make it bootstrap compatible. This has bearing on how width/height is assigned to grid. Previously we used to assign width/height as 100%-2 (subtraction of 2px due to 1px wide border on both sides ) when it was supposed to fill the entire space of its parent. Now simply 100% is sufficient as there is no need to take the grid border width into account.

The grid header cells have been changed from td to th. So any css rule for the header cells that involves td, requires change to th.

font-family & font-size have been removed from grid css, which implies that grid inherits them from the document. If there is a need to explicitly define them for the grid, it can be done as .pq-grid { font-family: Arial; font-size: 12px; }

Files

Previously there was only one main css file e.g., pqgrid.css (min/dev) but now there are 2 more css files i.e, pqgrid.bootstrap.css and pqgrid.ui.css. For bootstrap pqgrid.css & pqgrid.bootstrap.css are required and for jQueryUI theme, pqgrid.css & pqgrid.ui.css files are required.

pqgrid.css & pqgrid.bootstrap.css
pqgrid.css & pqgrid.ui.css

Bootstrap

To turn on the bootstrap support & classes, set the bootstrap.on to true and include bootstrap.css, pqgrid.css & pqgrid.bootstrap.css files in the document.

Sorting

Sorting module has been revamped in this version and dataModel.sortIndx, dataModel.sorting, dataModel.sortDir & sortable properties have been replaced by sortModel. For partial backward compatibility, grid reads static assignment of dataModel.sortIndx properties and converts them into corresponding sortModel properties, but if sorting parameters are changed after initialization and for sortable property, they need to be changed for this version keeping in view the following. e.g.,

dataModel: { sortIndx: [ 'product' ], sortDir: [ 'up' ], sorting: 'local' }
is equivalent to
sortModel: { sorter: [{ dataIndx: 'product', dir: 'up' }], single: false, type: 'local' }

dataModel: { sortIndx: 'product', sortDir: 'up', sorting: 'local' }
is equivalent to
sortModel: { sorter: [{ dataIndx: 'product', dir: 'up' }], single: true, type: 'local' }

{ sortable: false }
is equivalent to
sortModel: { on: false }

Filtering

In previous versions filterModel.type was assumed to be same as dataModel.location. In v3.0.0, the default value of filterModel.type has been set to "local" so filterModel.type has to be explicitly set to "remote" when remote filtering is required.

Select

Files

Previously there was only one main css file e.g., pqselect.css (min/dev) but now there is one more css files i.e, pqselect.bootstrap.css to support bootstrap themes and bootstrap specific classes. However pqselect.css alone is sufficient for jQueryUI themes.

pqselect.css & pqselect.bootstrap.css
pqselect.css

Bootstrap

To turn on the bootstrap support & classes, include bootstrap.css, turn the bootstrap.on to true. Both pqselect.css & pqselect.bootstrap.css files are needed in order to support bootstrap classes.