ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: rgorantla on October 30, 2017, 10:49:45 pm
-
Hi,
Have 1000 rows and 129 columns. if i load 350 rows it it taking 3 sec but more than that it is taking long time.(20-30 sec)
SQL - 500 ms - so no issue there. I think the problem is - long json taking time in datamodel.
Any thoughts?
How do we load chunks of data and append later?
-
That might be due to non virtual mode.
Please enable virtual mode by
adding virtualX: true and virtualY: true to main grid initialization object.
-
This is my obj and i do have Virtual mode on
var obj = {
dataModel: dataModel,
width: "100%",
height: 425,
copy: false,
virtualX: true,
virtualY: true,
fillHandle: 'vertical',
filterModel: { type: 'local', header: true },
pageModel: { type: 'local', rPP: 800, rPPOptions: [800, 1600] },
scrollModel: { lastColumn: null },
colModel: columns,
editModel: {
clicksToEdit: 1
},
selectionModel: { column: true },
numberCell: false,
freezeCols: 1,
resizable: true,
// For Auto Save Functionality //
change: function (evt, ui)
{
if (ui.source == 'commit' || ui.source == 'rollback') {
return;
}
var rowList = ui.rowList,
addList = [],
// recIndx = grid.option('dataModel').recIndx,
deleteList = [],
updateList = [];
for (var i = 0; i < rowList.length; i++) {
var obj = rowList,
rowIndx = obj.rowIndx,
newRow = obj.newRow,
type = obj.type,
rowData = obj.rowData;
if (type == 'update') {
var valid = grid.isValid({ rowData: rowData, allowInvalid: true }).valid;
if (valid) {
var jsonstring = { ..... };
updateList.push(jsonstring);
}
}
}
if (updateList.length)
{
var allvalues = { items: updateList }
$.ajax({
url: url,
//data: JSON.stringify(allvalues),
data: JSON.stringify({ allvalues: allvalues, }),
dataType: "json",
type: "POST",
contentType: 'application/json; charset=utf-8',
async: true,
beforeSend: function (jqXHR, settings) {
$(".saving", grid).show();
},
success: function (changes) {
var state = grid.saveState({ save: false });
saveState(state);
//commit the changes.
//grid.commit({ type: 'update', rows: changes.updateList });
},
complete: function () {
$(".saving", grid).hide();
}
});
}
},
create: function (evt, ui) {
loadState(this);
},
toolbar: {
items: [
{
type: 'select',
cls: 'columnSelector',
attr: "multiple='multiple'", style: "height:60px;",
options: function (ui) {
var CM = this.getColModel(),
opts = [];
for (var i = 0; i < CM.length; i++) {
var obj = {},
column = CM;
//if (column.cls != "default") {
obj[column.dataIndx] = column.title;
//}
opts.push(obj);
}
return opts;
},
listener: function (evt) {
var selectedarray = [];
var newCM = [];
//get array of sel ected options in select list.
var arr = $(evt.target).find("option:selected").map(function () {
return this.value;
}).get(),
CM = this.getColModel();
//newCM.push(ColSelectorVals);
for (var i = 0; i < CM.length; i++) {
var column = CM;
// if (column.cls != "default") {
column.hidden = ($.inArray(dataIndx, arr) === -1);
// }
if (!($.inArray(CM.dataIndx, ColSelectorVals) === -1)) {
newCM.push(column);
}
}
for (var i = 0; i < CM.length; i++) {
var column = CM,
dataIndx = column.dataIndx;
// if (column.cls != "default") {
//hide the column if not a selected option.
column.hidden = ($.inArray(dataIndx, arr) === -1);
// }
if ($.inArray(CM.dataIndx, ColSelectorVals) === -1) {
newCM.push(column);
}
}
this.option("colModel", newCM); // Changing the colmodel to refelect new colmodel i.e., to add columsn at the end not how they are defined.
var CM = this.getColModel(),
selopts = [];
for (var i = 0; i < CM.length; i++) {
var column = CM;
if (column.hidden !== true) {
selopts.push(column.dataIndx);
}
}
ColSelectorVals = selopts.slice(0);// Making the newly selected columns to stay where they are i.e., any new columns will be added at the end not.
this.option("colModel", this.option("colModel")); //refresh the colModel.
this.refresh();
var state = this.saveState({ save: false });
saveState(state);
}
}]
},
columnOrder: function (event, ui) {
var state = this.saveState({ save: false });
saveState(state);
}
-
data binding is quite fast in the grid, takes only fraction of a second for very large number of rows/ columns.
Next thing to check is how much time it takes to load data in the browser.
You can check it by loading the dataModel url directly in the browser. Time taken can also be checked by opening up network tab in the developer tools in your browser developer tools.
Loading data in chunks is fine for read only data, but it can't be used with batch editing.
You can also look into reducing the number of rows per page if response from your web server/ network is slow.
-
Most of the data is read only - can you suggest how to do chunks of data?
-
These are the 2 examples of loading data in multiple requests:
https://paramquery.com/pro/demos/virtual_scroll
https://paramquery.com/pro/demos/infinite_scroll