Set background color for each summary row in grouped rows

[pranit@srcomsec]

Hi, is there a way we can set background color for the summary rows in a grouped row table.

For example:

This is how the table looks now with the summary rows for each grouped row without color


This is how we want, the summary rows background color is grey.

Kindly advise

[paramvir]

Every summary row has pq_gsummary property set to true, which can be checked in rowInit callback to add any style to the summary row.

https://paramquery.com/pro/api#option-rowInit

https://paramquery.com/pro/tutorial#topic-metadata

[pranit@srcomsec]

We are getting "undefined" in the "rowInit" method for the "ui.rowData.pq_gsummary" property.

We tried the code below but it is not working as per our requirement.

Code: [Select]

rowInit: function (ui)
{                   
if (ui.rowData.summaryRow)
{
return {
style: { "background": "red" }
};
}                   
},

If we add the below code in the column render function then it is working & applies color to the summary data row, not to the group summary. Please refer to the screenshot attached and advise.

Code: [Select]

render: function (ui)
{   
if (ui.rowData != undefined && ui.rowData.summaryRow)
{
return {
style: { 'background': 'red' },
};
}                        
}

One more issue, I see if we group then sum in summaryData getting double. See the attached screenshot.

[paramvir]

According to https://paramquery.com/pro/tutorial#topic-metadata, it's ui.rowData.pq_gsummary

pq_gsummary   Boolean   true when the row is a summary row in row grouping, treegrid, pivot.

2 Don't calculate the grand summary manually, rather set groupModel.grandSummary to true

https://paramquery.com/pro/api#option-groupModel

[pranit@srcomsec]

Thank you for your quick response.

We have tried with the below code but is not working.

Code: [Select]

rowInit: function (ui)
{                   
if (ui.rowData.pq_gsummary)
{
return {
style: { "background": "red" }
};
}                   
},

Regarding,  set groupModel.grandSummary to true, the summary will be displayed after toggling grouping to on. How to show/hide the draggable panel with grouping on?

[paramvir]

If you have summary cells in the title rows, then you can use pq_gtitle property of the rows.

Code: [Select]

if (ui.rowData.pq_gtitle )

2. you can show/hide the draggable panel by toggling the groupModel.header property.

https://paramquery.com/pro/api#option-groupModel