I have a server environment that will not support the use of a JSON file for the Pivot Grid. I would like to use XML but I am encountering issues when generating the Pivot Grid.
Below is a sample of the XML data:
**********************************************************************************************************************************
**********************************************************************************************************************************
<?xml version="1.0"?>
<entry>
<item id="0">
<glname>Tel/Fax</glname>
<glcode>604012</glcode>
<amount>2279.4</amount>
</item>
<item id="1">
<glname>Rent & Utilities</glname>
<glcode>604000</glcode>
<amount>704.3</amount>
</item>
<item id="2">
<glname>Tel/Fax</glname>
<glcode>604012</glcode>
<amount>100</amount>
</item>
<item id="3">
<glname>Rent & Utilities</glname>
<glcode>604000</glcode>
<amount>35</amount>
</item>
<item id="4">
<glname>Tel/Fax</glname>
<glcode>604012</glcode>
<amount>571.8</amount>
</item>
</entry>
Below is my Pivot Grid code:
$(function () {
function groupChg(val){
var lower = Math.floor( val/ 10 ) * 10,
upper = Math.ceil( (val + 1)/ 10 ) * 10;
return lower + " < " + upper;
};
var colM = [
//extra column to show grouping (for both pivot and row grouping mode, used along with groupModel.titleIndx )
{
title: 'Group', tpHide: true, menuInHide: true,
dataIndx: 'grp'
},
{
title: "G/L Name",
width: 130,
dataIndx: "glname",
filter:{
groupIndx: 'glcode'
}
},
{
title: "G/L Code",
dataIndx: "glcode",
width: 110
},
{
title: "Total",
width: 120,
format: '$##,###.00',
summary: {
type: "sum"
},
dataType: "float",
dataIndx: "amount"
}
];
colM.forEach(function(col){
col.menuIcon = true;
col.filter = { condition: 'range'};
})
var groupModel = {
on: true, //grouping mode.
pivot: true, //pivotMode
checkbox: true,
checkboxHead: true,
select: true,
titleIndx: 'grp', //v7.0.0: new option instead of titleInFirstCol
indent: 20,
fixCols: false,
groupCols: ['glcode'], //grouping along column axis.
header: false, //hide grouping toolbar.
grandSummary: true, //show grand summary row.
dataIndx: ['glname'], //grouping along row axis.
collapsed: [ true ],
useLabel: true,
summaryEdit: false
};
var dataModel = {
cache: true,
location: "remote",
sortDir: "down",
sorting: "local",
dataType: "xml",
url: "/sts/content/files/data/rawData.xml",
getData: function (dataDoc) {
debugger;
$(dataDoc).find("amount").each(function(i,pNode){
var txt=$(pNode).text();
txt=txt.replace("$","");
$(pNode).text(txt);
});
var obj = { itemParent: "entry", itemNames: ["glname", "glcode", "amount" ] };
return { data: $.paramquery.xmlToJson(dataDoc, obj) };
}
};
var obj = {
height: 500,
dataModel: dataModel,
numberCell: {width: 50},
freezeCols: 1,
flex:{one: true},
rowBorders: false,
colModel: colM,
groupModel: groupModel,
//sortModel: { sorter:[{dataIndx: 'country'}] },
summaryTitle: {
sum: ""
},
showTitle: false,
wrap: false,
hwrap:false,
editable: false,
toolPanel:{
show: true //show toolPanel initially.
},
toolbar: {
cls: 'pq-toolbar-export',
items: [
{
type: 'button',
label: "Export to Excel(xlsx)",
icon: 'ui-icon-document',
listener: function (evt) {
var str = this.exportExcel({render: true });
saveAs(str, "pivot.xlsx");
}
},
{
type: 'button',
label: "Toolbar Panel",
icon: 'ui-icon-wrench',
listener: function (evt) {
this.ToolPanel().toggle();
}
},
{
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
})
}}
}
]
},
//use pivotCM event to make grouped columns collapsible.
pivotCM: function(evt, ui) {
//add collapsible to grouped parent columns.
this.Columns().each(function(col){
var cm = col.colModel
if(cm && cm.length>1 && !col.collapsible)
col.collapsible = {on: true, last: true};
}, ui.CM);
}
};
var grid = pq.grid( "#TaxAlloc", obj);
});
**********************************************************************************************************************************
**********************************************************************************************************************************
The first screenshot is what the grid SHOULD look like.
The second attachment is a screenshot of what the grid looks like right now.
- Can you please let me know what you believe is causing the grid to render this way??
Thank you very much for your time.
-P
