Hi Team,
Thank you for your suggestion.
According to your suggestion, I had found out a reason why it is NOT visible any parameters in toolPanel.
When a theme of Dark Hive is selected,PQGrid does NOT show any parameters in toolPanel.
So many questions about pivot mode are cleared.
But options in filter drop down does NOT work correctly.
I will show my source code and screenshot in attached file.
Please more suggestion.
jQuery(function($) {
function groupChg(val){
var lower = Math.floor( val/ 10 ) * 10,
upper = Math.ceil( (val + 1)/ 10 ) * 10;
return lower + " < " + upper;
};
function fillOptions(grid) {
var column = grid.getColumn({ dataIndx: 0 });
column.filter.options = grid.getData({ dataIndx:
column.filter.cache = null;
}
var colM = [
//{title: 'Group', width: 150, tpCls: 'pq-deny-drag'},
{title: "Country", dataIndx: 0, width: 120,
filter: {
type: 'select',
prepend: { '': 'All Countries' },
valueIndx: 0,
labelIndx: 0,
condition: 'equal',
listeners: ['change']
}
},
{title: "Athlete", dataIndx: 1, width: 200 },
{title: "Age", dataIndx: 2, width: 90, align: 'center', dataType:'integer',
groupChange: groupChg
},
{title: "Gold", dataIndx: 3, width: 100, dataType:'integer',
tpCls: 'gold',denyGroup: true, denyPivot: true
},
{title: "Silver", dataIndx: 4, width: 100, dataType:'integer', denyGroup: true},
{title: "Bronze", dataIndx: 5, width: 100, dataType:'integer', denyGroup: true},
{title: "Total", dataIndx: 6, width: 100, dataType:'integer', denyGroup: true },
{title: "Year", dataIndx: 7, width: 90, dataType: 'integer'},
//{title: "Date", dataIndx: "date", dataType:'date', width: 110},
{title: "Sport", dataIndx: 8, width: 110}
];
// var colM = grid.option('colModel');
var groupM = {
on: true, //grouping mode.
pivot: false, //pivotMode
groupCols: [7], //grouping along column axis.
agg:{ //aggregate fields.
[3]: 'sum',
[4]: 'sum',
[5]: 'sum'
},
/*
header: false, //hide grouping toolbar.
*/
grandSummary: true, //show grand summary row.
dataIndx:
- , //grouping along row axis.
collapsed: [ false, true ]
};
var dataM = {
location: "remote",
url: "
https://paramquery.com/pro/demos/Content/olympicWinners.json",
getData: function (data) {
return { data: data };
}
};
var obj = {
height: 500,
// dataModel: dataM,
numberCell: {width: 50},
freezeCols: 1,
rowBorders: false,
colModel: colM,
groupModel: groupM,
summaryTitle: {
avg: "",
count: '',
max: "",
min: "",
stdev: "",
stdevp: "",
sum: ""
},
formulas: [['total', function(rd){
var total = rd.gold + rd.silver + rd.bronze;
return isNaN(total)? "": total;
}]],
filterModel: {on: true, header: true},
load: function(){
fillOptions(this);
},
showTitle: false,
wrap: false,
hwrap:false,
toolPanel:{
show: true //show toolPanel initially.
},
toolbar: {
cls: 'pq-toolbar-export',
items: [
{
type: 'file',
label: 'Import xlsx',
listener: function( evt ){
//import xlsx file via HTML5 file input control.
var file = evt.target.files[0];//doesn't work in IE9.
if(file && file.name.toUpperCase().substr(-5,5) == (".XLSX")){
grid.showLoading();
//import first sheet of xlsx into workbook.
pq.excel.importXl( {file: file, sheets:
//import workbook into grid.
grid.importWb({workbook: wb, headerRowIndx: 0, extraRows: 0, extraCols: 0});
grid.hideLoading();
});
grid.getColumn({dataIndx:0}).filter = {
type:'select',
condition:'range',
options: grid.getData({dataIndx:[0]})
};
grid.refreshHeaderFilter({dataIndx:0});
}
}
},
{
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();
}
}
]
}
};
var grid = pq.grid( "#PQ_Grid", obj);
});
