Show Posts

1

Help for ParamQuery Grid (free version) / Tool tips on Grpup level columns

« on: April 25, 2026, 12:31:50 am »

I have the following grid code:

var obj = {
height: 540,
width: '100%',
dataModel: {
location: "remote", //server side call
dataType: "jsonp",
method: "GET",
url: "/APS/Activity/grid_Activity?yearValue=" + theYear + "&sourceValue=" + source, //URL
getData: function (dataJSON) {
var data = dataJSON.data;
return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
}
},
numberCell: { width: 40 },
freezeCols: 1,
flex: { one: true },
rowBorders: false,
colModel: [
{ dataIndx: 'KeyRec', title: 'KeyRec', hidden: true, editable: false },
{ dataIndx: 'SummKeyRec', title: 'SummKeyRec', hidden: true, editable: false },

{ dataIndx: 'ActivityYear', title: 'ActivityYear', hidden: true, editable: false },

{ dataIndx: 'grp', title: 'ActivityId', tpHide: true, editable: false, menuInHide: true, minWidth: 150 },
{ dataIndx: "ActivityId", title: "FAS Activity", editable: false, hidden: true, filter: { groupIndx: 'Region' } },

{ dataIndx: "Project", title: 'Project Code', valign: "top", editable: false, valign: "top", minWidth: 110 },
{ dataIndx: "Source", title: 'Source', valign: "top", editable: false, valign: "top", minWidth: 70 },
{ dataIndx: "ProjBud", title: 'Project Budget', valign: "top", format: '$ #,###,###.00', editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 100 },

{
dataIndx: "YTD_Tot", title: 'YTD Through @lastMonthName', halign: "center", valign: "top", format: '$ #,###,###.00', style: "background-color: lightyellow;",
editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 100, format: '$ #,###,###.00',
render: function (ui) {
try {
const formattedAmount = new Intl.NumberFormat('en-US'
, { style: 'currency', currency: 'USD' }).format(ui.cellData); //format to USD
var ActivityID = ui.rowData.ActivityId;
var Project = ui.rowData.Project;
var Source = ui.rowData.Source;
var link = "";
if (doesNotContainUnassigned(Project)) {

link = ""
+ formattedAmount +
"";
}
else {
link = ""
+ formattedAmount +
"";
}

return link;
} catch (error) {
// Code to handle the error
//console.error('An error occurred:', error.message);
return "";
}

}
},
//Define the link for the first month of Projections
{
dataIndx: "FirstColumn", title: '@ViewBag.curMonthName', editor: { type: 'textbox', attr: 'maxlength="12"' },
valign: "top", format: '$ #,###,###.00', editable: true, summary: { type: "sum" }, align: "right", minWidth: 80,
style: "background-color: lightyellow;",
render: function (ui) {
try {
const formattedAmount = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(ui.cellData);
var ActivityID = ui.rowData.ActivityId;
var Project = ui.rowData.Project;

if (Project== null || Project.indexOf("Unassigned") >-1) {//Project.includes("Unassigned")){
Project = '';
}
var Source = ui.rowData.Source;
var link = ""
+ formattedAmount +
"";

//}

return link;
} catch (error) {
// Code to handle the error
console.log('An error occurred:', error.message);
return "";
}

}
},
{
title: "Projection Months", align: "center", collapsible: { last: true, on: false },
colModel: [

//Define all subsequent months here
@foreach (var month in Model)
{
@: { dataIndx: "@month.DataIndx", title: '@month.Title', editor: { type: 'textbox', attr: 'maxlength="12"' }, valign: "top", format: '$ #,###,###.00', editable: true, summary: { type: "sum" }, align: "right", minWidth: 80 },
}

{
dataIndx: "TP", title: 'Total Projections', halign: "center", valign: "top", format: '$ #,###,###.00',
//style: "background-color: lightyellow;",
editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 100, format: '$ #,###,###.00',
render: function (ui) {
try {
const formattedAmount = new Intl.NumberFormat('en-US'
, { style: 'currency', currency: 'USD' }).format(ui.cellData); //format to USD
var ActivityID = ui.rowData.ActivityId;
var Project = ui.rowData.Project;
var Source = ui.rowData.Source;
var link = "";
if (doesNotContainUnassigned(Project)) {

link = ""
+ formattedAmount +
"";
}
else {
link = ""
+ formattedAmount +
"";
}
return link;
return formattedAmount;
} catch (error) {
// Code to handle the error
console.log('An error occurred:', error.message);
return "";
}

}
}
]
},
{ dataIndx: "TPS", title: 'Total Projections Spent', halign: "center", valign: "top", format: '$ #,###,###.00', editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 90 },
{ dataIndx: "PA", title: 'Projections Available', halign: "center", valign: "top", format: '$ #,###,###.00', editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 90 },
{
dataIndx: "curMonAct", title: '@curMonthName Actual', halign: "center", valign: "top", format: '$ #,###,###.00', style: "background-color: lightyellow;",
editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 100, format: '$ #,###,###.00',
render: function (ui) {
try {
const formattedAmount = new Intl.NumberFormat('en-US'
, { style: 'currency', currency: 'USD' }).format(ui.cellData); //format to USD
var ActivityID = ui.rowData.ActivityId;
var Project = ui.rowData.Project;
var Source = ui.rowData.Source;
var link = "";
if (doesNotContainUnassigned(Project)) {

link = ""
+ formattedAmount +
"";
}
else {
link = ""
+ formattedAmount +
"";
}
return link;
} catch (error) {
// Code to handle the error
//console.error('An error occurred:', error.message);
return "";
}

}
}
],
hoverMode: 'cell',
editor: { select: true, type: 'textbox' },
trackModel: { on: true }, //to turn on the track changes.
editable: true,
change: function (evt, ui) {
//saveChanges can also be called from change event.
var gridChanges = ui.updateList;

$.ajax({
url: '/APS/Activity/updatecell', //for ASP.NET
data: {
list: JSON.stringify(gridChanges)
},
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid3.option("strLoading", "Saving CCI Projection update, please stand by..");
grid3.showLoading();
},
success: function (changes) {
//commit the changes.
grid3.commit({ type: 'update', rows: changes.updateList });
},
complete: function () {
grid3.hideLoading();
$("#grids").pqGrid("refreshDataAndView");

grid3.option("strLoading", $.paramquery.pqGrid.defaults.strLoading);
grid3.refreshDataAndView();
}
});

},
destroy: function () {
//clear the interval upon destroy.
clearInterval(interval1);
},
history: function (evt, ui) {
var $tb = this.toolbar(),
$undo = $tb.find("button:contains('Undo')"),
$redo = $tb.find("button:contains('Redo')");

if (ui.canUndo != null) {
$undo.button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$redo.button("option", "disabled", !ui.canRedo);
}
$undo.button("option", { label: 'Undo (' + ui.num_undo + ')' });
$redo.button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
groupModel: {
on: true, //grouping mode.
pivot: false, //pivotMode
checkbox: false,
checkboxHead: true,
select: false,
titleIndx: 'grp', //v7.0.0: new option instead of titleInFirstCol
indent: 20,
fixCols: false,
groupCols: ['Region'], //grouping along column axis.
header: false, //hide grouping toolbar.
grandSummary: true, //show grand summary row.
dataIndx: ['ActivityId'], //grouping along row axis.
collapsed: [false],
useLabel: true,
summaryEdit: false
},
summaryTitle: {
sum: ""
},
postRenderInterval: -1, //synchronous post render.
showTitle: false,
wrap: false,
hwrap: false,

toolPanel: {
show: false //show toolPanel initially.
},

formulas: [
//["TP", function (rd) {
// var tot = eval(Number(rd.Month1) + Number(rd.Month2) + Number(rd.Month3) + Number(rd.Month4) + Number(rd.Month5) + Number(rd.Month6) + Number(rd.Month7) + Number(rd.Month8) + Number(rd.Month9) + Number(rd.Month10) + Number(rd.Month11) + Number(rd.Month12));
// return tot;
//}],
["RegVariance", function (rd) {
var tot = eval(Number(rd.RegTotal) + Number(rd.ActualYTD));
var variance = eval(Number(rd.RegBudget) - tot);
return variance;
}]
],
toolbar: {
items: [
{
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
})
}
}
},
{
type: 'select',
label: 'Export By: ',
cls: 'export-format',
//options: [{ xlsx: 'Excel', htm: 'Html', pdf: 'PDF', csv: 'Csv' }]
options: [{ csv: 'Excel', htm: 'Html' }]
},
{
type: 'button',
label: "Export  ",
icon: 'ui-icon-arrowthickstop-1-s',
listener: function () {
var grid = this,
format = grid.toolbar().find('.export-format').val(),
data = grid.exportData({
format: format,
cssTable: 'border-spacing:0;border-collapse:separate;',
cssRules: "td{border:0;}",
render: true
});

// Strip HTML from CSV output (the "Excel" option returns CSV)
if (format == 'csv' && typeof data === 'string') {
data = stripHtmlFromCsv(data);
}

if (format == 'pdf') {
var dd = {
footer: function (currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount; },
pageOrientation: 'landscape',
content: [
{
table: data,
layout: {
hLineColor: '#aaaaaa',
vLineColor: '#aaaaaa'
}
}
]
};
grid.showLoading();
pq.getScripts(['/Scripts/pdfmake/pdfmake.min.js', '/Scripts/pdfmake/vfs_fonts.js'], function () {
grid.hideLoading();
pdfMake.createPdf(dd).download();
})
}
else {
pq.saveAs(data, "pqGrid." + format);
}
}
}
]
},
//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 grid3 = pq.grid("#indActivity", obj);

grid3.option("selectionModel", { type: 'row', mode: 'single' });

...and I would like to have a tooltip popup on the Group level field, ActivityId
{ dataIndx: 'grp', title: 'ActivityId', tpHide: true, editable: false, menuInHide: true, minWidth: 150 },
{ dataIndx: "ActivityId", title: "FAS Activity", editable: false, hidden: true, filter: { groupIndx: 'Region' } },

I would like the dataIndx column, ActivityDescription, to be the source of this tooltip popup whenever I hover over the ActivityID column. How do I program that??

2

Help for ParamQuery Pro / Re: BootStrap Dropdown not working

« on: May 29, 2025, 07:55:12 pm »

Perfect! Thank you...

3

Help for ParamQuery Pro / BootStrap Dropdown not working

« on: May 29, 2025, 01:18:42 am »

I am using a PG Grid that has an "Actions" column that has 3 buttons inside. The 3rd button is named "More" and is supposed to popup a bootstrap menu of 2 items (Export and Delete options), but is not working

Below is a link to jsfiddler that has the code I am using:
https://jsfiddle.net/7swe1L5d/

Notice that when you click on the "more" button inside the grid, nothing happens. However, when you click on the "more" button above/outside of the grid, it works fine. Because the menu works outside the grid, there must be an issue with the QueryParam options I am using.

Can you please tell me what I need to do to get this bootstrap popup working inside QueryParam?

4

Help for ParamQuery Pro / Re: Changing the font size of everything in the grid

« 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'} );

5

Help for ParamQuery Pro / Changing the font size of everything in the grid

« 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...

6

Help for ParamQuery Pro / Re: Error when setting href link on a group total column

« on: February 18, 2025, 09:24:20 pm »

just to clarify, the error is occurring when I click on the rendered link, not when the grid is rendered...

7

Help for ParamQuery Pro / Error when setting href link on a group total column

« on: February 17, 2025, 10:11:48 pm »

I have the following column model definition:

colModel: [
{ dataIndx: 'KeyRec', title: 'KeyRec', hidden: true, editable: false },
{ dataIndx: 'ActivityYear', title: 'ActivityYear', hidden: true, editable: false },

{ dataIndx: 'grp', title: 'ActivityId', tpHide: true, editable: false, menuInHide: true, minWidth: 150 },
{ dataIndx: "ActivityId", title: "FAS Activity", editable: false, hidden: true, filter: { groupIndx: 'Region' } },
{ dataIndx: "Project", title: 'Project Code', valign: "top", editable: false, valign: "top", minWidth: 110 },
{ dataIndx: "Source", title: 'Source', valign: "top", editable: false, valign: "top", minWidth: 70 },
{ dataIndx: "ProjBud", title: 'Project Budget', valign: "top", format: '$ #,###,###.00', editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 100 },

{
dataIndx: "YTD_Tot", title: 'YTD Through @lastMonthName', halign: "center", valign: "top", format: '$ #,###,###.00',
editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 100,
//render: function (ui) {
// var ActivityID = ui.rowData.ActivityId;
// return "<a href='#' onClick=javascript:OpenTranWindow(" + "'" + ActivityID + "'" + ");>" + ui.cellData + "</a>";
//}
},
{
title: "Projection Months", align: "center", collapsible: { last: true, on: false },
colModel: [

 @foreach (var month in months)
 {
 @: { dataIndx: "@month.DataIndx", title: '@month.Title', editor: { type: 'textbox', attr: 'maxlength="12"' }, valign: "top", format: '$ #,###,###.00', editable: true, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 90 },
 }

{ dataIndx: "RegTotal", title: 'Total Projections', halign: "center", valign: "top", format: '$ #,###,###.00', editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 100 },
]
},
{ dataIndx: "RegBudget", title: 'Total Projections Spent', halign: "center", valign: "top", format: '$ #,###,###.00', editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 90 },
{ dataIndx: "curMonAct", title: 'February Actual', halign: "center", valign: "top", format: '$ #,###,###.00', editable: false, summary: { type: "sum" }, valign: "top", align: "right", minWidth: 90 },
],

When I remove the comments on the YTD_Tot col and click on the link, I get the message:
Uncaught use Group().option() method to set groupModel options.

Can you tell me how the "Render" function could be coded?

8

Help for ParamQuery Pro / Re: Increase the size of the "Loading" box

« on: February 12, 2025, 11:14:19 pm »

Perfect, thank you!

9

Help for ParamQuery Pro / Increase the size of the "Loading" box

« on: February 12, 2025, 07:33:46 pm »

I am using the grid.showLoading control to display a message to the user while a post process is running. Is there any way to increase the size of the box? The text does not seem to be limited, but the size of the box displaying that text does...

   function callApiMethod() {
grid.option("strLoading", "This may take up to 30 seconds. Please Stand by...");
grid.showLoading();
      $.post("/IND/Account/LoadINDData", { "theYear": theYear }, function (data) {
         var f = JSON.parse(data)
         grid.hideLoading();
         grid.refreshDataAndView();
      });
   }

10

Help for ParamQuery Pro / Re: Example of how to save changes to cell data

« on: February 10, 2025, 09:27:30 pm »

I am not getting to the my debugger statement (see attachment) when I edit a cell in. my grid. Can you tell me if there are any specific grid properties to look for that might be causing this?

11

Help for ParamQuery Pro / Example of how to save changes to cell data

« on: February 10, 2025, 01:47:37 am »

Can you please direct me to a code example that supports the updating (of a SQL database) of cell data changes in real time using .NET MVC?

12

Help for ParamQuery Pro / Excluding row data in Group Totals

« on: February 01, 2025, 01:29:58 am »

Is there a way to exclude certain rows (based on a column value) in the Group total calculation?

For example - I have a grid result that has budget (in yellow) and transaction data (in black). I do not want the budget amounts in the Group total calculation (see attached screen shot).

Below is my javascript code:

dataModelTransaction= {
location: "remote",
dataType: "jsonp",
method: "GET",
url: "/CCRSearch/Reports/[email protected]",
}
colModelTransaction = [
{ dataIndx: 'grp', title: 'FASActivity', tpHide: true, editable: false, menuInHide: true, minWidth: 150 },
{ dataIndx: "FASActivity", title: "FAS Activity", editable: false, hidden: true, filter: { groupIndx: 'Source' } },
{ title: "TRAN_TYPE", hidden: true, dataIndx: "TRAN_TYPE" },
{ title: "Source", width: 20, dataIndx: "Source" },
{ title: "Account Code", width: 20, dataIndx: "ACCNT_CODE" },
{ title: "Date", align: "right", width: 20, dataIndx: "JCDATE" },
{ title: "Description", width: 200, dataIndx: "FASDesc" },
{
title: "Amount", width: 85, format: '$ #,###,###.00', align: "right", dataIndx: "AMOUNT", summary: { type: "sum" },
render: function (ui) {
if (ui.cellData < 0) {
return {
cls: 'blinkText',
style: { 'color': 'red'}
};
}
}
}
]
groupModel = {
on: true, //grouping mode.
pivot: false, //pivotMode
checkbox: false,
checkboxHead: true,
select: false,
titleIndx: 'grp', //v7.0.0: new option instead of titleInFirstCol
indent: 20,
fixCols: false,
groupCols: ['Source'], //grouping along column axis.
header: false, //hide grouping toolbar.
grandSummary: true, //show grand summary row.
dataIndx: ['FASActivity'], //grouping along row axis.
collapsed: [true],
useLabel: true,
summaryEdit: false
};
$("#Transactiondetails").html(data);
$("#grid_transactions").pqGrid({
height: 450,
scrollModel: { autoFit: true },
dataModel: dataModelTransaction,
colModel: colModelTransaction,
pageModel: { type: "local", rPP: 1000, strRpp: "" },
numberCell: { show: false },
title: "Transaction Details",
resizable: true,
groupModel: groupModel,
summaryTitle: {
sum: ""
},
rowInit: function (ui) {
if (ui.rowData.TRAN_TYPE == "B") {
return {
style: { "background": "yellow" } //can also return attr (for attributes) and cls (for css classes) properties.
};
}
}
});

13

Help for ParamQuery Pro / Setting a Grid Row Color

« on: January 30, 2025, 02:19:32 am »

I have the following popup Grid logic below:

dataModelTransaction= {
location: "remote",
dataType: "jsonp",
method: "GET",
url: "/CCRSearch/Reports/[email protected]",
}
colModelTransaction = [
{ title: "FAS Activity", width: 120, dataIndx: "FASActivity" },
{ title: "TRAN_TYPE", hidden: true, width: 100, dataIndx: "TRAN_TYPE" },
{ title: "Source", width: 40, dataIndx: "Source" },
{ title: "Account Code", width: 40, dataIndx: "ACCNT_CODE" },
{ title: "Date", width: 40, dataIndx: "JCDATE" },
{ title: "Description", width: 150, dataIndx: "FASDesc" },
{
title: "Amount", width: 85, align: "right", dataIndx: "AMOUNT",
cellClass: function (ui) {
return ui.cellData < 0 ? "red-cell" : "";
}
}
]

function OpenTranWindow(Activity) {
$.post("/CCRSearch/Reports/GetTransactions?=", { "ActivityId": Activity}, function (data) {
$("#Transactiondetails").html(data);
$("#grid_transactions").pqGrid({
height: 450,
scrollModel: { autoFit: true },
dataModel: dataModelTransaction,
colModel: colModelTransaction,
pageModel: { type: "local", rPP: 1000, strRpp: "" },
numberCell: { show: false },
title: "Transaction Details",
resizable: true,
rowClass: function (ui) {
if (ui.rowData.TRAN_TYPE == "B") {
return "red-row"; // Apply a custom CSS class
}
}
});
modal1.show();
});
}

I also have this style section in the html code above the javascript code:
<style>
.red-row {
background-color: red !important;
color: white !important;
}
.red-cell {
background-color: red !important;
color: white !important;
}
</style>
I am trying to set the entire row Red, if the hidden column, TRAN_TYPE = "B". I am also trying to set the Amount column to Red if it is a negative value.

Can you tell me what I am doing wrong?

14

Help for ParamQuery Pro / Setting all rows containing a checkbox column, checked

« on: January 24, 2025, 09:58:29 pm »

Can you tell me how to set all rows that contain a checkbox column to checked?

I am using the following column where the "checked" attribute is set to true, but no rows are being checked:

colModel = [
{
title: "FAS Activity", dataType: "string", dataIndx: "FASActivity", editable: false, align: "left", minWidth: '20%',
render: function (ui) {
return "<a href='#' onClick=javascript:OpenTranWindow(" + "'" + ui.cellData + "'" + ");>" + ui.cellData + "</a>";
}
},
{ title: "Region", dataType: "String", dataIndx: "RegionDesc", editable: false, minWidth: '40%', },
{
title: "Include ?", dataIndx: "Activity", type: 'checkbox', editable: false,
cbId: 'chk', hidden: false, checked: true, useLabel: false, minWidth: '20%'
},
{
dataIndx: 'chk',
dataType: 'bool',
cb: { header: true },
hidden: true,
editable: function (ui) {
//to make checkboxes editable selectively.
return !(ui.rowData.Activity.length > 10);
}
}
];

15

Help for ParamQuery Pro / Re: using Grid Toolbar buttons to check/uncheck a a checkbox field on a grid

« on: January 17, 2025, 08:41:07 pm »

Your response worked great, Thank you!

I have 2 followup questions -

1. How to I make this button toggle the checkbox on/off. Right now, it only checks the boxes based on the page filter.

2. I have this javascript function (below) that currently passes a list of rows that remain in the grid (based on grid filtering). How do I get the list of grid rows that are only checked?

$("#btnSubmit").click(function () {
var pFASIDs = "";
var grid = $("#grid_jsonp").pqGrid("instance");
var selectedRows = grid.pageData().filter(function (row) {
return row.FASActivity.length > 1;
});
// Extract the IDs of selected rows
var selectedIDs = selectedRows.map(function (row) {
return row.FASActivity;
});
pFASIDs = selectedIDs.join(","); ;

window.location.href = '/CCRSearch/Reports/Index?LayoutId=180&IDs=' + pFASIDs;

});

Messages - pbassey