TreeGrid v6.6
Cell style and color
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.
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.
<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).
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.
<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.
<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.
<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.