ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: MEngelbyPQ on January 24, 2017, 01:17:23 am
-
Is it possible to use the existing export function to export inline styling for cell background color for HTML export? I know I can change the background color of the text inside the cell by adding <span> styling for the contents. But I am looking to change the background color of the entire cell. I am already using a column.render function for the cells in question so they display on-screen with the appropriate background colors based on the cell contents value. Here is my working render function:
render: function (ui) {
var cellContents = {};
var lvlIn3Days = round(ui.rowData[4] - (ui.rowData[5] * 3), 2);
var attDaysLvl = round(ui.rowData[5] * ui.rowData[7] , 2);
var almDaysLvl = round(ui.rowData[5] * ui.rowData[8] , 2);
if (lvlIn3Days > attDaysLvl) { cellContents.style = 'background:#b3ff99'; }
else if (lvlIn3Days > almDaysLvl) { cellContents.style = 'background:#ffff66'; }
else if (ui.rowData[6] != 'NOT CURRENT') { cellContents.style = 'background:#ff6666'; }
if (!ui.Export) {
cellContents.text = '<span title="' +
' CurrLvl:' + ((ui.rowData[4] == null) ? '' : ui.rowData[4]) +
' ;Usage:' + ((ui.rowData[5] == null) ? '' : ui.rowData[5]) +
' ;LvlIn3Days:' + ((lvlIn3Days == null) ? '' : lvlIn3Days) +
' ;AttDaysVal:' + ((attDaysLvl == null) ? '' : attDaysLvl) +
' ;AlmDaysVal:' + ((almDaysLvl == null) ? '' : almDaysLvl) +
'" class="tooltip">' + ((ui.cellData == null) ? '' : ui.formatVal) + '<span>';
} else { cellContents.text = ui.formatVal; }
return cellContents;
}
-
I sort of found a solution. Add a container div surrounding the ui.cellData with the css height set to 100%.
render: function(ui) {
if (ui.Export) {
return { text: "<div style='height:100%;overflow:hidden;background:#ffff99;'>" + ui.cellData + "</div>" };
}
}
The issue then becomes that the <th> and <td> tags are styled with 5 pixel padding in the htm export file which forces a white background around the cell contents.
Suggestion:
Add a method for export to either override or add to the inline style code in the html export file. With that, it becomes quite simple to add styling for any rows/cells/groups/etc by adding a class and then styling that class in the inline style code.
-
Thanks for the suggestion.
There is indeed a cssRules ( which was undocumented until now ) which can be passed to exportData method to add custom styling to html export.
https://paramquery.com/pro/api#method-exportData
Hope it suits your requirement.
-
Thanks for cssRules! That works great!
-BUT-
How do I add a class to a cell in the export Html? I've tried in the column.render function with the conditional ui.Export. When I examine the output file the class isn't there. I've looked at the documentation for rowInit and I can't figure out how to add a class to cells in that function. if I add a class to the row, that class doesn't show up in the exported html file.
I am using the latest 3.3.5 version.
-
Sorry, adding class and style to rows, cells which is a normal feature of grid is not supported while exporting data for performance reasons.
I understand adding styling to cells, rows is sometimes more important than performance; it's been added in the queue for future enhancements.
-
Understood.
Hopefully when using the exportData function a boolean var will enable column.render and rowInit functions in HTML output and that won't impact performance too much for either case. Thanks for the consideration.