ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: pbassey on April 16, 2025, 01:07:21 am
-
Can you tell me what the command is in ParamQuery to set the entire grid to the following:
.pq-grid {
font-family: 'Arial', sans-serif;
font-size: 14px;
}
I placed the above style setting just about the javascript and it did not have any effect on the font size of the text in the grid.
Thanks...
-
The css rule needs to be placed after the css files of pqgrid.
<style>
.pq-grid{
font-family: Arial, sans-serif;
font-size: 20px;
}
</style>
https://jsfiddle.net/8h7gadys/
-
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'} );
-
There might be other css rules on the page that can affect it.
Either you find and resolve those rules or override other rules by adding !important to the affected css rule.
<style>
.pq-grid{
font-family: Arial, sans-serif !important;
font-size: 20px !important;
}
</style>