{"id":3737,"date":"2016-07-12T03:00:36","date_gmt":"2016-07-11T19:00:36","guid":{"rendered":"http:\/\/www.finereport.com\/en\/?p=3737"},"modified":"2019-10-24T14:51:08","modified_gmt":"2019-10-24T06:51:08","slug":"cell-style","status":"publish","type":"post","link":"https:\/\/frg.fineres.com\/en\/2016\/07\/12\/cell-style\/","title":{"rendered":"Description of Cell Style."},"content":{"rendered":"

We will introduce cell style of FineReport reporting tool<\/span><\/a> in this article.Please note that the style only controls cell display effect and will not influence the actual value of cell.<\/p>\n

1. Overview<\/h3>\n

Right click the cell and select style in report designer<\/a>. For example, you can set font, border and background for the cell in the Cell Attribute Table at right. Please note that the style only controls cell display effect and will not influence the actual value of cell, as shown below:<\/p>\n

\"\"<\/p>\n

After clicking Cell > Style<\/span>, you can select custom style or predefined style. The default is custom style, as shown above. Click Predefined Style to display all predefined styles, as shown below:<\/p>\n

\"\"<\/p>\n

Predefined style: the styles predefined at Server side (i.e., global styles), which are available for all templates. Style information is saved in config.xml. For specific definitions, refer to Predefined Style<\/span><\/a>.<\/p>\n

Custom style: the style customized by the user, which is only work for current cell.<\/p>\n

Note: When you right click the cell in designer and find no predefined styles as shown above in Select Style, it means that the contents of defined styles in config.xml have been deleted.<\/span><\/p>\n

2. Custom style<\/h3>\n

Select Style in the Cell Attribute Table at right of report body, as shown below. You can set the format, align, font, border and background for the cell content.<\/p>\n

\"\"<\/p>\n

2.1 Format<\/strong><\/p>\n

You can set display formats for various data types, like number and time, as shown below:<\/p>\n

\"\"<\/p>\n

2.1.1. Number style<\/strong><\/p>\n

Number display format, as shown below: 0: formatting. If the format encounters no values, display 0. For example, format 0.00 means to display two decimal places (e.g., display 0.123 as 0.12 or display 0.1 as 0.10); #: formatting. If the format encounters no values, do not display 0. For example, format 0.0# means to display decimal up to 2 places (e.g., display 0.123 as 0.12 or display 0.1 as 0.1); the figure below lists some common styles, and you can edit styles in red box. For example, custom style 0.000 means to display three decimal places; and fr #0.0# means to add fr at the front of two decimal places, and so on.<\/p>\n

\"\"<\/p>\n

You can edit any display effects, which are not limited to the aforesaid. For example: To display data 5.0, 5.123, 5.1 in a data column as 5, 5.12 and 5.1, you can set the cell format in the data column as \u201c0.##\u201d.<\/p>\n

2.1.2. Currency style<\/strong><\/p>\n

For currency formats, \u00a40 means to add a \uffe5 at the front of an integer, where \u00a4#, ##0.00 have similar principles with number formats.<\/p>\n

\"\"<\/p>\n

2.1.3. Percentage style<\/strong><\/p>\n

In percentage, you can choose to display the decimal places. Or you can add decimal places and other characters.<\/p>\n

\"\"<\/p>\n

2.1.4. Date type style<\/strong><\/p>\n

In date type, you can set the date display format. However, please not that month must be an uppercase M and a lowercase m cannot be identified.<\/p>\n

To display the date type data as \u201c20110101\u201d, set the format as \u201cyyyyMMdd\u201d, as shown below:<\/p>\n

\"\"<\/p>\n

Note: You can manually input date format.<\/span><\/p>\n

Other formats will not be repeated.<\/p>\n

2.2 Align<\/strong><\/p>\n

2.2.1. Align type<\/strong><\/p>\n

Align type means the type to align cell texts, including horizontal align and center. Horizontal align has four options: Left Align, Right Align, Center and Justify. There is a default align type: Right-align numbers and left-align texts. As shown below:<\/p>\n

\"\"<\/p>\n

2.2.2. Text control<\/strong><\/p>\n

In single line display of text control, the font will not be adjusted. The text display depends on the cell size, and extra-long text will not be visible. Single-line display (font adjusted) and multi-line display (font adjusted) will adjust font display based on cell size. The effect is shown below: Wrap text<\/p>\n

\"\"<\/p>\n

Note: To make wrap text work, you must set AutoFit Row Height and Wrap Text for the cell. If only Wrap Text is set, it will not work, as Wrap Text and AutoFit Row Height are two related attributes.<\/span><\/p>\n

2.2.3. Text direction<\/strong><\/p>\n

Text flow can be Text Vertical (including From Left to Right and From Right to Left); only when Text Vertical is not selected, you can adjust display angle (e.g., 30\u00b0);<\/p>\n

\"\"<\/p>\n

2.2.4. Specials in Text Vertical<\/strong><\/p>\n

In pre-8.0 versions, brackets () in Vertical are not processed and have to be manually realized via custom functions. However, V8.0 takes uniform processing for specials. The effect is as follows:<\/p>\n

\"\"<\/p>\n

2.2.5. Indent<\/strong><\/p>\n

Indent effect is as shown below:<\/p>\n

\"\"<\/p>\n

2.2.6. Space<\/strong><\/p>\n

Before: Space before cell text.<\/p>\n

After: Space after cell text.<\/p>\n

Row space: space between row texts in a cell.<\/p>\n

\"\"<\/p>\n

2.3 Font<\/strong><\/p>\n

In Font part, you can set font type, font size, font style size, underline, color, strikeout, hatch, superscript\/subscript (default as neither superscript nor subscript), as shown below:<\/p>\n

\"\"<\/p>\n

Note 1: as limited by chrome browser, the minimum font size is 9 when the report is viewed in chrome browser, even when you have set a smaller font.<\/span><\/p>\n

Note 2: hatch is set as post-hatch effect, which is temporarily not supported under ie browser. In other browsers, you can see normal effect.<\/span><\/p>\n

2.4 Border<\/strong><\/p>\n

You can set style and color for border line of a cell.<\/p>\n

\"\"<\/p>\n

Note: You can set border style in Cell Attribute Table or click the button \"\" in toolbar, as shown below:<\/span><\/p>\n

\"\"<\/p>\n

2.5 Background<\/strong><\/p>\n

You can select texture, picture and color for the background. Setting method is same as the Paper Backgroud<\/span> which will not be repeated here.<\/p>\n","protected":false},"excerpt":{"rendered":"

We will introduce cell style of FineReport reporting to…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[111],"tags":[117],"_links":{"self":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/3737"}],"collection":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/comments?post=3737"}],"version-history":[{"count":6,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/3737\/revisions"}],"predecessor-version":[{"id":8495,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/3737\/revisions\/8495"}],"wp:attachment":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/media?parent=3737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/categories?post=3737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/tags?post=3737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}