TreeGrid v6.6

Cell style and color

TreeGrid documentation index

 

Basic grid style

 

Base grid styles are defined in Grid.css in appropriate TreeGrid style (default is Modern).

See Styles documentation.

 

<Cfg>                string    Style            [“Modern”]                       Can be saved to cookies, if set StyleLap=’0’                                                 new 6.0 .

Base TreeGrid style selection. The base TreeGrid style presets nearly all visual settings in TreeGrid. It can be:

a) Name of one of base predefined styles: Modern, Standard, Light, Office, Borders, Robust, Plain, Colors.

             In this case no CSS attribute should be set.

b) Prefix for custom CSS style, all the CSS classes in the file must start by this prefix, prefixes for predefined styles are GM, GS, GL, GO, GB, GR, GP, GC

In this case the CSS attribute must be set to style file or directory, e.g. <Cfg Style=’GM’ CSS=’../../../Grid/Modern/Grid.css’/> or <Cfg Style=’GM’ CSS=’Modern’/>

 

<Cfg>                string    CSS                                                                                                                                                                new 6.0;chg 7.0 .

Where the TreeGrid style is located, it can be:

a) CSS file path and name with custom CSS style of not used predefined TreeGrid style, see Style attribute. For example CSS=’../../../Grid/Modern/Grid.css’. The path is relative to the actual page URL, not to Grid directory!

b) CSS directory name inside base /Grid directory. This directory must contain file Grid.css as the style definition. For example CSS=”Modern”

 

<Cfg>                bool       SafeCSS               [ ]                                                                                                                                              new 7.0 .

If set to 1, switches TreeGrid CSS style to safe mode, to not be affected by any external CSS style attribute setting except with !important.

Set the SafeCSS to 1 if the grid style looks differently on your page than in our examples and you cannot find the problem or you cannot change the external style.

The grid rendering in Safe mode is for about 20-30% slower.

All grids on page share the SafeCSS setting, the SafeCSS value is chosen according to the first grid loading.

Default value for the attribute is empty, it means auto selection – the CSS mode is switched to safe if there is some CSS setting that affect TreeGrid layout by margin, padding, border or display. Remember, the first loaded grid on page does the selection.

 

API method      void       SetStyle   (string Style, string CSS, bool render)                                                                                                 chg 6.0 .

Changes TreeGrid style and optionally rerenders grid to show the changes.

Style and CSS are appropriate attributes Style and CSS. CSS should be null for predefined TreeGrid style.

 

API event          bool       OnSetStyle        (TGrid grid, string Style, string CSS)                                                                                      upd 6.0 .

Called before the style is loaded.

Return true to suppress loading the style.

Style and CSS are appropriate attributes Style and CSS.

 

API event          void       OnAfterSetStyle        (TGrid grid, string Style, string CSS)                                                                         upd 6.0 .

Called after the style is loaded, but before any render is started.

Style and CSS are appropriate attributes Style and CSS.

 

 

Special cell style attributes

 

Some style attributes can be preset by special attributes, but can be set also by Class.

Background image can be set also by Icon attribute.

 

<C> <I> <cell> bool       Wrap            [0/1]                                                                                                                                                        new 6.0 .

If the cell content will be wrapped.

By default it is 1 for types Html, Lines, List and 0 for other types and Header.

 

<C> <I> <cell> string    Align           [“Left” / “Right”]                                                                                                                                       new 6.0 .

How the cell content will be aligned. Case insensitive keyword: “Left”, “Right”, “Center”, “Justify”.

By default it is “Right” for types Int, Float, Date and “Left” for other types.

 

<cell>                int          Rotate        [0]                                                                                                                                                           new 6.6 .

Rotates text in the cell. It does work only in IE 6+, FF 3.5+, Opera 10.5+, Safari 4+, Chrome 4+

1 – text is from bottom to top, 2 – text is from top to bottom.

Don’t set it to too many cells, it is intended to use especially in header. It can remarkably slow down the grid!

 

<Header>          bool       NoEscape           [0]                                                                                                                                                           .

Set it to 1 to use HTML code in column captions – Header cells. It use Html Type cells for Header instead of default Lines.

 

Cell CSS class

 

<C><I><cell>   string    Class                                                                                                                                                                          new 6.0.

A CSS class name(s) applied to the cell.

To set background colors use rather Background or Color attribute or you must use !important modifier, because background colors are set also by grid.

Remember, the cell already contains its basic CSS definition, so this class must be defined after the included Grid.css file or use !important modifier.

Attention, not all CSS setting can be modified (e.g overflow), always test the result if it does not break down grid layout.

 

<C><I><cell>   string    ClassInner                                                                                                                                                           chg 6.0.

If set, it adds new inner <DIV> with this class to the cell. Wrap and Align and type classes are applied to this <DIV> instead of the cell itself.

Use ClassInner to add some inner border and margin to the cell, for other settings use Class attribute instead.

Remember, setting ClassInner for many cells can slow down the grid rendering and usage!

 

<C><I><cell>   bool       ClassInnerIcon          [0]                                                                                                                                 chg 6.0 .

When used left side Icon and ClassInner, if the icon will be inside the ClassInner <DIV>.

The right side Button is always outside.

 

<Cfg>                bool       UsePrefix                                                                                                                                                               new 6.0 .

If set to 1, inserts the <Cfg Style/> attribute value before every custom Class and ClassInner attribute, in this case the Class must contain only one CSS class name.

Set it to 1 to differ between TreeGrid styles – for every supported style you can define different custom classes.

 

API event          string    OnGetClass     (TGrid grid, TRow row, string col, string cls)                                                                         chg 6.0 .

Called to get custom class name(s) for the cell.

cls is the custom class name(s) for the cell set by Class attribute.

Return null to not change the class or return new class name(s).

 

Cell background color

 

Default row and cell backgrounds are defined in the style in Grid.css file. Also state colors are defined there.

 

<C><I><cell>   string     Background                                                                                                                                                       new 6.0 .

Background color for the cell.

This color overrides any state and type background color of the row, so it hides any row state!

It can be set as “240,240,240” or “rgb(240,240,240)” or “#F0F0F0” or “#FFF” or to basic 16 color names (black, red, green, ...)

The color “255,255,255” is transparent color, so it displays background color of its parent.

 

<C><I><cell>   string    Color                                                                                                                                                                          upd 6.0 .

Predefined base background color for cell, used instead of CSS Default color.

This color is modified by all row and cell state colors, so it preserves the row state highlight!

It can be set as “240,240,240” or “rgb(240,240,240)” or “#F0F0F0” or “#FFF” or to basic 16 color names (black, red, green, ...)

The color “255,255,255” is transparent color, so it displays background color of its parent if no state color is computed.

 

<C><I><cell>   int          NoColor                                                                                                                                                                  upd 6.0 .

If set to 1, the cell is not colored at all, all state and custom colors (Color, Background) are ignored – you can use CSS style background for the cell.

If set to 2, the cell state and type colors are ignored.

 

<I>                     bool       NoColorState                                                                                                                                                                 .

If  set to 1, does not change background color for changed, added, moved and deleted row.

Useful to set for some control rows that will not be uploaded to server.

 

API event          string    OnGetColor      (TGrid grid, TRow row, string col, int r, int g, int b, bool edit)                                               upd 6.0 .

Called to get final color of the cell.

r, g, b are predefined colors for this state. edit is 2 for edited cell.

Can return null to use r,g,b values unchanged.

The returned color is the resulted color for the cell or row and is directly assigned to the cell.

The returned color must be in CSS format like “blue” or “#FFF” or “rgb(r,g,b)”.

 

API event          int          OnGetDefaultColor            (TGrid grid, TRow row, string col, int r, int g, int b)                                     upd 6.0 .

Called to get default color for the cell or row. rgb is predefined color (#RRGGBB)

Returns new integer #RRGGBB color or null to use default.

The returned color is modified according to row state.

 

API method      void       ColorRow           (TRow row)                                                                                                                                           .

Re-colors row according to its state and color settings. It does not update the class.

 

API method      void       ColorCell             (TRow row, string col)                                                                                                                          .

Re-colors cell according to its state and color settings. It does not update the class.

 

Cell HTML style

 

<C> <I> <cell> string    HtmlPrefix                                                                                                                                                                         .

Html code displayed inside cell in front of the value.

Use the HtmlPrefix and HtmlPostfix to add any text or formatting HTML tags before and after cell value.

For formatting use rather Class or Color attribute, it is remarkably faster.

Be careful while including HTML code to cell, any invalid HTML code can break down the grid layout.

 

<C> <I> <cell> string    HtmlPostfix                                                                                                                                                                      .

Html code displayed inside cell after the value.

 

Row color alteration

 

<Cfg>                int          Alternate                                                                                                                                                       renamed 6.0  .

Highlight odd or every N row by another color or class.

0 – no row, 1 – every row, 2 – every odd row, every third row, 3 – every fourth row, ...

By default it uses the Alternate color defined in the actual style in Grid.css.

 

<I>                     string    AlternateColor                                                                                                                                                new 6.0 .

Alternate (absolute) color to be used instead of default alternate color, if the row is odd or Nth.

It can be set as “240,240,240” or “rgb(240,240,240)” or “#F0F0F0” or “#FFF”

Remember it is overridden by Background, but not by Color.

 

<I>                     string    AlternateClass                                                                                                                                                new 6.0 .

Alternate CSS class name(s) to be used instead of default alternate class, if the row is odd or Nth.

 

API method      void       ReColor   ( )                                                                                                                                                             new 7.0 .

Recolors the whole grid. Call it after change in Alternate settings.

 

Cell mouse cursor

 

<C> <cell>        string    Cursor                                                                                                                                                                      new 6.0 .

Mouse cursor displayed when mouse hovering the cell.

It can be standard CSS cursor name: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help

It is ignored if cell content contains some CSS cursor setting.

 

<C> <cell>        string    XXXCursor                                                                                                                                                          new 6.0 .

Mouse cursor displayed when mouse hovering given cell event target. The XXX is actual cell event target under mouse cursor. If such cursor does not exist, the normal Cursor is displayed.

The XXX can be any event target name, see Actions and events, for example EditInt, ButtonSave, SideDefaults, Side, Content and so on.

It is intended to show different cursor for part of the cell like side or tree button.

 

<Actions>                      CursorDefault             Attached to many events, can be attached only to OnMouseOver and OnDragOver events            new 6.0 .

Sets “default” cursor

By default it is attached to OnMouseOverPanelOff, OnMouseOverHeaderOff, OnMouseOverSpaceOff, OnMouseOverTree, OnMouseOverNoFocus, OnMouseOverReadOnly, OnMouseOverNothing.

 

<Actions>                      CursorPointer             Attached to many events, can be attached only to OnMouseOver and OnDragOver events            new 6.0 .

Sets “pointer” / ”hand” cursor

By default it is attached to OnMouseOverButton, OnMouseOverPanel, OnMouseOverSide, OnMouseOverEditBool, OnMouseOverEditEnum, OnMouseOverEditRadio, OnMouseOverSort, OnMouseOverSortUp, OnMouseOverSortDown, OnMouseOverExpand,

 

<Actions>                      CursorText        Attached to OnMouseOverEditable, can be attached only to OnMouseOver and OnDragOver events            new 6.0 .

Sets “text” cursor

 

<Actions>                      CursorResize               Attached to many events, can be attached only to OnMouseOver and OnDragOver events            new 6.0 .

Sets “e-resize” cursor

By default it is attached to OnMouseOverHeaderLeft, OnMouseOverHeaderRight, OnMouseOverPagerHeaderRight.

 

<Actions>                      CursorResizeGrid  Attached to OnMouseOverResize, can be attached only to OnMouseOver and OnDragOver events        new 6.0 .

Sets “nw-resize” cursor

 

<Actions>                      CursorMove     Attached to OnMouseOverPanelMove, can be attached only to OnMouseOver and OnDragOver events            new 6.0 .

Sets “move” cursor

 

<Actions>                      CursorDrag       Attached to OnDragOverCell, can be attached only to OnMouseOver and OnDragOver events                         new 6.0 .

Sets “Drag.cur” cursor when there is no dragging active.

Otherwise sets a cursor according to dragging action.