Can you tell me what I am doing wrong? I am trying to display the Grid Title and the Toolbar on the row below the title. Based on the code below I am only seeing the Grid Title and NO toolbar.
$(function () {
function groupChg(val){
var lower = Math.floor( val/ 10 ) * 10,
upper = Math.ceil( (val + 1)/ 10 ) * 10;
return lower + " < " + upper;
};
var colM = [
{dataIndx: 'grp', title: 'Sources', tpHide: true, menuInHide: true, minWidth: 150 },
{dataIndx: "SummSources", title: "Cost/Expense Items", hidden: true, filter:{groupIndx: 'CCIAccountDesc'} },
{dataIndx: "CCIAccountDesc", title: "Cost/Expense Items", minWidth: 450 },
{dataIndx: "Actual_YTD", title: 'ACTUAL YTD', valign: "top", format: '$ #,###,###.00', summary: {type: "sum" }, valign: "top", align: "right", minWidth: 120},
{dataIndx: "Projections", title: 'PROJECTIONS', valign: "top", format: '$ #,###,###.00', summary: {type: "sum" }, valign: "top", align: "right", minWidth: 120},
{dataIndx: "Proj_Total", title: 'PROJ TOTAL', valign: "top", format: '$ #,###,###.00', summary: {type: "sum" }, valign: "top", align: "right", minWidth: 120},
{dataIndx: "Budget", title: 'BUDGET', valign: "top", format: '$ #,###,###.00', summary: {type: "sum" }, valign: "top", align: "right", minWidth: 120},
{dataIndx: "Variance", title: 'VARIANCE', valign: "top", format: '$ #,###,###.00', summary: {type: "sum" }, valign: "top", align: "right", minWidth: 120},
{dataIndx: "Notes", title: 'NOTES', valign: "top", minWidth: 250}
];
colM.forEach(function(col){
col.menuIcon = true;
col.filter = { condition: 'range'};
})
var groupModel = {
on: true, //grouping mode.
pivot: false, //pivotMode
checkbox: false,
checkboxHead: false,
select: true,
titleIndx: 'grp', //v7.0.0: new option instead of titleInFirstCol
indent: 20,
fixCols: false,
groupCols: ['CCIAccountDesc'], //grouping along column axis.
header: false, //hide grouping toolbar.
grandSummary: false, //show grand summary row.
dataIndx: ['SummSources'], //grouping along row axis.
collapsed: [ true ],
useLabel: true,
summaryEdit: false
};
var dataModel = {
cache: false,
location: "remote",
sortDir: "down",
sorting: "local",
dataType: "xml",
url: "/ind/content/files/data/indFundsTotal.xml",
recIndx: "recID",
getData: function (dataDoc) {
var obj = { itemParent: "item", itemNames: ["recID", "SummSources", "CCIAccount", "CCIAccountDesc", "Actual_YTD", "Projections", "Proj_Total", "Budget", "Variance", "Notes" ]};
return { data: $.paramquery.xmlToJson(dataDoc, obj) };
}
};
var obj = {
height: 350,
width: '100%',
title: 'US Industry Funds',
numberCell: {show: false},
rowBorders: true,
dataModel: dataModel,
colModel: colM,
groupModel: groupModel,
summaryTitle: {sum: "" },
wrap: false,
hwrap:false,
editable: false,
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, "INDSummaryData.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
})
}}
}
]
},
toolPanel:{
show: false //show toolPanel initially.
},
//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 grid3b = pq.grid( "#Industry", obj);
grid3b.option( "selectionModel", {type: 'row', mode: 'single'} );
});
