Recent PQGrid updates have changed several methods—such as
grid.exportData(), grid.importWb(), and Range.copy()—
to be asynchronous. These methods now return Promise objects instead of direct values.
To ensure proper sequencing and compatibility with modern JavaScript, you should use the
async/await pattern. For example:
async function exportData() {
const exportedData = await grid.exportData({ ... });
pq.saveAs(exportedData, "filename.xyz");
}
✅ This ensures the code waits until exportData() finishes before proceeding.
Previously, the same code was written synchronously:
function exportData() {
const exportedData = grid.exportData({ ... });
pq.saveAs(exportedData, "filename.xyz");
}
⚠️ In the latest version, this synchronous approach will no longer work correctly
because exportData() now returns a Promise.
Rich objects have been introduced in this version of PQGrid
to support specialized, non-primitive cell content such as
images, hyperlinks, and custom widgets.
Unlike primitive types—string, number, boolean, or Date—
rich objects require additional lifecycle handling. This is especially important for grid operations like
copy, paste, export, or import, which depend on predictable serialization and rendering.
Structurally, rich objects are plain JavaScript objects that implement specific interface methods for different lifecycle operations. These typically include:
CSV, XLSX, PDF, or HTML
For compatibility with hyperlinks defined in earlier versions using
rowData.pq_cellprop, you must now include an additional property:
inst: 'Link'.
This signals PQGrid to use the built-in hyperlink lifecycle logic:
rowData.pq_cellprop[dataIndx] = {
link: "http://...",
inst: "Link" // Required for compatibility with the new rich object system
};
✅ With inst: 'Link', hyperlinks behave as fully supported
rich objects across rendering, export, and clipboard operations.
In the latest version, PQGrid changed how validation works:
minLen, maxLen, regex, range, etc.) applied even if the field was empty.nonEmpty condition.colModel: [
{
title: "Name",
dataIndx: "name",
validations: [
{ type: 'nonEmpty', msg: "Name is required" }, // required
{ type: 'minLen', value: 3, msg: "At least 3 characters" } // only applies if not empty
]
}
]
Note: Without nonEmpty, the field could be left blank, and minLen won’t trigger anymore.
Always add { type: 'nonEmpty' } when a field must not be blank.
Other conditions now only validate non-empty values.