6. Cell CSS style and colors

Setting CSS attributes for cell via various TreeGrid attributes

• For style set dynamically in individual cells see DynamicStyle demonstration in tutorial Sheet cell style

• Cell border

  (and margin and padding)
  

  • Class

    attribute can specify the most outer cell border color and style. It changes the default borders for the cell. It must not set cell border width. The cell border width is specified in Grid.css and for all cells in grid it must be the same.
    Remember, many styles don't set all four cell borders, so if you want to set complete cell border by Class attribute, you need to specify all the borders in Grid.css for classes GxCell...
    In Firefox 3.x are the cell borders disabled, it always collapses the cell border to have only left and bottom border.
    The cell border set by Class is around all the cell content and its Button / Icon. The Class attribute can also specify padding settings, but not margin.

  • ClassInner

    attribute can add inner cell border. It can easily specify all the border attributes and sides. It does not change the outer cell border.
    The right side Button is outside this border, the left/right side Icon can be inside or outside this border according to attribute ClassInnerIcon (0 default outside, 1 inside).
    The ClassInner can specify also margin and padding settings.
  • By

    HtmlPrefix

    and

    HtmlPostfix

    attribute you can add next custom cell border inside the Class/ClassInner. This border does not contain the Button and Icon icons. This border is also not visible during editing. This border can be partially hidden if the cell is overflowed. There can be set also margin and padding settings.

• Cell background

  
  

  • Color

    attribute specifies base cell background color before the color calculation.
    The base cell background color is modified by all other colors according to the row state (Added,Deleted,Moved,Changed,Selected,Error), cell permissions (CanEdit,CanFocus), Alternate color, hover color and so on. The resulted color is sum of all these colors and can remarkably differ from the Color set.
    The base color can returned dynamically by API event handler OnGetDefaultColor.

  • Background

    attribute specifies result cell background color after the most color calculations.
    The Background color is overridden only by Focus cursor and Search Mark. It means that row state colors don't modify the color set by Background.
    By API event OnGetColor you can modify the final color set to the cell (also after including Focus and Mark).
    

  • ClassInner

    attribute class can specify the final background color or image. This background is not affected by any cell color, even not by Focus color.
    The ClassInner can specify also background-image, but only if ClassInnerIcon='0'.
    
  • By

    HtmlPrefix

    and

    HtmlPostfix

    attribute you can specify the final inner background color and image. This background is not affected by any cell color, even not by Focus color.
    
  • Cell background should not be set by Class attribute.

• Wrap

  attribute permits or restricts automatic text wrapping. All cell types have by default Wrap='0' except Lines and Html that have Wrap='1'.
  The manual wrapping by including LF is always possible, to text type by "&x0a;" entity or to Html type by "<br>".

• Align

  attribute controls horizontal alignment, "left", "right", "center".

• Vertical alignment

  can be done by

  Class

  attribute with defined CSS attribute vertical-align.

• Rotate

  attribute supports rotating cell text by 90 or 270 degrees.

• Cursor

  attribute specifies mouse cursor for the whole cell. It is possible to specify Cursor to only part of the cell like Button by XXXCursor, for example Col1SideButtonCursor='pointer'.

• Text color, font and other CSS attributes

  (CSS attributes font, color, letter-spacing, line-height, text-decoration, text-indent, text-transform, word-spacing)
  

  • Class

    attribute is the best place to set all these attributes, because it is the fastest, it does not add any next HTML tag into cell.
    
  • These attributes can be set also by ClassInner or HtmlPrefix / HtmlPostfix.

  • Format

    attribute for Int, Float and Date type cells can contain also HTML code setting these attributes, especially to highlight only part of the value.

• Alternate colors

  
  TreeGrid can color every Nth row in different background color. The N repeater is set by

  Alternate

  attribute. The alternate color is defined in Grid.css by GxColorAlternate.
  For every row is possible to predefine its color and alternate color by Color and AlternateColor attributes.
  In tree the coloring always starts from beginning, so it can lead to break down the N repeater (e.g. to have two adjacent rows with the same color for N=2). It is because of speed reason, it is not possible to recolor the whole grid after every expand / collapse.