This project has moved and is read-only. For the latest updates, please go here.

Styles to headers or data to specific report

Jul 31, 2012 at 6:17 PM

Hi, i want to set the style ,for example to the header, of a specific report without using the web.config (if i use the web.config the style is set to all reports).

I tried

report.RenderHints["HtmlStyle"] = @".htmlReport th { font-size: 20px; }";

to set the fonts of the table headers but it always looks at the configuration of the web.config. Is there any way to apply styles to a specific report without this kind of issues??


Jul 31, 2012 at 8:12 PM

Hi Snekkke,

There are two ways to solve this problem, which I've pasted below. Due to the way the HtmlReportWriter works all of the styles are inlined with the HTML, so you need to apply !important to your CSS to make sure it takes precedence over the inline style. The alternative is to loop over the dataFields in the report and set their HeaderStyle property, since this property is what is used to build the in-line HTML styles.


     public ReportResult CustomHtmlStyle()
            var query = DoddleProductRepository.GetAll();
            var report = new Report(query.ToReportSource());

            //report.RenderHints["HtmlStyle"] = @".htmlReport th { font-size: 40px !important; }";
            foreach (var dataField in report.DataFields)
                dataField.HeaderStyle.FontSize = 13;
            return new ReportResult(report);

Jul 31, 2012 at 8:59 PM

Thanks Matt! Don't you think its better to set the styles through some property or build an internal style from the config.web than to write the style for each element?? 

Jul 31, 2012 at 9:37 PM

It was originally designed such that each individual field could have it's own style, not the entire set of fields. That's why you have to loop through all of the DataFields to set their HeaderStyle, as seen in the code above.

For example, you could do report.DataFields["ProductName"].HeaderStyle.FontSize = 16; which would give just that one field large header text. Although HeaderStyles are typically uniform, this feature comes in handy when you want to customize the DataStyle, such as turning negative number a red color to make it really stand out.

Jul 31, 2012 at 9:38 PM

For example in the HtmlreportWriter we have


protected virtual string DefaultStyle
                return @"
                    .htmlReport { font: 10px Verdana; }
                    .htmlReport td { font-size: 10px; }
                    .htmlReport th { font-size: 10px; font-weight: bold; text-decoration: underline; text-align: left; }
                    .htmlReport h1 { font-size: 14pt; margin-bottom: 10px; }";

Instead of aplying the configuration for each element we could build this style from the config.web. The .htmlReport th could be generated from the section of the web.config <style name="HeaderRowStyle"......./>


Jul 31, 2012 at 9:44 PM

That's a really good suggestion... Let me look into applying that change

Jul 31, 2012 at 9:46 PM

Thanks Matt, that would be very nice!!!

Jul 31, 2012 at 10:09 PM

Matt, i'll make a suggestion about the feature we are talking about. It'd be nice that the style that returns the DefaultStyle method is build from the web.config as i told you. But, i'd be great if the style generated from the web.config goes into properties exposed in the report. For example in the web.config the <style name="HeaderRowStyle"......./> goes into a property called ReportHeader in somewhere (i don't know where), and the report of that property would be 

{ font-size: 10px; font-weight: bold; text-decoration: underline; text-align: left; }

if the web.config contains that information (it's just an example). And that property also lets assign the value: report......ReportHeader = "{font-size: 30px}". So, with that, the styles are not hardcoded and you can overwrite them. Then when the report is being written those properties are translated into the style that returns the DefaultStyle method.

I hope you understand my idea, my english is not the best but i do my best. I hope you have this suggestion in mind.


Jul 31, 2012 at 10:28 PM

I've just pushed the change to the repository. Could you pull down the latest source and let me know if this solution works for you?

Aug 1, 2012 at 9:24 PM

Matt, thanks, works fine. now i can apply styles to the report overwriting the defaults. That's really nice. Also it's great that you've merged the default wih spike4. Thanks a lot!

Sep 14, 2012 at 1:04 AM
Edited Sep 14, 2012 at 1:06 AM

hey guys, I'm using the pdfReportWriter and openXml.ExcelReportWriter is there a way to style the textfields? It would be nice to be able to format the header and footer similar to datafields.  Can you please show me how to  change the font | font size | colour | text justification.  thanks!

Sep 14, 2012 at 2:42 PM

Unfortunately I doubt those writers were designed for that kind of styling. You may have to pull open the code for those Writers, copy/paste it into a new custom writer that you use, and tweak it where necessary. If you end up liking your solution, please feel free to submit a pull request so that others may benefit from it too!