ParamQuery Pro 5.0.0 Upgrade Guide

Overview

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

General Changes

Virtual scrolling is replaced with native browser scrolling to enable smooth scrolling in virtual mode.

Virtual swipe in touch devices is replaced with native touch scrolling of devices.

Rows & columns are always displayed in virtual mode now, hence virtualX, virtualY options are ignored.

It has an impact on scroll API, row heights, markup of building blocks of grid.

Grid

Row Height

In previous versions, row height is always auto i.e., height is always equal to the content height. Now we have the option to fix row heights with new options i.e., rowHt, rowHtHead, rowHtSum ( for same height of all rows ) and rowData.pq_ht. for individual different height of rows.

Auto Row Height

To make the row heights auto, autoRow, autoRowHead, autoRowSum are set by default to true in which case row height of body, header and footer cells becomes equal to the content height.

Auto row heights are calculated asynchronously and for the cells currently displayed in viewport.

To disable auto row heights, set these options to false.

Scrollbar API

Virtual scrollbars are removed and there is new API based on native scrollbars:

  • Options: scrollModel.timeout
  • Methods: scrollCell, scrollX, scrollY, scrollXY
  • Events: scroll, scrollStop

Also the scrolling is now asynchronous, hence all new and old scrolling methods accept a callback parameter which is called by the grid when scrolling is complete.

Detail View

Detail view is of fixed height based upon new option: detailModel.height. To get auto height for detail view, you need to include javascript-detect-element-resize/jquery.resize.js in the document.

Markup

Cells and rows in grid are now absolute positioned divs ( attributed with ARIA role="gridcell" and role="row" for screen readers ) instead of td and tr respectively. If you have any css rules based on td or tr tag name selectors, replace them with class name selectors i.e., ".pq-grid-cell" & ".pq-grid-row". Also the position css rule for any building block of grid shouldn't be changed.