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.

Predefined styles are: Modern, Standard, Light, Office, Borders, Robust.

For setting other custom style it must be set to style prefix and CSS attribute to style file, e.g. <Cfg Style=’GM’ CSS=’Modern/Grid.css’/>.

 

<Cfg>              string    CSS                                                                                                                                                            new 6.0 .

CSS file with custom CSS style of not used predefined TreeGrid style, see Style attribute.

The path is relative to the actual page URL.

 

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.

 

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.