20
« Last post by pbassey on April 16, 2025, 06:08:10 pm »
Thank you. I implemented the style setting just below the pggrid .css styles (inside the <body> tag as well as in the <head> section), but neither appear to affect the font size of the grid.
Are there any other settings that might override this?
Below is my pggrid settings:
function exportXlsx() {
var $t = this.toolbar(),
hlAlternateRows = $t.find('.alternateRows').prop('checked');
var blob = this.exportData({
format: 'xlsx',
eachRow: function (row, ri, rowData, rows) {
if (hlAlternateRows && rows.length % 2 != 0) {
row.bgColor = "#f0f0f0";
}
},
linkStyle: "text-decoration:underline;color:#0d6efd;",
skipHiddenCols: $t.find('.xHCols').prop('checked'),
skipHiddenRows: $t.find('.xHRows').prop('checked'),
selection: $t.find('.selectedRows').prop('checked') ? 'row' : '',
render: $t.find('.render').prop('checked')
});
pq.saveAs(blob, "USIndustrySummaryData.xlsx");
}
function groupChg(val){
var lower = Math.floor( val/ 10 ) * 10,
upper = Math.ceil( (val + 1)/ 10 ) * 10;
return lower + " < " + upper;
};
var obj = {
height: 340,
width: '100%',
title: 'CCI/CI Summary',
showTitle: false,
numberCell: {show: false},
rowBorders: true,
dataModel: {
location: "remote", //server side call
dataType: "jsonp",
method: "GET",
url: "/IND/Account/grid_summary?YearVal=" + theYear, //URL
getData: function (dataJSON) {
var data = dataJSON.data;
return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
}
},
colModel: [
{ dataIndx: 'grp', title: 'Source', tpHide: true, menuInHide: true, minWidth: 150 },
{ dataIndx: "Source", 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: 130 },
{ dataIndx: "Projections", title: 'PROJECTIONS', valign: "top", format: '$ #,###,###.00', summary: { type: "sum" }, valign: "top", align: "right", minWidth: 140 },
{ dataIndx: "Proj_Total", title: 'PROJ TOTAL', valign: "top", format: '$ #,###,###.00', summary: { type: "sum" }, valign: "top", align: "right", minWidth: 130 },
{ dataIndx: "Budget", title: 'BUDGET', valign: "top", format: '$ #,###,###.00', summary: { type: "sum" }, valign: "top", align: "right", minWidth: 130 },
{ dataIndx: "Variance", title: 'VARIANCE', valign: "top", format: '$ #,###,###.00', summary: { type: "sum" }, valign: "top", align: "right", minWidth: 130 },
{ dataIndx: "Notes", title: 'NOTES', valign: "top", minWidth: 250 }
],
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: true, //show grand summary row.
dataIndx: ['Source'], //grouping along row axis.
collapsed: [true],
useLabel: true,
summaryEdit: false
},
summaryTitle: {sum: "" },
pageModel: {
type: "remote", //Paging remote
rPP: 100, strRpp: "{0}", //default paging parameters
},
wrap: false,
hwrap:false,
editable: false,
toolbar: {
cls: 'pq-toolbar-export',
items: [
{
type: 'button',
label: "Export to Excel(xlxs) ",
icon: 'ui-icon-arrowthickstop-1-s',
listener: exportXlsx
},
{
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 grid1 = pq.grid( "#Summary", obj);
grid1.option( "selectionModel", {type: 'row', mode: 'single'} );
Recent Posts