Cell style and color
TreeGrid documentation
Basic grid style
Base grid styles are defined in Grid.css in appropriate TreeGrid style (default is Modern).
new 6.0 <Cfg> string
Style
["Modern"] Can be saved to cookies, if set StyleLap='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,
Query,
ExtJS,
Round,
Plain,
Colors.
In this case no
CSS and
GanttCSS attributes 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,
GQ,
GE,
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'/>
new 6.0 chg 7.0 <Cfg> string
CSS
[""]
Where the file with TreeGrid CSS style is located, it can be:
a) empty to load CSS file from default style location in Grid/ directory according to the
Style.
b) CSS directory name inside base /Grid directory. This directory must contain file Grid.css as the style definition. For example CSS="Modern"
c) CSS file path and name with custom or moved original CSS style. For example
CSS='../../../Grid/Modern/Grid.css'.
The path is relative to the actual page URL, not to Grid directory!
new 10.0 <Cfg> string
GanttCSS
[""]
Used only if defined Gantt chart. Where the file with TreeGrid Gantt CSS style is located, it can be:
a) empty to load CSS file from default style location in Grid/ directory according to the
Style.
Or if defined
CSS as directory name, the GanttCSS is set to the same name.
Or if defined
CSS as url and contains "Grids.css", the GanttCSS is set to the same url with replaced "Grid.css" by "Gantt.css".
b) CSS directory name inside base /Grid directory. This directory must contain file Gantt.css as the style definition. For example CSS="Modern".
c) CSS file path and name with custom or moved original CSS style. For example
CSS='../../../Grid/Modern/Gantt.css'.
The path is relative to the actual page URL, not to Grid directory!
new 7.0 <Cfg> bool
SafeCSS
[ ]
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.
chg 10.0 API method void
SetStyle
(string Style, string CSS, string GanttCSS, bool render)
Changes TreeGrid style and optionally re-renders grid to show the changes.
Style,
CSS and
GanttCSS (since 10.0) are appropriate attributes
Style,
CSS and
GanttCSS.
CSS and
GanttCSS should be null for predefined TreeGrid style.
upd 10.0 API event bool
OnSetStyle
(TGrid grid, string Style, string CSS, string GanttCSS)
Called before the style is loaded.
Return true to suppress loading the style.
Style,
CSS and
GanttCSS (since 10.0) are appropriate attributes
Style,
CSS and
GanttCSS.
upd 10.0 API event void
OnAfterSetStyle
(TGrid grid, string Style, string CSS, string GanttCSS)
Called after the style is loaded, but before any render is started.
Style,
CSS and
GanttCSS (since 10.0) are appropriate attributes
Style,
CSS and
GanttCSS.
new 8.0 <Cfg> string
DragCursor
[ "url(Drag.cur),default" ]
Mouse cursor shown during dragging. By default it shows the Drag.cur file located in /Grid/ directory.
new 8.0 <Cfg> string
NoDragCursor
[ "url(noDrag.cur),default" ]
Mouse cursor shown during dragging if no drop is possible. By default it shows the NoDrag.cur file located in /Grid/ directory.
new 9.1 <Cfg> bool
GlobalCursor
[0]
Set it to true to set dragging cursor to document to show it while dragging between grids.
new 9.1 <Cfg> bool
ExternalAlign
[0]
If set to
1, does not align the grid content and use alignment from outside.
Cannot be used with ResizingMain. It affects also SafeCSS, but there is shared for all grids.
new 8.0 <Cfg> int
ZIndex
CSS z-index value for the grid and all its popup dialogs, messages and cursors.
Set it, if the grid is placed inside some absolutely positioned container, e.g. some popup dialog. Set it higher than the z-index of the parent container.
It sets z-index for all the grid objects in range ZIndex ~ ZIndex+20.
Any popup grid (shown by ShowPopupGrid or Dates dialog) will get ZIndex+20.
Dynamic cell style attributes
Cell styles used only if set <Cfg
DynamicStyle/>.
Otherwise the look can be preset by
Class attribute.
All style attributes are read from row before column.
new 12.0 <Cfg> int
DynamicStyle
[ ]
Permits individual cell style attributes to set the CSS styles directly instead of using
Class attribute.
0 - off, all attributes are ignored
1 - on, but sets
NoStyle = 1 for all fixed rows and columns.
2 - on
empty - by default for backward compatibility there are enabled attributes
Color,
Wrap,
Align,
VAlign and
Rotate
in all cells only statically and other attributes are disabled.
The DynamicStyle affects also background
Color attribute, but not
Background.
new 12.0 <C> int
NoStyle
[0/2]
If the style attributes will be read for the cells in the column.
0 - all,
1 - all except styles set for whole row,
2 none dynamically,
3 none.
By default it is 2 for Index, Panel and ConstWidth columns and 0 for other rows.
new 12.0 <I> int
NoStyle
[0/2]
If the style attributes will be read for the cells in the row.
0 - all,
1 - all except styles set for whole column,
2 none dynamically,
3 none.
By default it is 3 for Header and Panel rows and 0 for other rows.
new 12.0 <C><I><cell> int
TextStyle
CSS settings for font-weight, font-style, font-variant and text-decoration, bit array.
1. bit &
1 Bold, 2. bit &
2 Italic, 3. bit &
4 Underline,
4. bit &
8 Strike, 5. bit &
16 Overline, 6. bit &
32 Small caps.
new 12.0 <Actions>
BoldOn
,
BoldOff
,
BoldOnCells
,
BoldOffCells
,
BoldOnSelected
,
BoldOffSelected ...F
Attached to OnClickButtonBold event
Changes
TextStyle bit 1 in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
ItalicOn
,
ItalicOff
,
ItalicOnCells
,
ItalicOffCells
,
ItalicOnSelected
,
ItalicOffSelected ...F
Attached to OnClickButtonItalic event
Changes
TextStyle bit 2 in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
UnderlineOn
,
UnderlineOff
,
UnderlineOnCells
,
UnderlineOffCells
,
UnderlineOnSelected
,
UnderlineOffSelected ...F
Attached to OnClickButtonUnderline event
Changes
TextStyle bit 3 in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
StrikeOn
,
StrikeOff
,
StrikeOnCells
,
StrikeOffCells
,
StrikeOnSelected
,
StrikeOffSelected ...F
Attached to OnClickButtonStrike event
Changes
TextStyle bit 4 in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
OverlineOn
,
OverlineOff
,
OverlineOnCells
,
OverlineOffCells
,
OverlineOnSelected
,
OverlineOffSelected ...F
Not attached to any event
Changes
TextStyle bit 5 in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
SmallCapsOn
,
SmallCapsOff
,
SmallCapsOnCells
,
SmallCapsOffCells
,
SmallCapsOnSelected
,
SmallCapsOffSelected ...F
Not attached to any event
Changes
TextStyle bit 6 in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoTextStyle
,
NoTextStyleCells
,
NoTextStyleSelected ...F
Not attached to any event
Sets null to
TextStyle in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <C><I><cell> string
TextColor
Color of the text. Can be any CSS color.
new 12.0 <Cfg> string
TextColor
["red"]
Predefined text color set by actions SetTextColor... to cell
TextColor attribute
new 12.0 <Cfg> string[*]
TextColors
[...]
Predefined text colors set by actions ChooseTextColor... to cell
TextColor attribute. First character separated array.
Format is "|value1|name1|value2|name2|..."
The
value is set to cell
TextColor if chosen menu item
name.
value can be any CSS color definition or empty.
name can be empty to show the
value as menu item.
Default value is "|red||green||blue||brown||maroon||gray|||none".
new 12.0 <Actions>
SetTextColor
,
SetTextColorCells
,
SetTextColorSelected ...F
Attached to OnClickButtonColorText event
Sets value of global
TextColor to
TextColor in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
ChooseTextColor
,
ChooseTextColorCells
,
ChooseTextColorSelected ...F
Attached to Toolbar cell ColorText OnClickPopup event
Shows menu with items in global
TextColors.
If used in Menu, shows submenu with the global
TextColors.
And sets the chosen color to
TextColor in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoTextColor
,
NoTextColorCells
,
NoTextColorSelected ...F
Not attached to any event
Sets null to
TextColor in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <C><I><cell> string
TextSize
Size of the text font in pixels.
Or can contain the unit suffix like in CSS. ("10" means 10px, but can be set also "10px" or "10em" or "10pt" etc.
new 12.0 <Cfg> string
TextSize
["14px"]
Predefined font size set by actions SetTextSize... to cell
TextSize attribute
new 12.0 <Cfg> string[*]
TextSizes
[...]
Predefined font sizes set by actions ChooseTextSize... to cell
TextSize attribute. First character separated array.
Format is "|value1|name1|value2|name2|..."
The
value is set to cell
TextSize if chosen menu item
name.
value can be any CSS font-size definition or empty.
name can be empty to show the
value as menu item.
Default value is "|8px|smallest|9px|smaller|10.5px|small||normal|14px|large|17px|larger|22px|largest".
new 12.0 <Actions>
SetTextSize
,
SetTextSizeCells
,
SetTextSizeSelected ...F
Attached to Toolbar button Size OnChange and OnSame events
Sets value of global
TextSize to
TextSize in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
ChooseTextSize
,
ChooseTextSizeCells
,
ChooseTextSizeSelected ...F
Not attached to any event
Shows menu with items in global
TextSizes.
If used in Menu, shows submenu with the global
TextSizes.
And sets the chosen size to
TextSize in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoTextSize
,
NoTextSizeCells
,
NoTextSizeSelected ...F
Not attached to any event
Sets null to
TextSize in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <C><I><cell> string
TextFont
Font family name. Can be any CSS font-family name. If the name contains spaces, it should be double quoted.
new 12.0 <Cfg> string
TextFont
["'Times New Roman',serif"]
Predefined font name/family set by actions SetTextFont... to cell
TextFont attribute
new 12.0 <Cfg> string[*]
TextFonts
[...]
Predefined font names/families set by actions ChooseTextFont... to cell
TextFont attribute. First character separated array.
Format is "|value1|name1|value2|name2|..."
The
value is set to cell
TextFont if chosen menu item
name.
value can be any CSS font-family definition or empty.
name can be empty to show the
value as menu item.
Default value is "|'Microsoft Sans Serif',Tahoma,'Trebuchet MS',sans-serif|sans serif|'Times New Roman',serif|serif|'Courier New',monospace|monospace||default".
new 12.0 <Actions>
SetTextFont
,
SetTextFontCells
,
SetTextFontSelected ...F
Not attached to any event
Sets value of global
TextFont to
TextFont in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
ChooseTextFont
,
ChooseTextFontCells
,
ChooseTextFontSelected ...F
Not attached to any event
Shows menu with items in global
TextFonts.
If used in Menu, shows submenu with the global
TextFonts.
And sets the chosen font to
TextFont in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoTextFont
,
NoTextFontCells
,
NoTextFontSelected ...F
Not attached to any event
Sets null to
TextFont in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <C><I><cell> int
TextShadow
[0]
A shadow displayed behind or in front of the original text.
There are predefined 0 - 9 shadows, more shadows can be added in Grid.css, GxTextShadowXX.
The shadow value 0 (default) is used only if the
TextShadowColor is set.
Use it for visual effects for the text.
In IE it works only for versions higher than 9.
new 12.0 <Cfg> int
TextShadow
[1]
Predefined text shadow number set by actions SetTextShadow... to cell
TextShadow attribute
new 12.0 <Cfg> string[*]
TextShadows
[...]
Predefined text shadow numbers set by actions ChooseTextShadow... to cell
TextShadow attribute. First character separated array.
Format is "|value1|name1|value2|name2|..."
The
value is set to cell
TextShadow if chosen menu item
name.
value can be any number 0 - 9 or empty.
name can be empty to show the
value as menu item.
Default value is "|0|default background|1|bold|2|bold with ghost|3|bold with background|4|bold with light background|5|ghost|6|ghost with bold|7|dark background|8|background with bold|9|light background".
new 12.0 <Actions>
SetTextShadow
,
SetTextShadowCells
,
SetTextShadowSelected ...F
Not attached to any event
Sets value of global
TextShadow to
TextShadow in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
ChooseTextShadow
,
ChooseTextShadowCells
,
ChooseTextShadowSelected ...F
Not attached to any event
Shows menu with items in global
TextShadows.
If used in Menu, shows submenu with the global
TextShadows.
And sets the chosen shadow to
TextShadow in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoTextShadow
,
NoTextShadowCells
,
NoTextShadowSelected ...F
Not attached to any event
Sets null to
TextShadow in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <C><I><cell> string
TextShadowColor
Color of the shadow selected by
TextShadow.
If used without TextShadow (for its value 0), it displays default shadow in selected color as direct background of the text.
new 12.0 <Cfg> string
TextShadowColor
["#FF0"]
Predefined text shadow color set by actions SetTextShadowColor... to cell
TextShadowColor attribute
new 12.0 <Cfg> string[*]
TextShadowColors
[...]
Predefined text shadow colors set by actions ChooseTextShadowColor... to cell
TextShadowColor attribute. First character separated array.
Format is "|value1|name1|value2|name2|..."
The
value is set to cell
TextShadowColor if chosen menu item
name.
value can be any CSS color definition or empty.
name can be empty to show the
value as menu item.
Default value is "|black||red||green||blue||brown||maroon||gray||yellow||lime||aqua||pink||orange||silver|||none".
new 12.0 <Actions>
SetTextShadowColor
,
SetTextShadowColorCells
,
SetTextShadowColorSelected ...F
Attached to OnClickButtonColorShadow event
Sets value of global
TextShadowColor to
TextShadowColor in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
ChooseTextShadowColor
,
ChooseTextShadowColorCells
,
ChooseTextShadowColorSelected ...F
Attached to Toolbar button ColorShadow OnClickPopup event
Shows menu with items in global
TextShadowColors.
If used in Menu, shows submenu with the global
TextShadowColors.
And sets the chosen color to
TextShadowColor in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoTextShadowColor
,
NoTextShadowColorCells
,
NoTextShadowColorSelected ...F
Not attached to any event
Sets null to
TextShadowColor in actual or focused cell or in all focused cells or in all selected cells.
new 6.0 <C><I><cell> bool
Wrap
[0/1]
If the cell content will be wrapped.
By default it is
1 for types
Html,
Lines,
List and
0 for other types and
Header.
new 12.0 <Actions>
WrapOn
,
WrapOnCells
,
WrapOnSelected ...F
Attached to OnClickButtonWrap event
Sets 1 to
Wrap attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
WrapOff
,
WrapOffCells
,
WrapOffSelected ...F
Attached to OnClickButtonWrap event
Sets 0 to
Wrap attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoWrap
,
NoWrapCells
,
NoWrapSelected ...F
Not attached to any event
Sets null to
Wrap attribute in actual or focused cell or in all focused cells or in all selected cells.
new 6.0 upd 9.3 <C><I><cell> bool
Align
["Left" / "Right"]
How the cell content will be aligned. Case insensitive keyword: "
Left", "
Right", "
Center", "
Justify", "
Scroll".
By default it is "
Right" for types
Int,
Float,
Date and "
Left" for other types.
The
Justify works only for more lines text except the last line.
The side
Button is not rotated, use side
Icon instead. For example for Date type set
Icon='Date' IconAlign='Right'
(Since 9.3) The
Scroll moves the position of the text on scroll to be always visible if at least a part of the cell is visible. Usable especially for spanned cells.
Using too many cells with Align="Scroll" can slow down the grid scrolling!
new 12.0 <Actions>
AlignLeft
,
AlignLeftCells
,
AlignLeftSelected ...F
Attached to OnClickButtonLeft event
Sets "Left" to
Align attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
AlignRight
,
AlignRightCells
,
AlignRightSelected ...F
Attached to OnClickButtonRight event
Sets "Right" to
Align attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
AlignCenter
,
AlignCenterCells
,
AlignCenterSelected ...F
Attached to OnClickButtonCenter event
Sets "Center" to
Align attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoAlign
,
NoAlignCells
,
NoAlignSelected ...F
Not attached to any event
Sets null to
Align attribute in actual or focused cell or in all focused cells or in all selected cells.
new 11.0 <C><I><cell> string
VAlign
[""]
Vertical alignment of the cell content, including side buttons and icons.
Possible value:
top,
middle,
bottom.
To vertically align tree buttons, you have also to set
<Cfg NoTreeLines='2'/>.
By default are all the cells aligned to top.
Setting this attribute to any value including "top" renders cells with more tags and can slow down the grid.
Setting this attribute forces setting ClassInnerIcon='1' FastPanel='0'.
Set the
VAlign="top" for rows higher than 250px to correctly display icon images.
For cell with
Rotate cell use
Align to vertically align the cell.
new 12.0 <Actions>
VAlignTop
,
VAlignTopCells
,
VAlignTopSelected ...F
Attached to OnClickButtonTop event
Sets "Top" to
VAlign attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
VAlignBottom
,
VAlignBottomCells
,
VAlignBottomSelected ...F
Attached to OnClickButtonBottom event
Sets "Bottom" to
VAlign attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
VAlignMiddle
,
VAlignMiddleCells
,
VAlignMiddleSelected ...F
Attached to OnClickButtonMiddle event
Sets "Middle" to
VAlign attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoVAlign
,
NoVAlignCells
,
NoVAlignSelected ...F
Not attached to any event
Sets null to
VAlign attribute in actual or focused cell or in all focused cells or in all selected cells.
new 6.6 upd 12.0 <C><I><cell> int
Rotate
[0]
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,
3 -
(since 9.1) like
2 for IE and
1 for other browser, because 1 is better readable but slow in IE.
Since 12.0 it can be set also to whole row or column.
Don't set it to too many cells, it is intended to use especially in header. It can remarkably slow down the grid!
new 12.0 <Actions>
RotateLeft
,
RotateLeftCells
,
RotateLeftSelected ...F
Attached to OnClickButtonRotateLeft event
Sets 1 to
Rotate attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
RotateRight
,
RotateRightCells
,
RotateRightSelected ...F
Attached to OnClickButtonRotateLeft event
Sets 2 to
Rotate attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>
NoRotate
,
NoRotateCells
,
NoRotateSelected ...F
Attached to OnClickButtonRotateLeft and OnClickButtonRotateRight events
Sets null to
Rotate attribute in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 API event type
OnGetCellStyle
(TGrid grid,TRow row, string col, string attr, type value)
Called to get individual cell style attribute dynamically. It is
not called to get
Color.
attr is attribute name,
value is predefined value.
Return new value or null to ignore.
new 12.0 API method type
GetCellStyleAttribute
(TRow row, string col, string attr)
Returns given style attribute
attr from the cell.
It reads it also from row and column and calls
OnGetCellStyle.
To read just the cell attribute value use
Get (row,col+attr) instead.
new 12.0 API method bool
SetCellStyle
(TRow row, string col, object attrs, bool refresh = 0)
Sets given attributes to cell. If
row is null, sets them to column, if the
col is null, sets them to row.
attrs is JavaScript object as named array, attribute = value, for example {Color:"red",TextColor:"blue",TextStyle:27}.
The
attrs can contain all dynamic cell attributes in this section and
Color.
If set
refresh, refreshes all the cells to show the changes.
It saves the change to undo, if the undo is permitted.
Returns true for success, false if NoStyle restricts setting the cell.
Cell CSS class
new 6.0 <C><I><cell> string
Class
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.
chg 6.0 <C><I><cell> string
ClassInner
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!
chg 6.0 <C><I><cell> bool
ClassInnerIcon
[0/1]
When used left side
Icon and
ClassInner, if the icon will be inside the ClassInner <DIV>.
The default value is
0. If set
VAlign attribute, the value is
1 and cannot be changed.
The right side Button is always outside.
new 6.0 <Cfg> bool
UsePrefix
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.
chg 6.0 API event string
OnGetClass
(TGrid grid, TRow row, string col, string cls)
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.
upd 12.0 <C><I><cell> string
Color
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.
Since 12.0 it is affected by DynamicStyle.
If the DynamicStyle is set to 0, the Color is ignored.
If the DynamicStyle is set to 1 or 2, the Color can be dynamically changed by SetCellStyle, is affected by NoStyle and is read from row before column.
new 12.0 <Cfg> string
DefaultColor
["#FF0"]
Predefined text color set by actions SetColor... to cell
Color attribute
new 12.0 <Cfg> string[*]
DefaultColors
[...]
Predefined background colors set by actions ChooseColor... to
Color attribute. First character separated array.
Format is "|value1|name1|value2|name2|..."
The
value is set to cell
Color if chosen menu item
name.
value can be CSS color as "#RGB" or "#RRGGBB" or "rgb(R,G,B)" definition or empty.
name can be empty to show the
value as menu item.
Default value is "|#FF0|yellow|#0F0|lime|#0FF|aqua|#FCC|pink|#FA0|orange|#CCC|silver||none".
new 12.0 <Actions>
SetColor
,
SetColorCells
,
SetColorSelected ...F
Attached to OnClickButtonColorBackground event
Sets value of global
DefaultColor to
Color in actual or focused cell or in all focused cells or in all selected cells.
Used only if DynamicStyle is set.
new 12.0 <Actions>
ChooseColor
,
ChooseColorCells
,
ChooseColorSelected ...F
Attached to Toolbar button ColorBackground OnClickPopup event
Shows menu with items in global
Colors.
If used in Menu, shows submenu with the global
Colors.
And sets the chosen color to
Color in actual or focused cell or in all focused cells or in all selected cells.
Used only if DynamicStyle is set.
new 12.0 <Actions>
NoColor
,
NoColorCells
,
NoColorSelected ...F
Not attached to any event
Sets null to
Color in actual or focused cell or in all focused cells or in all selected cells.
Used only if DynamicStyle is set.
new 6.0 <C><I><cell> string
Background
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.
upd 6.0 <C><I><cell> int
NoColor
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.
new 12.0 <Cfg> int
ColorState
[63]
If the cell / row / column state change will be colored, bit array.
1. bit &
1 If the changed cells will be colored.
2. bit &
2 If the added, deleted, moved and changed rows will be colored.
3. bit &
4 If the added and deleted columns will be colored.
4. bit &
8 If the cell permissions (edit/readonly/preview/nofocus) will be colored.
5. bit &
16 If the cell with editable formulas will be colored.
6. bit &
32 If the cell with Error will be colored.
By default all options are colored.
<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.
upd 6.0 API event string
OnGetColor
(TGrid grid, TRow row, string col, int r, int g, int b)
Called to get final color of the cell.
r,
g,
b are predefined colors for this state.
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)".
upd 6.0 API event int
OnGetDefaultColor
(TGrid grid, TRow row, string col, int r, int g, int b)
Called to get default color for the cell or row.
r,
g,
b are predefined colors for this state.
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.
Dynamic cell border
If set <Cfg
DynamicBorder/>, every cell can have different border color, style and width defined by cell
Border attribute.
But the borders are shared between adjacent cells - adjacent cells have the same border edge color, style and width.
If the
DynamicBorder is
not set, every cell can have different border color and style defined by cell
Class attribute.
But all cells must have the same border width, defined by the used TreeGrid CSS style.
new 12.0 <Cfg> int
DynamicBorder
[0]
Sets the cell dynamic border to use in the grid.
0 - off,
1 - for variable rows and middle columns only
2 - for all rows and columns.
If set, the cell border can be defined by
Border attribute. And can be dynamically changed by API method
SetBorder.
If set, all the affected cells get 2px border top and left and 1px border bottom and right. This cell border is usually transparent.
Using dynamic cell borders can slow down the grid refresh. It can also slightly modify the grid look, it increases the cell size by the border.
new 12.0 <Cfg> int
SpannedBorder
[3]
How the cell border is rendered for spanned cells, if the border cannot be shared due the cell edge length difference or shift.
Due the border implementation the cell share their border, therefore spanned cells cannot share their border fully, if the span is different.
| 1+2. bit, &3 | 0 - The border part is hidden. It leads to missing border parts. |
| 1 - The border part width is changed to be shown for the cell always. The top and left edges are always 2px wide and the bottom and right edges are always 1px wide. |
| 2 - Like 1 and removes the changed border edge from adjacent cell, even if it could show it correctly. |
| 3 - Like 2 and it is used also for grid outside edges. |
| 3. bit, &4 | If set, spanned cells shows its right and bottom border. |
| If not set, right border is read from top right cell and bottom border from bottom left cell. |
new 12.0 <C> int
NoBorder
[0/3]
If the border will be shown for the cells in the column.
0 - all,
1 - all except border set for whole row,
2 none dynamically,
3 none.
By default it is 3 for Index, Panel and ConstWidth columns and 0 for other rows.
new 12.0 <I> int
NoBorder
[0/3]
If the border will be shown for the cells in the row.
0 - all,
1 - all except border set for whole column,
2 none dynamically,
3 - none and for fixed rows the border space is also not reserved in the row cells.
By default it is 3 for Header and Panel rows and 0 for other rows.
new 12.0 <C><I><cell> string[]
BorderTop
,
BorderRight
,
BorderBottom
,
BorderLeft
One cell border edge.
Format comma separated 3 values as "width,color,priority". For example BorderLeft="3,red" BorderTop="1,blue,2" BorderBottom="1".
If the border is not set or it is empty, it shows default cell border.
The
width is the border width and style, it can be:
0 - transparent border - no border is shown,
1 - 1px solid,
2 - 2px solid,
3 - 3px solid,
4 - 1px dotted,
5 - 2px dotted,
6 - 1px dashed,
7 - 2px dashed,
The
color can be any CSS color name or code like
red or
#FF0000. If empty, black color is used.
To
priority is a number to choose one border if more borders are defined for the same cell edge.
If adjacent cells define the same border edge, the cell with higher
priority is preferred.
For the same
priority, the cell on right or bottom side is preferred.
If the Border attribute is defined for both cell and/or row and/or column, the value with higher
priority is used.
For the same
priority the priority order is (high->low): cell, row, column.
For
spanned cells the top and left border is read from the spanned (top left) cell.
The right border is read from top right cell and the bottom border is read from bottom left cell, except
SpannedBorder has set
4.
If the
spanned cell edge row or column is
hidden, the left and top border is read from the next bottom cell.
The right border is read from the next left cell and the bottom border from next top cell, except
SpannedBorder has set
4.
new 12.0 <Cfg> string[]
BorderOut
["3,black"]
Predefined border to be set by
SetBorder... actions as outer cell border in cell range.
Contains up to 4 comma separated values as "width,color,priority,edge".
new 12.0 <Cfg> string[]
BorderIn
["1,black"]
Predefined border to be set by
SetBorder... actions as inner cell border in cell range.
Contains up to 4 comma separated values as "width,color,priority,edge".
new 12.0 <Cfg> int
BorderType
[0]
Which rows and columns are affected by setting and clearing borders, bit array.
| 1.bit (&1) | Include deleted rows and columns. |
| 2.bit (&2) | Include filtered rows and columns. |
| 3.bit (&4) | Include manually hidden rows and columns |
| 4.bit (&8) | Include children in collapsed parents |
new 12.0 <Cfg> int
BorderColors
[...]
Predefined text shadow colors set by actions ChooseBorderColor... to cell border. First character separated array.
Format is "|value1|name1|value2|name2|..."
The
value is set to cell border if chosen menu item
name.
value can be any CSS color definition or empty.
name can be empty to show the
value as menu item.
Default value is "|black||red||green||blue||brown||maroon||gray||yellow||lime||aqua||pink||orange||silver||none".
new 12.0 API method string[]
GetBorder
(TRow row, string col, int edge = 15)
Returns parsed
Border... attributes for given cell, as JavaScript 2D array in format:
[[topwidth,topcolor,toppriority],[rightwidth,rightcolor,rightpriority],[bottomwidth,bottomcolor,bottompriority],[bottomwidth,bottomcolor,bottompriority]].
The array item can be null if the border edge is not set or required by
edge.
edge is bit array to specify which border to read:
1 top,
2 right,
4 bottom,
8 left. Set it to
15 to get them all.
new 12.0 API method void
SetBorder
(TRow row, string col, type border, int edge = 15, int refresh = 1, int span = 0)
Sets given
border to specified cell
Border... attributes and refreshes the cell border.
The
border can be string as "width,color,priority" or JavaScrit array as [width,color,priority] or null to clear the border.
edge - which border edge will be set, bit array:
1 top,
2 right,
4 bottom,
8 left. Set it to
15 to set them all.
refresh - if and when the cell is refreshed,
0 - no, sets only the attribute,
1 - refresh only changed edges,
2 refresh always.
| span | how sets and refreshes spanned cell |
| 0 - for main cell sets the left and top border to main cell, right border to top right cell and bottom border to bottom left cell. Ignores all hidden spanned cells. |
| 1 - like 0, but for hidden spanned cell sets and refreshes the main cell. |
| 2 - sets the border always to given cell, including hidden spanned cells. Refreshes only it the cell is main cell. |
| 3 - like 2, but refreshes also if the cell is top right or bottom left cell. |
The shown cell border can be different than the one set because of the borders in adjacent cells.
new 12.0 API method void
RefreshBorder
(TRow row, string col, int edge = 15, int span = 0)
Refreshes the given cell border.
edge - which border edge will be refreshed, bit array:
1 top,
2 right,
4 bottom,
8 left. Set it to
15 to refresh them all.
span - for spanned cells;
0 or
2 - refreshes it only if it is main cell,
1 - refreshes always the main cell,
3 - refreshes it if it is main cell or top right or bottom left cell.
Note, neither the RefreshCell nor SetAttribute, nor SetValue refresh the cell border! And RefreshRow refreshes only the inner vertical borders.
new 12.0 API method void
SetBorders
(type[] range, type borderout = null, type borderin = null, int edge = 15)
Sets cell borders in the given
range as [TRow row1, string col1, TRow row2, string col2].
edge - which border edge will be set, bit array:
1 top,
2 right,
4 bottom,
8 left. Set it to
15 to set them all.
borderout will be set to edge cells, only to their outside edges. It is ignored if set to null.
borderin will be set to every cell in the range, except the outside edges of edge cells. It is ignored if set to null.
The
borderout and
borderin can be string as "width,color,priority" or JavaScrit array as [width,color,priority] or null to clear the border.
new 12.0 API event type[]
OnGetBorder
(TGrid grid, TRow row, string col, type[] border, int edge)
Called to get one border edge of the cell.
edge - which border edge is required, bit array:
1 top,
2 right,
4 bottom,
8 left. Set it to
15 to set them all.
border is a border to be set. It is an array as [width,color,priority]. Can be null for empty border.
Return new
border or null to ignore or empty string to not set any border.
new 12.0 <Actions>
ClearBorder ...F
Not attached to any event
Clears all four borders in actual or focused cell.
new 12.0 <Actions>
ClearBorderTop
,
ClearBorderBottom
,
ClearBorderLeft
,
ClearBorderRight ...F
Not attached to any event
Clears one border in actual or focused cell.
new 12.0 <Actions>
SetBorder ...F
Not attached to any event
Sets all four borders in actual or focused cell to
BorderOut.
new 12.0 <Actions>
SetBorderTop
,
SetBorderBottom
,
SetBorderLeft
,
SetBorderRight ...F
Not attached to any event
Sets one border in actual or focused cell to
BorderOut.
new 12.0 <Actions>
SetBorderIn ...F
Not attached to any event
Sets all four borders in actual or focused cell to
BorderIn.
new 12.0 <Actions>
SetBorderInTop
,
SetBorderInBottom
,
SetBorderInLeft
,
SetBorderInRight ...F
Not attached to any event
Sets one border in actual or focused cell to
BorderIn.
new 12.0 <Actions>
ClearBorders ...F
Not attached to any event
Clears all four borders in all focused cells. Version without ...F fails if the actual cell is not focused.
new 12.0 <Actions>
ClearBordersOut ...F
Not attached to any event
Clears all outer borders in the focused range. Version without ...F fails if the actual cell is not focused.
Outer border is between focused and not focused cell.
new 12.0 <Actions>
ClearBordersIn ...F
Not attached to any event
Clears all inner borders in the focused range. Version without ...F fails if the actual cell is not focused.
Inner border is between two focused cells.
new 12.0 <Actions>
ClearBordersTop
,
ClearBordersBottom
,
ClearBordersLeft
,
ClearBordersRight ...F
Not attached to any event
Clears one border in the focused range. Version without ...F fails if the actual cell is not focused.
new 12.0 <Actions>
SetBorders ...F
Attached to OnClickButtonBorder event
Sets outer and inner borders in the focused range. Version without ...F fails if the actual cell is not focused.
Outer border is set to
BorderOut, inner border to
BorderIn.
Outer border is between focused and not focused cell. Inner border is between two focused cells.
new 12.0 <Actions>
SetBordersOut ...F
Not attached to any event
Sets outer borders in the focused range. Version without ...F fails if the actual cell is not focused.
The border is set to
BorderOut. Outer border is between focused and not focused cell.
new 12.0 <Actions>
SetBordersOutTop
,
SetBordersOutBottom
,
SetBordersOutLeft
,
SetBordersOutRight ...F
Not attached to any event
Sets one outer border in the focused range to
BorderOut. Version without ...F fails if the actual cell is not focused.
new 12.0 <Actions>
SetBordersIn ...F
Not attached to any event
Sets inner borders in the focused range. Version without ...F fails if the actual cell is not focused.
The border is set to
BorderIn. Inner border is between two focused cells.
new 12.0 <Actions>
SetBordersInTop
,
SetBordersInBottom
,
SetBordersInLeft
,
SetBordersInRight ...F
Not attached to any event
Sets one inner border in the focused range to
BorderIn. Version without ...F fails if the actual cell is not focused.
new 12.0 <Actions>
ClearSelectedBorders ...F
Not attached to any event
Clears all four borders in all selected cells. Version without ...F fails if the actual cell is not selected.
new 12.0 <Actions>
ClearSelectedBordersOut ...F
Not attached to any event
Clears all outer borders in all selected ranges. Version without ...F fails if the actual cell is not selected.
Outer border is between focused and not focused cell.
new 12.0 <Actions>
ClearSelectedBordersIn ...F
Not attached to any event
Clears all inner borders in all selected ranges. Version without ...F fails if the actual cell is not selected.
Inner border is between two focused cells.
new 12.0 <Actions>
ClearSelectedBordersTop
,
ClearSelectedBordersBottom
,
ClearSelectedBordersLeft
,
ClearSelectedBordersRight ...F
Not attached to any event
Clears one border in all selected ranges. Version without ...F fails if the actual cell is not selected.
new 12.0 <Actions>
SetSelectedBorders ...F
Attached to OnClickButtonBorder event
Sets outer and inner borders in all selected ranges. Version without ...F fails if the actual cell is not selected.
Outer border is set to
BorderOut, inner border to
BorderIn.
Outer border is between focused and not focused cell. Inner border is between two focused cells.
new 12.0 <Actions>
SetSelectedBordersOut ...F
Not attached to any event
Sets outer borders in all selected ranges. Version without ...F fails if the actual cell is not selected.
The border is set to
BorderOut. Outer border is between focused and not focused cell.
new 12.0 <Actions>
SetSelectedBordersOutTop
,
SetSelectedBordersOutBottom
,
SetSelectedBordersOutLeft
,
SetSelectedBordersOutRight ...F
Not attached to any event
Sets one outer border in all selected ranges to
BorderOut. Version without ...F fails if the actual cell is not selected.
new 12.0 <Actions>
SetSelectedBordersIn ...F
Not attached to any event
Sets inner borders in all selected ranges. Version without ...F fails if the actual cell is not selected.
The border is set to
BorderIn. Inner border is between two focused cells.
new 12.0 <Actions>
SetSelectedBordersInTop
,
SetSelectedBordersInBottom
,
SetSelectedBordersInLeft
,
SetSelectedBordersInRight ...F
Not attached to any event
Sets one inner border in all selected ranges to
BorderIn. Version without ...F fails if the actual cell is not selected.
new 12.0 <Actions>
ChooseBorderStyle
,
ChooseBordersStyle
,
ChooseSelectedBordersStyle ...F
Not attached to any event
Shows menu with 9 items as available border styles.
If used in Menu, shows submenu with the 9 border styles.
And sets the chosen style to
Border... in actual or focused cell or in all focused cells or in all selected cells.
The result is affected also by edge and color set in
BorderIn and
BorderOut.
new 12.0 <Actions>
ChooseBorderEdge
,
ChooseBordersEdge
,
ChooseSelectedBordersEdge ...F
Not attached to any event
Shows menu with 11 items as possible border edges.
If used in Menu, shows submenu with the 11 border edges.
And sets the chosen edge in
Border... in actual or focused cell or in all focused cells or in all selected cells.
The result is affected also by style and color set in
BorderIn and
BorderOut.
new 12.0 <Actions>
ChooseBorderColor
,
ChooseBordersColor
,
ChooseSelectedBordersColor ...F
Not attached to any event
Shows menu with colors predefined in
BorderColors.
If used in Menu, shows submenu with the border colors.
And sets the chosen color to
Border... in actual or focused cell or in all focused cells or in all selected cells.
The result is affected also by edge and style set in
BorderIn and
BorderOut.
new 12.0 <Actions>
ChooseBorder
,
ChooseBorders
,
ChooseSelectedBorders ...F
Attached to Toolbar button Border OnClickPopup event
Shows menu with 3 columns, in left column are 9 items as available border styles,
in middle column are 11 items are possible border edges and in right column are colors defined by
BorderColors.
If used in Menu, shows submenu with the 9 border styles, 11 border edges and border colors.
And sets the chosen style to
Border... in actual or focused cell or in all focused cells or in all selected cells.
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.
It is read from row before column.
<C><I><cell> string
HtmlPostfix
Html code displayed inside cell after the value. See
HtmlPrefix.
<Header> bool
NoEscape
[0]
Set it to
1 to use HTML code in column captions - Header cells. It uses
Html Type cells for Header instead of default
Lines.
Row color alteration
renamed 6.0 <Cfg> int
Alternate
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.
new 11.0 <Cfg> int
AlternateCount
[1]
Count of colored rows in one group.
For example if set
Alternate='5' AlternateCount='2' it will color: 3 normal, 2 alternate, 3 normal, 2 alternate, ...
new 12.1 <Cfg> int
AlternateStart
[...]
First row that will be marked with alternate color.
0 means the first row.
By default it is Alternate - AlternateCount.
new 11.0 <Cfg> int
AlternateType
[0]
Alternate coloring flags, bit array.
| 1. bit (&1) | If the expanded children coloring will be included in parent coloring. It will slow down expanding / collapsing, because it will always recolor the whole grid. |
| 2. bit (&2) | If the root pages in server paging will be included in the other pages coloring. It will slow down loading pages, because it will always recolor the whole grid. |
new 6.0 <I> string
AlternateColor
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.
new 6.0 <I> string
AlternateClass
Alternate CSS class name(s) to be used instead of default alternate class, if the row is odd or Nth.
new 7.0 API method void
ReColor
( )
Recolors the whole grid. Call it after change in Alternate settings.
Cell mouse cursor
new 6.0 <C> <cell> string
Cursor
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.
new 6.0 <C> <cell> string
XXXCursor
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.
new 6.0 <Actions>
CursorDefault
Attached to many events, can be attached only to OnMouseOver and OnDragOver events
Sets "default" cursor.
By default it is attached to OnMouseOverPanelOff, OnMouseOverHeaderOff, OnMouseOverSpaceOff, OnMouseOverTree, OnMouseOverNoFocus, OnMouseOverReadOnly, OnMouseOverNothing.
new 6.0 <Actions>
CursorPointer
Attached to many events, can be attached only to OnMouseOver and OnDragOver events
Sets "pointer" / "hand" cursor.
By default it is attached to OnMouseOverButton, OnMouseOverPanel, OnMouseOverSide, OnMouseOverEditBool, OnMouseOverEditEnum, OnMouseOverEditRadio, OnMouseOverSort, OnMouseOverSortUp, OnMouseOverSortDown, OnMouseOverExpand.
new 6.0 <Actions>
CursorText
Attached to OnMouseOverEditable, can be attached only to OnMouseOver and OnDragOver events
Sets "text" cursor.
new 6.0 <Actions>
CursorResize
Attached to many events, can be attached only to OnMouseOver and OnDragOver events
Sets "e-resize" cursor.
By default it is attached to OnMouseOverHeaderLeft, OnMouseOverHeaderRight, OnMouseOverPagerHeaderRight.
new 6.0 <Actions>
CursorResizeGrid
Attached to OnMouseOverResize, can be attached only to OnMouseOver and OnDragOver events
Sets "nw-resize" cursor.
new 6.0 <Actions>
CursorMove
Attached to OnMouseOverPanelMove, can be attached only to OnMouseOver and OnDragOver events
Sets "move" cursor.
new 6.0 <Actions>
CursorDrag
Attached to OnDragOverCell, can be attached only to OnMouseOver and OnDragOver events
Sets "Drag.cur" cursor when there is no dragging active.
Otherwise sets a cursor according to dragging action.