TreeGrid XML
Images, colors and texts
TreeGrid v5.9
TreeGrid style sets are predefined in <Styles> tag, in individual <Style> tags.
TreeGrid image files and sizes are predefined in <Img> tag. It can be also included in <Style> tag.
TreeGrid row and cell background state colors are predefined in <Colors> tag. It can be also included in <Style> tag.
TreeGrid language texts are predefined in <Lang> tag.
<Styles>
List of individual styles available for TreeGrid. This list can be displayed on toolbar to let a user to choose style when Toolbar Cells contain cell named Styles.
The <Styles> tag contains individual <Style> tag with the style setting.
There is one <Style Name=’Default’. This style is applied always before every other style when style is applied for first time or is changed.
The whole style tree is
<Styles>
<Style Name=’...’ ... other attributes ...>
<Img ... attributes .../>
<Colors ... attributes .../>
<Cfg ... attributes .../>
</Style>
... next <Style> tags ...
</Styles>
string Style Name of actually selected style (value of Name attribute of <Style> tag).
This value is saved to cookies and therefore is used only first time. To suppress loading it from cookies set <Cfg StyleLap=’1’/>.
From JavaScript API the actual style can be changed by SetStyle method.
bool UsePrefix [0] If set to 1, uses <Style Prefix> also for all included classes in Class, ClassInner and ClassOuter attributes. In this case they must contain only one class name.
<Style>
One style settings. It can be placed only in <Styles> tag.
It can contain tags <Img>, <Colors> and <Cfg>. All attributes in these tags will override the attributes in original tags when the style is selected. But only if the attribute value is not set already!
string Name [“”] Required. Name of the style. By this name is the style selected in <Styles Style> attribute or by SetStyle method.
string Prefix [“”] Prefix for all css class names used by this style, predefined style sheets have these prefixes:
Grid.css “G”, GridLight.css “GL”, GridModern.css “GM”, GridOffice.css “GO”.
On one page there can be more TreeGrids with different style selected – the styles are distinguished by this prefix.
string File [“”] URL to style sheet .css file used for this style. The URL is relative to main TreeGrid script GridE.js.
For backward compatibility – when some TreeGrid style sheet is included directly to HTML page, this URL is relative to the URL of the style sheet.
string Caption [“”] Caption of the style displayed on toolbar when its Cells attribute contains Styles item. If caption is missing, style is never listed on toolbar.
string ToolTip [“”] Tooltip displayed when the style displayed on toolbar when its Cells attribute contains Styles item.
<Img>
Images settings, image files and sizes. Change them only if you want to use another or custom image set. See changing images.
string Style [“G”] Obsolete. Use <Style Prefix>.
string Grid [“Grid.gif”] Image file with all grid icons except toolbar icons. The URL is relative to main TreeGrid script GridE.js.
For backward compatibility – when some TreeGrid style sheet is included directly to HTML page, this URL is relative to the URL of the style sheet.
string GridIE6 [ ] Different file used for IE6, especially for PNG, because of problems with transparency of PNG in IE6.
int Height [17] Height of all icons in grid except toolbar icons, in pixels
int Line [21] Width of all tree straight line icons, in pixels
int Tree [26] Width of all tree ending icons, in pixels
int Panel [13] Width of all left panel icons, in pixels
int Sort [14] Width of all sorting images in header, in pixels
int Filter [17] Width of all filter images, in pixels
int Row [17] Width of all row content images (checkbox, calendar), in pixels
int Enum [13] Width of menu icon in custom Enum Type (EnumType>0)
int MenuLevel [10] Left side padding per menu level in popup menus, enums and defaults
int MenuLevelIcon [11] Width of icon for expanding collapsed group in popup menu
int SpaceHeight [17] Height of all icons in space rows, in pixels
int SpacePanel [13] Width of On/Off icons in Group or Search row, in pixels
int SpaceRow [17] Width of some space row content images (checkbox, defaults), in pixels. The other images have set its width by Row attribute
string Toolbar [“Toolbar.gif”] Image file with all toolbar icons. The URL is relative to main TreeGrid script GridE.js.
For backward compatibility – when some TreeGrid style sheet is included directly to HTML page, this URL is relative to the URL of the style sheet.
string ToolbarIE6 [ ] Different file used for IE6, especially for PNG, because of problems with transparency of PNG in IE6.
int ToolbarHeight [16] Height of all toolbar icons, in pixels
int ToolbarWidth [25] Width of all toolbar icons, in pixels
int GanttStart [4] Width of Gantt starting dependency arrow
int GanttEnd [10] Width of Gantt ending dependency arrow
int GanttMilestone [14] Width of Gantt milestone
int GanttFlag [14] Width of Gantt flag
int GanttResource [6] Average width of character in resource string, used to compute width of resource text to resize Gantt column if needed
string DragOne [“DragOne.cur”] Cursor file. This mouse cursor is displayed when dragging one row or column. The URL is relative to main TreeGrid script GridE.js.
string DragMore [“DragMore.cur”] Cursor file. This mouse cursor is displayed when dragging more rows. The URL is relative to main TreeGrid script GridE.js.
<Colors>
Row and cell background colors settings. These colors are used to show row state.
All values are in format “R,G,B”, R = red (0-255), B = blue(0-255), G = green(0-255)
Remember, the resulted color is sum of absolute color and all relative colors according to row/cell state.
The resulted values R,G,B must be in range (0-255)
See also setting colors for individual cells or rows by attribute Color.
The absolute color is set by “R,G,B”, R = red (0-255), B = blue(0-255), G = green(0-255), example (“245,255,250”)
The absolute color should be enough high, the R,G,B values should be higher then 128.
The relative color is set by “-R,-G,-B”, R = red (0-255), B = blue(0-255), G = green(0-255), example (“-10,0,-5”)
The relative color should enough lowe, the R,G,B values should be lower then 128.
To change default state colors for all grids, you can change them in Defaults.xml file.
Default ["255,255,255"] Base color for all cells. This color can be changed also by cell Color or row Color attribute.
The “255,255,255” color is transparent color, so it displays parent or style color, but only if no state color is computed.
These colors are not modified by any other relative colors. They can be set to empty string to suppress them.
FocusedCell ["90,255,255"] Cell with cursor (on position FRow, FCol)
EditedCell ["255,220,255"] Cell with cursor (on position FRow, FCol) in edit mode (EditMode = 1)
ViewedCell ["255,238,255"] Cell with cursor (on position FRow, FCol) in edit mode (EditMode = 1), for cells with CanEdit = 2
Alternate (relative) row colors
Alternate [“”] Alternate color for odd rows (or rows with order position divisible by AlternateRepeat value)
Using alternate coloring can slow down filtering and sorting because table must be re-colored.
In tree the children always starts from position 0 for coloring.
AlternateRepeat [2] For each row with order position divisible by AlternateRepeat is added Alternate modifier color.
When used paging, set PageLength to number divisible by AlternateRepeat to preserve coloring order.
Relative state colors
For more states used all colors summed together.
Focused ["-25,-25,-25"] Focused row (on position FRow), all cells except FocusedCell.
CannotFocus ["-15,-15,-15"] Row or cell cannot be focused, with CanFocus=’0’
ReadOnly ["-11,-11,-11"] Row or cell cannot be edited, with CanEdit = ‘0’
Preview ["0,0,0"] Row or cell with CanEdit = ‘2’
Hovered ["-5,-5,-10"] Row under mouse cursor (on position ARow) when Hover=’2’. All cells except HoveredCell.
HoveredCell ["-25,-10,0"] Cell under mouse cursor (on position ARow, ACol) when Hover=’2’.
Selected ["0,0,-128"] Selected row, row with Selected = ‘1’.
Detail [“0,-15,0”] Row in master grid that will be expanded to detail grid, in master/detail relationship
DetailSelected [“0,-15,-30”] Row in master grid actually expanded into detail grid, in master/detail relationship
Relative state colors
For more states used only the first color in this order
Error ["0,-150,-150"] Cell with invalid value marked by server, Error=’1’
Deleted ["0,-50,-50"] Deleted row, row with Deleted = ‘1’, only when deleted rows are visible by ShowDeleted=’1’.
Added ["-50,0,-50"] New add row, row with Added = ‘1’
Moved ["-40,-20,-20"] Row moved to another parent, row with Moved = ‘2’
ChangedCell ["-50,-50,0"] Cell with value changed
Changed ["-20,-20,0"] Row with some cell value change, all cells except the changed cells. Row wit Changed = ‘1’
Relative or absolute according to FoundAbsolute attribute
Found1 [“0,-120,0”] Color for the first found cell or row when searching by SearchAction Mark.
Found2 [“0,-60,120”] Color for the second found cell or row when searching by SearchAction Mark.
Found3 [“-120,0,-120”] Color for the third found cell or row when searching by SearchAction Mark.
FoundXX [“”] You can add any other Found attribute with continuous index, Found4, Found5, ...
Coloring of found results always starts by Found1 color. When a user enters or chooses another expression and clicks Mark again, the next color is used.
The color is reset to Found1 after any other search action is applied (i.e. Filter, Clear, ...), or the next Found attribute does not exist.
FoundAbsolute [0] If found colors are applied as absolute colors. If set to 1, the found color overrides all state and default colors.
If set to 1, all found colors must be set as absolute, like [“255,135,255”] for Found1
ChildPage [“0,0,-15”] Automatically created grouping row in tree, if children count of the row exceeds the MaxChildren limit.
MovingColInside [“0,0,255”] Absolute color of line displayed in header to show where the dragged column will be placed. When moving inside section.
MovingColOutside [“255,0,0”] Absolute color of line displayed in header to show where the dragged column will be placed. When moving outside section.
<Lang>
Language settings. All message texts, alerts, menu items and also format settings.
By default is defined in Text.xml file. Look at this file for particular items.
The <Lang> tag has not any attributes, but has these children:
<Text> All HTML texts in grid. Usually message texts, displayed by ShowMessage.
<Alert> All plain texts in grid. Usually message texts, displayed by alert or confirm functions.
<Toolbar> Tooltips (titles) of toolbar buttons.
<MenuCfg> Item texts and values in configuration menu.
<MenuFilter> Items in filter menu in <Filter> row.
<Format> All language settings for formatting date, time and numbers.
Contains predefined formats and item names (like day or month names).
Predefined formats are global for whole page, for all grids on one page.
GMT [0] If date and time values set as number of milliseconds since 1/1/1970 will be shown in GMT instead of local time.
It does not affect input/output dates set as string – when you set and receive dates as strings, do not set this attribute, it can slow down parsing.
Hirji [0] If grid uses and shows Persian Hirji / Jalali dates and calendar, bit array.
1. bit (&1) – 1 – All dates are displayed and entered in Hirji
2. bit (&2) – 2 – All dates in XML are in Hirji. To upload dates in Hirji too, set <Cfg DateStrings=’1’/>
Updates
Added <Img> description
Excluded from file TreeGridDataFormats.htm to TreeGridDataFormatReference.htm
Added <Img> attribute Style
Added new section <Colors>
Added <Colors> attributes Detail and DetailSelected
Excluded from file TreeGridDataFormatReference.htm to TreeGridXmlStyles.htm
Added <Colors> attributes Found and FoundAbsolute
Added <Colors> attribute Preview
Added <Lang> section
Added info: Fixed state colors can be set to empty string.
Added <Img> attributes SpaceRow, SpaceHeight, SpacePanel
Added tags <Styles> and <Style>
Added <Colors> attributes MovingColInside and MovingColOutside
Added <Format GMT> attribute
Added <Img> attributes GridIE6 and ToolbarIE6
Added <Img> attribute Enum
Added <Img> GanttStart, GanttEnd, GanttMilestone attributes
Added <Img> attributes GanttFlag and GanttResource
Added <Img> attribute MenuLevel and MenuLevelIcon