I found the note regarding the use of LazyLoading for large data sets and tried to implement this for a grid that loads 5000+ XML rows. I used the following code to try and implement and got the Javascript error listed below.
JavaScript Code:
var obj = {
hwrap: true,
wrap: true,
resizable: true,
rowBorders: true,
height: 600,
flex:{one: false},
hoverMode: 'cell',
numberCell: {width: 20},
showTitle: false,
// Toolbar here
toolbar: {
cls: 'pq-toolbar-export',
items: [
{
type: 'button',
label: "Load Raw Data",
icon: 'ui-icon ui-icon-newwin',
listener: function (evt) {
loadSAPData();
}
},
{
type: 'button',
label: "Load Saved Data",
icon: 'ui-icon ui-icon-folder-open',
listener: function (evt) {
dialogLoadExisting.dialog( "open" );
}
},
{
type: 'button',
label: "Export to Excel(xlsx)",
icon: 'ui-icon-document',
listener: function (evt) {
var str = this.exportExcel({render: true });
saveAs(str, "rawDataExport.xlsx");
}
},
{
type: 'textbox',
label: "Filter: ",
attr:'placeholder="Enter text"',
listener:{timeout: function (evt) {
var txt = $(evt.target).val();
var rules = this.getCMPrimary().map(function(col){
return {
dataIndx: col.dataIndx,
condition:'contain',
value: txt
}
})
this.filter({
mode: 'OR',
rules:rules
})
}}
}
]
},
colModel: [
{dataIndx: "PostingDate", title: 'Posting Date', editable: false, valign: "top", width: 90},
{dataIndx: "Account", title: 'Account', editable: false, valign: "top"},
{dataIndx: "AccountName", title: 'Account Name', editable: false, valign: "top", width: 120},
{dataIndx: "ExternalCode", title: 'External Code', editable: false, valign: "top", width: 90},
{dataIndx: "CostCode", title: 'Cost Code', editable: false, valign: "top"},
{dataIndx: "PostingPeriod", title: 'Posting Period', editable: false, valign: "top"},
{dataIndx: "BusinessPartnerCode", title: 'Business Partner Code', editable: false, valign: "top", width: 120},
{dataIndx: "Reference1", title: 'Reference1', editable: false, valign: "top", width: 100},
{dataIndx: "Reference2", title: 'Reference2', editable: false, valign: "top", width: 100},
{dataIndx: "Description", title: 'Posting', editable: false, valign: "top", width: 130},
{dataIndx: "ProfitCenterCode", title: 'Profit Center Code', editable: false, valign: "top"},
{dataIndx: "ProjectCode", title: 'Project Code', editable: false, valign: "top", width: 130},
{dataIndx: "ProjectName", title: 'Project Name', editable: false, valign: "top", width: 130},
{dataIndx: "RegionCode", title: 'Region Code', editable: false, valign: "top"},
{dataIndx: "CountryCode", title: 'Country Code', editable: false, valign: "top"},
{dataIndx: "ProjectCode1", title: 'Project Code', editable: false, valign: "top"},
{dataIndx: "BalanceUSD", title: 'Balance USD', editable: false, valign: "top", format: '$ ##,###.00', align: "right", width: 90 },
{dataIndx: "Debit_USD", title: 'Debit USD', editable: false, valign: "top", format: '$ ##,###.00', align: "right", width: 90 },
{dataIndx: "Credit_USD", title: 'Credit USD', editable: false, valign: "top", format: '$ ##,###.00', align: "right", width: 90 },
{dataIndx: "DebitFC", title: 'Debit FC', editable: false, valign: "top", format: '$ ##,###.00', align: "right", width: 90 },
{dataIndx: "CreditFC", title: 'Credit FC', editable: false, valign: "top", format: '$ ##,###.00', align: "right", width: 90 },
{dataIndx: "BalanceFC", title: 'Balance FC', editable: false, valign: "top", format: '$ ##,###.00', align: "right", width: 90 },
{dataIndx: "UserCode", title: 'User Code', editable: false, valign: "top"},
{dataIndx: "JournalNo", title: 'Journal No', editable: false, valign: "top"},
{dataIndx: "JournalVoucherNo", title: 'Journal Voucher No', editable: false, valign: "top"},
{dataIndx: "TransactionCode", title: 'Transaction Code', editable: false, valign: "top"},
{dataIndx: "TransactionCodeDesc", title: 'Transaction Code Desc', editable: false, valign: "top"},
{dataIndx: "GAAP_ID", title: 'GAAP ID', editable: false, valign: "top", width: 90}
],
pageModel: { type: "local", rPP: 500 },
dataModel: {
cache: false,
//location: "remote",
location: "lazy",
sortDir: "down",
sorting: "local",
dataType: "xml",
url: "/ind/content/files/data/rawData.xml",
recIndx: "recID",
getData: function (dataDoc) {
var obj = { itemParent: "item", itemNames: ["recID", "PostingDate", "Account", "AccountName", "ExternalCode", "CostCode", "PostingPeriod", "BusinessPartnerCode", "Reference1", "Reference2", "Description",
"ProfitCenterCode", "ProjectCode", "ProjectName", "RegionCode", "CountryCode", "ProjectCode1", "BalanceUSD", "Debit_USD", "Credit_USD", "DebitFC", "CreditFC",
"BalanceFC", "UserCode", "JournalNo", "JournalVoucherNo", "TransactionCode", "TransactionCodeDesc", "GAAP_ID" ] };
return { data: $.paramquery.xmlToJson(dataDoc, obj) };
}
},
load: function (evt, ui) {
var grid = this,
data = grid.option('dataModel').data;
grid.widget().pqTooltip(); //attach a tooltip.
// validate the data.
grid.isValid({ data: data });
// Set the cell selction to single cells rather than range of cells
rid.option( "selectionModel", {type: 'cell', mode: 'single'} );
}
};
var grid = pq.grid("#rawData", obj);
Below is the JavaScript error I am getting:
[Error] TypeError: undefined is not an object (evaluating 'r.length')
success (pqgrid.min.js:9:362910)
fire (jquery.js:3500)
fireWith (jquery.js:3630)
done (jquery.js:9796)
(anonymous function) (jquery.js:10057)
The only setting I changed was the Location tag (from remote to lazy) under the dataModel section.
Please advise.
