I am using version 3.3.0.
#Sample script for rendering grid
var data = json with 100000 objects in data
var renderGrid = function (container, title, headers, data, exportHandler) {
var str = JSON.stringify(data).replace(/\bNaN\b/g, "");
str = str.replace(/\bNAN\b/g, "");
data = JSON.parse(str);
var grid = {
title: title,
topVisible: false,
flexHeight: false,
showTop: true,
showBottom: true,
showHeader: true,
roundedCorners: true,
hoverMode: 'row',
numberCell: {width: 70, resizable: true},
virtualX: true,
virtualY: true,
virtualXHeader: false,
width: 'auto',
flex: { one: true },
selectionModel: {type: 'row', mode: 'single', fireSelectChange: true},
filterModel: {on: true, mode: "AND", header: true},
collapsible: {on: false},
toolbar: {
cls: 'pq-toolbar-crud',
style: 'text-align: right;',
items: [
{
type: 'button',
style: 'font-size: 10px; padding: 5px;',
label: 'Export to CSV',
icon: 'ui-icon-plus',
listeners: [{click: exportHandler}]
}
]
}
};
grid.colModel = headers;
grid.dataModel = {
data: data,
location: "local",
sorting: "local"
};
var pqGridObj = $(container).pqGrid(grid);
var tempGrid = pqGridObj.pqGrid("getInstance").grid;
for (var i in headers) {
if (headers.dataType == "string") {
headers.align = "left";
}
var filter = headers.filter;
if (filter.type == "select" && filter.attr == "multiple" && filter.condition == "range") {
filter.cache = null;
filter.options = tempGrid.getData({dataIndx: [headers.dataIndx]});
}
}
return pqGridObj;
};
renderGrid("#divId", "title", data.headers, data.data);
