export HTML background color for cells

[MEngelbyPQ]

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:

Code: [Select]

                            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;
                            }


[MEngelbyPQ]

I sort of found a solution.  Add a container div surrounding the ui.cellData with the css height set to 100%.

Code: [Select]

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.

[paramvir]

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.

[MEngelbyPQ]

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.

[paramvir]

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.

[MEngelbyPQ]

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.