Cell style and color

TreeGrid documentation

Basic grid style

Base grid styles are defined in ...Grid.css and ...Gantt.css in Styles/ directory (default is Standard for grid and White for Gantt).
Base TreeGrid style selection. The base TreeGrid style presets nearly all visual settings in TreeGrid except Gantt chart. It can be:
a) Name of the predefined style from Styles, e.g. "Standard" or "White". In this case no CSS attribute should be set.
b) Prefix for custom or predefined CSS style. All the CSS classes in the file must start by this prefix, e.g. "TS", "XX" or "MyCustomPrefix". For custom prefix the CSS attribute must be set to style file or directory, e.g. <Cfg Style='PR1' GanttStyle='PR2' CSS='../CSSPR/Grid.css' GanttCSS='../CSSPR/Gantt.css'/> Used only if defined Gantt chart. TreeGrid style selection for Gantt chart. The TreeGrid Gantt style presets nearly all visual settings in the Gantt chart cells. It can be:
a) Name of the predefined style from GanttStyles, e.g. "Standard" or "White". In this case no GanttCSS attributes should be set.
b) Prefix for custom or predefined CSS style. All the CSS classes in the file must start by this prefix, e.g. "TS", "YY" or "MyCustomPrefix". For custom prefix the GanttCSS attribute must be set to style file or directory, e.g. <Cfg Style='PR1' GanttStyle='PR2' CSS='../CSSPR/Grid.css' GanttCSS='../CSSPR/Gantt.css'/> Where the file with TreeGrid CSS style is located, it can be:
a) empty to load CSS file from default style location defined in Styles according to the Style.
b) CSS file path and name with original or custom CSS style. For example CSS='*Styles/BlackGrid.css' or CSS='../../../Grid/Compatible/Gradient/Grid.css'.
If the path starts by *, it is relative to Grid/ directory (new 13.0), otherwise it is relative to the actual page URL.
c) CSS directory name inside base /Grid directory. This directory must contain files Grid.css as the style definition. For example CSS="Compatible/Standard"
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 defined in GanttStyles according to the GanttStyle.
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 file path and name with original or custom CSS style. For example GanttCSS='*Styles/BlackGanttcss' or GanttCSS='../../../Grid/Compatible/Gradient/Gantt.css'.
If the path starts by *, it is relative to Grid/ directory (new 13.0), otherwise it is relative to the actual page URL.
c) CSS directory name inside base /Grid directory. This directory must contain file Gantt.css as the style definition. For example GanttCSS="Compatible/Standard".
List of available TreeGrid styles in JSON format.
Its structure is Styles="{prefix1:{Name:name1,CSS:url1},prefix2:{Name:name2,CSS:url2},...}",
where prefix is the style prefix like "TS" (will be used in Style attribute),
Name is the style name like "Standard" (will be shown in Toolbar Styles type cell or optionally in Style attribute),
CSS is the CSS style url (will be used in CSS attribute). If not set, the Name is used,
List of available TreeGrid styles for Gantt chart in JSON format.
Its structure is GanttStyles="{prefix1:{Name:name1,CSS:url1},prefix2:{Name:name2,CSS:url2},...}",
where prefix is the style prefix like "GW" (will be used in GanttStyle attribute),
Name is the style name like "Standard" (will be shown in Toolbar Styles type cell or optionally in GanttStyle attribute),
CSS is the CSS style url (will be used in GanttCSS attribute). If not set, the Name is used,
Shows list of TreeGrid CSS styles defined in <Cfg> Styles attribute, by default used on Toolbar.
If the cell value is 0, no style list is shown. Set <Toolbar Styles='0'/> to hide the default list on toolbar.
If the cell value is 1, it creates one space cell for every TreeGrid CSS style.
If the cell value is 2, it creates one combo with popup list with all TreeGrid CSS styles.
Shows list of TreeGrid CSS for Gantt chart styles defined in <Cfg> GanttStyles attribute, by default used on Toolbar.
If the cell value is 0, no style list is shown. Set <Toolbar Styles='0'/> to hide the default list on toolbar.
If the cell value is 1, it creates one space cell for every TreeGrid CSS style.
If the cell value is 2, it creates one combo with popup list with all TreeGrid CSS styles.
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.
Changes TreeGrid style and optionally re-renders grid to show the changes.
Style, CSS, GanttCSS (since 10.0), GanttStyle (since 13.0) are appropriate attributes Style, CSS and GanttCSS. CSS and GanttCSS should be null for predefined TreeGrid style. Called before the style is loaded.
Return true to suppress loading the style.
Style, CSS, GanttCSS (since 10.0), GanttStyle (since 13.0) are appropriate attributes Style, CSS and GanttCSS. Called after the style is loaded, but before any render is started.
Style, CSS, GanttCSS (since 10.0), GanttStyle (since 13.0) are appropriate attributes Style, CSS and GanttCSS. Mouse cursor shown during dragging. By default it shows the Drag.cur file located in /Grid/ directory. Mouse cursor shown during dragging if no drop is possible. By default it shows the NoDrag.cur file located in /Grid/ directory. Set it to true to set dragging cursor to document to show it while dragging between grids. 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. 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. If adds GGxDep class to the main grid tag.
Used in some CSS styles to modify boxes if dependencies are used in Gantt, e.g. in White style shifts box content to not overlay the dependency arrow / stub.

Sizing and scaling - responsive design

Chosen variant of actual CSS style. It can be comma separated list of CSS class names that are added (with prefix) to the TreeGrid main tags and dialog parents to modify actual CSS style.
For example Size="Small,Low" for Style="TS" and GanttStyle="GW" adds CSS classes "TSSmall", "TSLow", "GWSmall" and "GWLow" to the TreeGrid main tags. And the CSS style can change itself like: .TSSmall * { font-size:10px; }
The Size modifiers usually changes size of the CSS style items, but can change also anything else, e.g. color schema.
Or it can be one of the names in Sizes list to use its assigned classes value.
List of available TreeGrid style sizes in JSON format.
Its structure is Sizes="{name1:'classes1',name2:'classes2',...}",
where name is the style name shown in Toolbar Sizes type cell.) and classes is comma separated list of CSS classes assigned to the Size attribute.
Shows list of TreeGrid CSS styles sizes defined in <Cfg> Sizes attribute, by default used on Toolbar.
If the cell value is 0, no style sizes list is shown. Set <Toolbar Sizes='0'/> to hide the default list on toolbar.
If the cell value is 1, it creates one space cell for every TreeGrid CSS style size.
If the cell value is 2, it creates one combo with popup list with all TreeGrid CSS style sizes.
Changes the grid Size to size value and rerenders the grid.
If set, it scales the grid by given zoom factor, for < 1.0 shrinks, for > 1.0 magnifies.
Since 13.0 TreeGrid can be placed to parent tag that has CSS transform: scale(). This scale is independent on the Scale and both ways can be used also together.
It does not affect menus, dialogs and messages, see ScaleMenu.
It is not related to Gantt zoom, to scale Gantt chart use GanttZoom.
If set, it scales the grid menus, dialogs and messages by given zoom factor, for < 1.0 shrinks, for > 1.0 magnifies.
If set to negative value it is taken as positive and also multiplied by Scale and any grid parent transform: scale() value.
List of available TreeGrid scales in JSON format.
Its structure is Scales="{name1:scale1,name2:scale2,...}",
where name is the style name shown in Toolbar Scales type cell.) and scale is set to the Scale attribute.
Shows list of TreeGrid CSS scales defined in <Cfg> Scales attribute, by default used on Toolbar.
If the cell value is 0, no scales list is shown. Set <Toolbar Scales='0'/> to hide the default list on toolbar.
If the cell value is 1, it creates one space cell for every TreeGrid CSS scale.
If the cell value is 2, it creates one combo with popup list with all TreeGrid CSS scales.
Changes the grid Scale to scale value and updates the grid size.
If it changes Size to smaller value from Sizes and / or Scale to smalled value from Scales, if there is not enough room to display the grid readable.
0 - never, 1 - always, 2 - ask user, 3 (new 13.1, set as default) - minimal (only to display grid).
When it changes Size to smaller value from Sizes and / or Scale to smalled value from Scales, if there is not enough room to display the grid readable. Bit array.
It is applied before LimitScroll.
1. bit &1 - Horizontal limit. Shrinks if the width of any column section is lower than the MinLeftWidth / MinMidWidth / MinRightWidth value.
2. bit &2 - Vertical limit. Shrinks if the height of visible variable rows count is smaller than MinBodyRows value.
3. bit &4 - Space width limit. Shrinks if any Space row does not display all its cells fully because too small grid width.
4. bit &8 - Pager height limit. Shrinks pager only, if it shows vertical scrollbar. It does not change the StyleSize in this case. Not affected by ShrinkSize. Ignored if set SafeCSS=1.
5. bit &16 - Decrease Scale, if the style size cannot be more reduced. To reduce only Scale set empty ShrinkStyleWidth and ShrinkStyleHeight.
6. bit &32 - Save the automatically changed Size and Scale to cookies.
Minimal count of variable rows to be displayed, for ShrinkStyleType 2. bit.
The row height is taken as minimal row height set in actual style and style size or by MinRowHeight.
Comma separated list of style size names that be used when shrinking horizontally by ShrinkStyle, ShrinkStyleType 1. bit. If not defined, all style sizes from Sizes are used. Comma separated list of style size names that be used when shrinking vertically by ShrinkStyle, ShrinkStyleType 2. bit. If not defined, all style sizes from Sizes are used. Comma separated list of Scale value that be used when decreasing scale by ShrinkStyle, ShrinkStyleType 5. bit. If not defined, all scales from Scales are used.
Last cell in space row to be visible, for ShrinkStyleType 4. bit.
Default value is "Cfg" for default Toolbar and empty for other space rows.

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.
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.
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.
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.
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. Changes TextStyle bit 1 in actual or focused cell or in all focused cells or in all selected cells.
Changes TextStyle bit 2 in actual or focused cell or in all focused cells or in all selected cells.
Changes TextStyle bit 3 in actual or focused cell or in all focused cells or in all selected cells.
Changes TextStyle bit 4 in actual or focused cell or in all focused cells or in all selected cells.
Changes TextStyle bit 5 in actual or focused cell or in all focused cells or in all selected cells.
Changes TextStyle bit 6 in actual or focused cell or in all focused cells or in all selected cells.
Sets null to TextStyle in actual or focused cell or in all focused cells or in all selected cells.
Color of the text. Can be any CSS color. Predefined text color set by actions SetTextColor... to cell TextColor attribute
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".
Sets value of global TextColor to TextColor in actual or focused cell or in all focused cells or in all selected cells.
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.
Sets null to TextColor in actual or focused cell or in all focused cells or in all selected cells.
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.
Predefined font size set by actions SetTextSize... to cell TextSize attribute
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".
Sets value of global TextSize to TextSize in actual or focused cell or in all focused cells or in all selected cells.
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.
Sets null to TextSize in actual or focused cell or in all focused cells or in all selected cells.
Font family name. Can be any CSS font-family name. If the name contains spaces, it should be double quoted.
Predefined font name/family set by actions SetTextFont... to cell TextFont attribute
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".
Sets value of global TextFont to TextFont in actual or focused cell or in all focused cells or in all selected cells.
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.
Sets null to TextFont in actual or focused cell or in all focused cells or in all selected cells.
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. Predefined text shadow number set by actions SetTextShadow... to cell TextShadow attribute
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".
Sets value of global TextShadow to TextShadow in actual or focused cell or in all focused cells or in all selected cells.
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.
Sets null to TextShadow in actual or focused cell or in all focused cells or in all selected cells.
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.
Predefined text shadow color set by actions SetTextShadowColor... to cell TextShadowColor attribute
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".
Sets value of global TextShadowColor to TextShadowColor in actual or focused cell or in all focused cells or in all selected cells.
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.
Sets null to TextShadowColor in actual or focused cell or in all focused cells or in all selected cells.
If the cell content will be wrapped.
By default it is 1 for types Html, Lines, List and 0 for other types and Header.
Sets 1 to Wrap attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets 0 to Wrap attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets null to Wrap attribute in actual or focused cell or in all focused cells or in all selected cells.
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! Sets "Left" to Align attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets "Right" to Align attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets "Center" to Align attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets null to Align attribute in actual or focused cell or in all focused cells or in all selected cells.
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.
Sets "Top" to VAlign attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets "Bottom" to VAlign attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets "Middle" to VAlign attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets null to VAlign attribute in actual or focused cell or in all focused cells or in all selected cells.
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! Sets 1 to Rotate attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets 2 to Rotate attribute in actual or focused cell or in all focused cells or in all selected cells.
Sets null to Rotate attribute in actual or focused cell or in all focused cells or in all selected cells.
Indent of the cell value. For right aligned from right edge, otherwise from left edge. One indent step is 10px, can be changed in CSS.
Predefined indent set by actions SetIndent... to cell Indent attribute
Predefined indents set by actions ChooseIndent... to cell Indent attribute. First character separated array. Format is "|value1|name1|value2|name2|..."
The value is set to cell Indent if chosen menu item name. value is a number as the indent size or empty. name can be empty to show the value as menu item.
Indents="||<span style='font-size:9px;color:silver;'>indent</span>|0|0|1|1|2|2|3|3|4|4|5|5|6|6|7|7|8|8|9|9|10|10|15|15|20|20|25|25|30|30|35|35|40|40|45|45|50|50"
Sets value of global Indent to Indent in actual or focused cell or in all focused cells or in all selected cells.
Shows menu with items in global Indents. If used in Menu, shows submenu with the global Indents.
And sets the chosen indent to Indent in actual or focused cell or in all focused cells or in all selected cells.
Sets null to Indent in actual or focused cell or in all focused cells or in all selected cells.
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.
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.
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

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. 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! 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. 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. 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. 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.
Predefined text color set by actions SetColor... to cell Color attribute
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".
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.
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.
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.
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. 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. 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.
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. 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)". 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. Re-colors row according to its state and color settings. It does not update the class. 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.
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.
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.

If the grid with DynamicBorder displays standard cell border from chosen CSS style. 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.
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.
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.
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".
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".
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

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".
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.
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.
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.
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.
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.
Clears all four borders in actual or focused cell.
Clears one border in actual or focused cell.
Sets all four borders in actual or focused cell to BorderOut.
Sets one border in actual or focused cell to BorderOut.
Sets all four borders in actual or focused cell to BorderIn.
Sets one border in actual or focused cell to BorderIn.
Clears all four borders in all focused cells. Version without ...F fails if the actual cell is not focused.
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.
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.
Clears one border in the focused range. Version without ...F fails if the actual cell is not focused.
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.
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.
Sets one outer border in the focused range to BorderOut. Version without ...F fails if the actual cell is not focused.
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.
Sets one inner border in the focused range to BorderIn. Version without ...F fails if the actual cell is not focused.
Clears all four borders in all selected cells. Version without ...F fails if the actual cell is not selected.
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.
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.
Clears one border in all selected ranges. Version without ...F fails if the actual cell is not selected.
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.
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.
Sets one outer border in all selected ranges to BorderOut. Version without ...F fails if the actual cell is not selected.
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.
Sets one inner border in all selected ranges to BorderIn. Version without ...F fails if the actual cell is not selected.
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.
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.
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.
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

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.
Html code displayed inside cell after the value. See HtmlPrefix.
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

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. 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, ... First row that will be marked with alternate color. 0 means the first row.
By default it is Alternate - AlternateCount.
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.

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. Alternate CSS class name(s) to be used instead of default alternate class, if the row is odd or Nth. Recolors the whole grid. Call it after change in Alternate settings.

Cell mouse 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. 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. Sets "default" cursor.
By default it is attached to OnMouseOverPanelOff, OnMouseOverHeaderOff, OnMouseOverSpaceOff, OnMouseOverTree, OnMouseOverNoFocus, OnMouseOverReadOnly, OnMouseOverNothing. Sets "pointer" / "hand" cursor.
By default it is attached to OnMouseOverButton, OnMouseOverPanel, OnMouseOverSide, OnMouseOverEditBool, OnMouseOverEditEnum, OnMouseOverEditRadio, OnMouseOverSort, OnMouseOverSortUp, OnMouseOverSortDown, OnMouseOverExpand. Sets "text" cursor. Sets "e-resize" cursor.
By default it is attached to OnMouseOverHeaderLeft, OnMouseOverHeaderRight, OnMouseOverPagerHeaderRight. Sets "nw-resize" cursor. Sets "move" cursor. Sets "Drag.cur" cursor when there is no dragging active.
Otherwise sets a cursor according to dragging action.