Hi,
I am using ParamQuery latest version and i am facing issues in loading data using below script , it is taking so much time in loading as compared to free version.
There are almost 12 to 13 thousand records in database.
Also it is a pro version but still not working regarding scrolling too.
Please check below script and provide solution to improve loading and scrolling issue as well.
Here is below script using for getting data from database:
$(function () {
var autoCompleteEditor = function (ui) {
var $inp = ui.$cell.find("input");
//initialize the editor
$inp.autocomplete({
source: (ui.dataIndx == "books" ? books : "status.php?getStatus"),
selectItem: { on: true }, //custom option
highlightText: { on: true }, //custom option
minLength: 0
}).focus(function () {
//open the autocomplete upon focus
$(this).autocomplete("search", "");
});
}
var obj = {
hwrap: false,
resizable: true,
rowBorders: false,
virtualX: true,
numberCell: { show: true },
trackModel: { on: true }, //to turn on the track changes.
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener:
{ "click": function (evt, ui) {
//append empty row at the end.
var rowData = { ProductName: 'new product', UnitPrice: 0.2 }; //empty row
var rowIndx = $grid.pqGrid("addRow", { rowData: rowData });
$grid.pqGrid("goToPage", { rowIndx: rowIndx });
$grid.pqGrid("setSelection", null);
$grid.pqGrid("setSelection", { rowIndx: rowIndx, dataIndx: 'ProductName' });
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("history", { method: 'undo' });
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("history", { method: 'redo' });
}
},
options: { disabled: true }
},
{
type: "<span class='saving'>Saving...</span>"
}
]
},
scrollModel: {
autoFit: true
},
historyModel: {
checkEditableAdd: true
},
editModel: {
//allowInvalid: true,
saveKey: $.ui.keyCode.ENTER,
uponSave: 'next'
},
editor: {
select: true
},
title: "<b>Auto save</b>",
change: function (evt, ui) {
//debugger;
if (ui.source == 'commit' || ui.source == 'rollback') {
return;
}
console.log(ui);
var $grid = $(this),
grid = $grid.pqGrid('getInstance').grid;
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 == 'add') {
var valid = grid.isValid({ rowData: newRow, allowInvalid: true }).valid;
if (valid) {
addList.push(newRow);
}
}
else if (type == 'update') {
var valid = grid.isValid({ rowData: rowData, allowInvalid: true }).valid;
if (valid) {
if (rowData[recIndx] == null) {
addList.push(rowData);
}
//else if (grid.isDirty({rowData: rowData})) {
else {
updateList.push(rowData);
}
}
}
else if (type == 'delete') {
if (rowData[recIndx] != null) {
deleteList.push(rowData);
}
}
}
if (addList.length || updateList.length || deleteList.length) {
$.ajax({
url: '/pro/products/batch',
data: {
list: JSON.stringify({
updateList: updateList,
addList: addList,
deleteList: deleteList
})
},
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
$(".saving", $grid).show();
},
success: function (changes) {
//commit the changes.
grid.commit({ type: 'add', rows: changes.addList });
grid.commit({ type: 'update', rows: changes.updateList });
grid.commit({ type: 'delete', rows: changes.deleteList });
},
complete: function () {
$(".saving", $grid).hide();
}
});
}
},
history: function (evt, ui) {
var $grid = $(this);
if (ui.canUndo != null) {
$("button.changes", $grid).button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$("button:contains('Redo')", $grid).button("option", "disabled", !ui.canRedo);
}
$("button:contains('Undo')", $grid).button("option", { label: 'Undo (' + ui.num_undo + ')' });
$("button:contains('Redo')", $grid).button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
colModel: [
{ title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 150 },
{ title: "Status", width: 165, dataIndx: "Status",
editor: {
type: "textbox",
init: autoCompleteEditor
}
},
{ title: "Page", width: 200, dataType: "string", dataIndx:"Page"},
{ title: "Layout", width: 200, dataType: "string", dataIndx:"Layout"},
{ title: "Part Number", width: 300, dataType: "string", dataIndx:"Part Number"},
{ title: "Type", width: 200, dataType: "string", dataIndx:"Type"},
{ title: "Material Type", width: 300, dataType: "string", dataIndx:"Material Type"},
{ title: "Finish", width: 200, dataType: "string", dataIndx:"Finish"},
{ title: "Inch/ Metric", width: 300, dataType: "string", dataIndx:"Inch/ Metric"},
{ title: "Shoulder Diameter", width: 300, dataType: "string", dataIndx:"Shoulder Diameter"},
{ title: "Shoulder Length", width: 300, dataType: "string", dataIndx:"Shoulder Length"},
{ title: "Shoulder Diameter Tolerance", width: 300, dataType: "string", dataIndx:"Shoulder Diameter Tolerance"},
{ title: "Shoulder Length Tolerance", width: 350, dataType: "string", dataIndx:"Shoulder Length Tolerance"},
{ title: "Thread Size", width: 300, dataType: "string", dataIndx:"Thread Size"},
{ title: "Thread Length", width: 300, dataType: "string", dataIndx:"Thread Length"},
{ title: "Thread Fit", width: 250, dataType: "string", dataIndx:"Thread Fit"},
{ title: "Drive System", width: 300, dataType: "string", dataIndx:"Drive System"},
{ title: "Drive Size", width: 250, dataType: "string", dataIndx:"Drive Size"},
{ title: "Head Diameter", width: 250, dataType: "string", dataIndx:"Head Diameter"},
{ title: "Head Height", width: 250, dataType: "string", dataIndx:"Head Height"},
{ title: "Dimensional Specification", width: 200, dataType: "string", dataIndx:"Dimensional Specification"},
{ title: "Applications", width: 200, dataType: "string", dataIndx:"Applications"},
{ title: "USA / Import", width: 300, dataType: "string", dataIndx:"USA / Import"},
{ title: "Metal / Plastic", width: 300, dataType: "string", dataIndx:"Metal / Plastic"},
{ title: "Material", width: 250, dataType: "string", dataIndx:"Material"},
{ title: "Grade", width: 200, dataType: "string", dataIndx:"Grade"},
{ title: "Full / Partial Thread", width: 200, dataType: "string", dataIndx:"Full / Partial Thread"},
{ title: "Thread Direction", width: 200, dataType: "string", dataIndx:"Full / Partial Thread"},
{ title: "name (misc)", width: 200, dataType: "string", dataIndx:"name (misc)"},
{ title: "Style", width: 200, dataType: "string", dataIndx:"Style"},
{ title: "Tolerance Type", width: 200, dataType: "string", dataIndx:"Tolerance Type"},
{ title: "Shoulder Diameter Decimal SORT Equivalent", width: 200, dataType: "string", dataIndx:"Shoulder Diameter Decimal SORT Equivalent"},
{ title: "Shoulder Length Decimal SORT Equivalent", width: 200, dataType: "string", dataIndx:"Shoulder Length Decimal SORT Equivalent"},
{ title: "Shoulder Size", width: 200, dataType: "string", dataIndx:"Shoulder Size"},
{ title: "Head Style", width: 200, dataType: "string", dataIndx:"Head Style"},
{ title: "Head Appearance", width: 200, dataType: "string", dataIndx:"Head Appearance"},
{ title: "Color (non-metallic)", width: 200, dataType: "string", dataIndx:"Color (non-metallic)"},
{ title: "Country of Origin", width: 200, dataType: "string", dataIndx:"Country of Origin"},
{ title: "Minimum Rockwell Hardness", width: 200, dataType: "string", dataIndx:"Minimum Rockwell Hardness"},
{ title: "Miaximum Rockwell Hardness", width: 200, dataType: "string", dataIndx:"Miaximum Rockwell Hardness"},
{ title: "Minimum Tensile Strength", width: 200, dataType: "string", dataIndx:"Minimum Tensile Strength"},
{ title: "DFARS", width: 200, dataType: "string", dataIndx:"DFARS"},
{ title: "RoHS", width: 200, dataType: "string", dataIndx:"RoHS"},
{ title: "Unit", width: 200, dataType: "string", dataIndx:"Unit"},
{ title: "Pack Size", width: 200, dataType: "string", dataIndx:"Pack Size"},
{ title: "Pack Type", width: 200, dataType: "string", dataIndx:"Pack Type"},
{ title: "Old List Price", width: 200, dataType: "string", dataIndx:"Old List Price"},
{ title: "Edge List 051915", width: 200, dataType: "string", dataIndx:"Edge List 051915"},
{ title: "Alternate Part", width: 200, dataType: "string", dataIndx:"Alternate Part"},
{ title: "Edge Class", width: 200, dataType: "string", dataIndx:"Edge Class"},
{ title: "Edge Description", width: 200, dataType: "string", dataIndx:"Edge Description"},
{ title: "Notes", width: 200, dataType: "string", dataIndx:"Notes"},
{ title: "", editable: false, minWidth: 83, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>Delete</button>";
}
}
],
pageModel: { type: "local", rPP: 20 },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ProductID",
url: "products.php", //for PHP
getData: function (response) {
return { data: response.data };
}
},
load: function (evt, ui) {
var grid = this,
data = grid.option('dataModel').data;
grid.widget().pqTooltip(); //attach a tooltip.
//validate the whole data.
grid.isValid({ data: data });
},
refresh: function () {
$("#grid_editing").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors'} })
.unbind("click")
.bind("click", function (evt) {
var $tr = $(this).closest("tr");
var rowIndx = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
$grid.pqGrid("deleteRow", { rowIndx: rowIndx });
});
}
};
var $grid = $("#grid_editing").pqGrid(obj);
});
Kindly respond me soon regarding this.
Thanks
