EJS TreeGrid documentation
CSS styles
There are six files in separate directories: Standard, Light, Office, Modern, Borders and Robust. All styles are complete with all CSS settings and images.
More or even all styles can be used in one HTML page for different grids. Every style has its own class prefix to let grid to use appropriate style.
Prefixes: Standard: GS, Light: GL, Office: GO, Modern: GM, Border: GB, Robust: GR. The style prefix or style name used in grid is set by <Cfg Style/> attribute, default is modern style: <Cfg Style=’Modern’/>.
When set the Style attribute, TreeGrid automatically downloads appropriate Grids.css style for given style. If the Grid.css style is placed in another location than in /Grid/style/, its url can be set by <Cfg CSS/> attribute.
All images in TreeGrid are referenced from the Grid.css style sheet and can be easily replaced by another icon set. All the four styles have the same icons placed in the same files on the same positions, so the images can be easily copied and used in another style.
The Grid.css contains all TreeGrid style settings, many of them are required for functionality and must not be changed.
Every cell can have specified individual class and background color in XML or dynamically by events. In the XML you can specify custom class for cell as row or cell Class attribute, background color as row or cell attribute Color.
Dynamically can be the class returned by OnGetClass API event and background color by OnGetDefaultColor and OnGetColor API events.
The custom class (set by
Class,OnGetClass) is added to all standard classes assigned to the cell. The
class is assigned to <TD> tag, so it ignores margin
setting.
Style sheet (Grid.css)
To easily find out where which class is used, show some TreeGrid and view it with Firebug or similar tool.
Listed are only classes that can be changed! Change only properties explicitly listed!
! Don’t set margin, border or padding to strings (like “medium”), use always value in pixels (like “1px”).
Main table
MainTable Main TreeGrid table, contains the grid
sections, <TABLE> tag. Can be set margin, border. Must not
be set padding.
Top The tag rendered above the MainTable. It is rendered only when there exist some of the Top0 – Top9. Set background.
Top0 – Top9 The tags rendered into the Top tag. Only tags with height attribute set are rendered. Set height, border, margin, padding and background.
By appropriate combinations of settings you can show rounded corners or something similar above the grid. See Light style for round corners.
Bottom The tag rendered below the MainTable. It is rendered only when there exist some of the Bottom0 – Bottom9. Set background.
Bottom0 – Bottom9 The tags rendered into the Bottom tag. Only tags with height attribute set are rendered. Set height, border, margin, padding and background.
By appropriate combinations of settings you can show rounded corners or something similar below the grid. See Light style for round corners.
Here you can control section border and spaces between grid sections, change border, padding and margin. Set them with relation to Space rows settings. <DIV> tag.
! Sections on vertical direction (...Left, ...Mid, ...Right) must have the same width (border+padding+margin)
! Sections on horizontal direction (Head..., Body..., Foot) must have the same height (border+padding+margin)
HeadLeft Fixed head rows, left fixed columns
HeadMid Fixed head rows, variable columns
HeadRight Fixed head rows, right fixed columns
BodyLeft Variable rows, left fixed columns
BodyMid Variable rows, variable columns
BodyRight Variable rows, right fixed columns
FootLeft Fixed foot rows, left fixed columns
FootMid Fixed foot rows, variable columns
FootRight Fixed foot rows, right fixed columns
VScroll Vertical scrollbar, you can set also its background and in IE scrollbar specific attributes
HScroll Horizontal scrollbar, you can set also its background and in IE scrollbar specific attributes
XScroll Right bottom space between scrollbars, here you can set its background
Here you can set border, padding, margin and background of special solid rows. Set them with relation to Sections settings. <DIV> tag.
Every solid space row is individual section and is set independently.
The class is assigned according to the row Kind attribute, you can assign any custom Kind name to your space rows and create appropriate ...Row CSS class.
SpaceRow Base space row with no special kind (Kind=”Space”)
GroupRow Space group row (Kind=”Group”)
SearchRow Space search row (Kind=”Search”)
ToolbarRow Space toolbar row (Kind=”Toolbar”)
TabberRow Space tabber row (Kind=”Tabber”)
PagerRow Space pager row (Kind=”Pager”), for backward compatibility, it is replaced by cell Type=”Pages”.
FillRow Automatically generated empty space row when set <Cfg ConstHeight=’1’/>. To fill the rest of empty space in grid to preserve constant height.
RowAbove Space row positioned above grid (Space = -1)
RowBelow Space row positioned below grid (Space = 5)
Row heights
SpaceRowHeight Set only height attribute. Here you can set minimal height of all space rows that have no Height attribute set.
Without row padding, margin and border. The resulted minimal height is at least as high as the highest cell content in the row.
This class is not assigned to HTML, just read by script.
RowHeight Set only height attribute. Here you can set minimal height of all standard rows (including header), that have no Height attribute set.
The resulted minimal height is at least as high as the highest cell content in the row.
This class is not assigned to HTML, just read by script.
Pages
Page Every body page except the first when showing all pages, you can set its border-top, border-bottom, padding-top, padding-bottom or background.
PageFirst The first body page when showing all pages, you can set its border-top, border-bottom, padding-top, padding-bottom or background.
PageOne A body page if only one page is shown or paging is not used, you can set its border-top, border-bottom, padding-top, padding-bottom or background.
ChildPage Area with all children of row, you can set its border-top, border-bottom, padding-top, padding-bottom, margin-top, margin-bottom or background.
ChildPart Area with one child part, when children of rows are divided to parts, you can set its border-top, border-bottom, padding-top, padding-bottom, margin-top, margin-bottom or background
Here you can control
individual cells, their border, padding and background. It
is set for <TD> tag, so you cannot set margin.
Here can be also set font and other text attributes like text-align, white-space, etc.
The background color of standard cells is computed from Cell colors classes according to cell state, so setting background here may not have effect and setting it as !important will disable the state colors.
CellHeaderPanel Header left panel
CellFilterPanel Filter left panel
CellPanel Any other cell panel except Space, Filter and Header
CellHeader Standard Header cell except the panel
CellFilter Standard Filter cell except panel
Cell Standard cell except Header, Filter, Panel and Space
CellUser User HTML section displayed when set Sec.Html attribute.
CellEmpty Cell displayed for ConstWidth column (fills the empty grid space right side, when set <Cfg ConstWidth=’1’/>
CellHeaderEmpty Cell displayed for Header of ConstWidth column (fills the empty grid space right side, when set <Cfg ConstWidth=’1’/>
CellSpacePanel Panel Type Space cell
CellSpaceButton Button Type Space cell
CellSpaceButtonButton Button Type Space cell with Button=”Button”
CellSpaceBool Bool Type Space cell
CellSpaceSelect Space cell with right side Default Button or space cell Type Select
CellSpaceEditButton Editable Space cell with right side Button, except Defaults
CellSpaceEditIcon Editable Space cell with left side Icon, like Enum, but without right side Button.
CellSpaceEdit Editable Space cell, without any Icon or Button.
CellSpace Any other Space cell
CellSpaceAbove Added to cell in space row positioned above grid (Space = -1)
CellSpaceBelow Added to cell in space row positioned below grid (Space = 5)
CellHidden Completely hidden cell, including horizontal border, used for RowSpan
HeaderFocus Class is added to CellHeader when the cell is being dragged to mark which cell is dragged.
HeaderDrag Header cell as object under mouse cursor when dragged, used with HeaderText.
HeaderGroup Column name displayed in DropCols cell, in Group row. You can set here also font and other text settings.
HeaderGroupFocus Class is added to HeaderGroup when the cell is being dragged to new position inside the row.
HeaderGroupDelete Class is added to HeaderGroup when the cell is being dragged outside the row to remove it.
HeaderGroupCustom DropCols custom part without column names, in Group row. You can set here also font and other text settings.
Tree Class added to tree cell (to Cell class) when the tree image is displayed by more parts by inner <div> tag.
It should be used only for correction of difference between displaying tree image directly in <TD> tag and in inner <DIV> tag.
The tree image is displayed by more parts when the full icon does not exist for it or always in IE6.
NoTreeLines1 Class added to tree cell instead of Tree class when set <Cfg NoTreeLines=’1’/>
NoTreeLines2 Class added to tree cell instead of Tree class set <Cfg NoTreeLines=’2’/>
Panel Class added to fast panel image class in the inner <DIV> panel, only in IE6. Use only for corrections.
Text, Lines, Int, Float, Date, Enum, Bool, Html, Pass, Link, Img, Radio, List, DropCols, Abs, Pages, Gantt Cell settings according to its Type.
It is added to the Cell… class, so both the classes are used. Remember, when one setting is defined in both classes, only the setting defined later is used.
The Cell classes should set border or padding and Type classes should set font and other text settings or also padding.
HeaderText Class used for Header cell instead of Type class.
RadioText Class used for Radio type instead of Radio class when printing or displaying <input> tags instead of icons.
RadioInput Class used for Radio type <input> tag when the type shows them instead of icons.
PagerEdit Class used in Pager Type cell, for edit box to enter page number, internal cell Type is PagerEdit.
Hidden Class used for hidden cells (cell attribute Visible=’0’) instead of Type class.
HiddenSpace Class used for hidden cells (cell attribute Visible=’0’) instead of Type class in Space row.
User User HTML section displayed when set Sec.Html attribute. Used with CellUser class.
RightButton Class used for <BUTTON> tag for right side custom button (cell Button=’Button’). You can set any attribute here.
RightHtml Class added to Cell class for right side custom HTML button (cell Button=’Html’). Remember, with of the right section is set by <C WidthPad/>
RightImg Class used for <IMG> tag for right side custom image (cell Button=’Img’). You can set any attribute here.
MergedCellH A merged cell (Merge=’...’), <TD> tag in the inner table inside the original cell. Used with Type class. When merged cell horizontally
MergedCellV A merged cell (Merge=’...’), <TD> tag in the inner table inside the original cell. Used with Type class. When merged cell vertically
PagesLink One link in Pages Type. The Pages type cell shows all pages as number links. It can have horizontal scrollbar when there are too many pages.
PagesLinkActive The actual page link in Pages Type.
Gantt cell
Gantt Type cell shows Gantt chart computed from other cells in the row.
All the CSS classes have its own prefix “Gantt”. There is also defined another custom set with “GanttG” prefix to use when set <C GanttClass=’GanttG’/>.
You can define also your own custom set with some prefix and set this prefix to <C GanttClass/>. There are always used both styles, base Gantt and the custom one. So the custom prefix classes should be defined after the base Gantt classes to take it effect. The custom class prefix is not applied to dependencies and header.
The individual layouts are placed over themselves in this order: Background, Main bar or Milestone, Real flow, Mark, Dependencies, Resources, Flags
Gantt Cell class for the Gantt Type chart cell, set like other Type class for <TD> tag. You can set background, border and padding.
Gantt0Out Outer tag of not yet started task, set margin-top to move the bar vertically, border, padding and background.
Gantt0In Inner tag of not yet started task, set height to control the height of whole main bar and background.
You can set also border and padding, but remember to difference in height for strict and quirks mode in IE.
Gantt10Out, Gantt10In Not yet completed part of incomplete task, see Gantt0Out and Gantt0In.
Gantt90Out, Gantt90In Already completed part of incomplete task, see Gantt0Out and Gantt0In.
Gantt100Out, Gantt100In Fully completed task, see Gantt0Out and Gantt0In.
GanttNullOut, GanttNullIn Task with unknown completion state, usually grouped row, see Gantt0Out and Gantt0In.
GanttHoverOut Outer tag of highlighted task under mouse cursor, class added to default outer class,
The height of the tag should not be changed => the border width + padding must be still the same as in original outer class.
GanttFlowOut Outer tag for Flow bar, set margin-top to move the bar vertically, border, padding and background.
GanttFlowIn Inner tag for Flow bar, set height to control the height of whole main bar and background.
You can set also border and padding, but remember to difference in height for strict and quirks mode in IE.
GanttFlowHover Outer tag of highlighted Flow bar under mouse cursor, class added to GanttFlowOut class,
The height of the tag should not be changed => the border width + padding must be still the same as in GanttFlowOut.
GanttMilestone Icon for Milestone, set background, height and width.
GanttMilestoneHover Icon for Milestone under mouse cursor, added to GanttMilestone class, set background.
GanttFlag Icon for Flag, set background, height and width.
GanttFlagHover Icon for Flag under mouse cursor, added to GanttFlag class, set background.
GanttMark Class for Mark line. Set only background to specify the color of the line.
GanttResource Class for Resource text. Set margin-top to move the text vertically, border, padding, background, font and other text attributes.
GanttResourceChar Average width of one character in Resource text, to let Gantt column resize to show it complete. Set only width.
GanttDep Parent tag for dependencies
GanttDepVert Vertical line
GanttDepVertTop Vertical top half line
GanttDepVertTop2 Vertical top half line, used to connection to top horizontal line
GanttDepVertBottom Vertical bottom half line
GanttDepVertBottom2 Vertical bottom half line, used to connection to bottom horizontal line
GanttDepVertBottom3 Vertical bottom half line, used to connection to bottom horizontal line
GanttDepHorzIn Inner part of middle horizontal line
GanttDepHorzInLag Inner part of middle horizontal line of lag
GanttDepHorzTop Inner part of top horizontal line
GanttDepHorzBottom Inner part of bottom horizontal line
GanttDepHorzOut Outer part of all horizontal lines
GanttDepErr Modification of all dependency lines colors for incorrect dependencies
GanttDepLagErr Modification of dependency lag color for incorrect dependencies
GanttDepIcon Parent for arrow icon
GanttDepArrowLeft, GanttDepArrowRight, Icons of left / right arrows in dependency lines.
GanttDepArrowErrLeft, GanttDepArrowErrRight Icons of left / right arrows in incorrect dependency lines.
GanttDepStart, GanttDepEnd The width of start and end part of the arrow, set only width.
GanttBack1, GanttBack2, GanttBack3, GanttBack4, GanttBack5 Five backgrounds used for individual backgrounds in <C GanttBackground/>. Set only background.
GanttHeader Gantt header in Header row, inner <DIV> containing all Gantt header lines.
You can set margin-top, margin-left to move the header and background.
GanttHeaderTable Individual
Gantt header lines, <TABLE> tag. Set background and border.
Don’t set padding.
GanttHeader1, GanttHeader2, GanttHeader3, GanttHeader4, GanttHeader5 Five tags used for individual headers set by <C GanttHeader1 – GanttHeader5/>
You can set all attributes. <DIV> tag.
Tree lines and icons images
Here you should change only background-image, background-position and padding-left as image width.
The tree images are composed from predefined parts: 0, 1, T, TL, C, CL, E, EL.
0 – no vertical line, 1 – vertical line, T – end no icon, TL – end no icon, last row, C – collapse icon, CL – collapse icon, last row, E – expand icon, EL – expand icon last row.
To reduce count of tags displaying the tree and speed up the grid, there are many common combinations predefined as one image (e.g. 000T is 3 empty tiles and ending icon).
When there exists predefined combination for whole tree icon, it is rendered directly into <TD> tag otherwise there are rendered more <U> tags to compose the tree icon.
The classes for <U> tag are defined separately and must have set padding-left as width of the tree icon part.
000, 010, 001, 011, 100, 110, 101, 111 All combinations of three line tiles images
000T, 010T, 001T, 011T, 100T, 110T, 101T, 111T All combinations of three line tiles with ending icon images
00, 01, 10, 11 All combinations of two line tiles images
00T, 01T, 10T, 11T All combinations of two line tiles with ending icon images
0T, 1T, 0TL, 1TL, 0C, 1C, 0CL, 1CL, 0E, 1E, 0EL, 1EL All combinations of one line tile and all ending icons images
0, 1, T, TL, C, CL, E, EL All tree one tile images
D0, D1, D2, D3 Dragging images, shows where the dragged row will be dropped (0 – nowhere, 1 above, 2 into children, 2 below)
D0L, D1L, D2L, D3L Dragging images for last row (with no continuing vertical line)
Tree icons without lines images
Here you should change only background-image, background-position and padding-left as image width.
When set <Cfg NoTreeLines/>, grid does not display the tree lines, only expand/collapse and dragging icons. It can slightly reduce rendering speed of huge trees.
The expand and collapse icons are placed directly to the <TD> tag except in IE6. The dragging icons and in IE6 are placed to <U> tag to specify its height.
NC, NE Collapse and expand images
ND0, ND1, ND2, ND3 Dragging images, shows where the dragged row will be dropped (0 – nowhere, 1 above, 2 into children, 2 below)
Panel images
Here you should change only background-image, background-position and padding-left as image width.
Icons displayed on panel. There is one icon for enabled button and one for disabled (inactive). Only the select button has third icon for selected.
The classes have the same names as Panel buttons specified by the Panel cell value, you can easily define custom class here and assign its name to Panel value. Remember the Panel prefix (e.g. .GMPanel) must be added to such class.
These images used when the Panel Type cell has set its value (as the list of buttons) or is set <Cfg FastPanel=’0’/>
PanelImage Class added to <U> cell for custom panel buttons displaying custom icon as background (e.g. <I Panel=’Custom’ Custom=’CustomIcon.gif’/>)
PanelMove, PanelMoveOff The first icon for dragging row
PanelSelect, PanelSelectOn, PanelSelectOff The second icon for selecting rows, it has special state PanelSelectOn for selected rows (Selected=’1’)
PanelDelete, PanelDeleteOff The third icon for deleting / undeleting rows
PanelCopy, PanelCopyOff The fourth icon for copying / add rows
Fast panel images
Here you should change only background-image, background-position and padding-left as image width.
When set <Cfg FastPanel=’1’/> (default) and the panel contains only standard buttons (Move, Select, Delete, Copy), so the panel buttons are displayed only according to global settings in <Cfg> and <Panel> it displays fast panel.
The fast panel is the only image with all buttons and is rendered directly into <TD> tag. The only advantage of the fast panel is rendering speed and reducing count of tags.
The fast panel contains all possible combinations of the four buttons, for every combination is shows one class.
Every panel class consist from P and four characters for the four buttons: PMSDC (M – Move, S - Select, D – Delete, C – Copy), e.g. P12x0.
The button character can be 0 – disabled, 1 – enabled, 2 – on (only Select), x – not displayed. There are set all 3*4*3*3 = 108 combinations.
The PSpace1 – 4 classes are added to Space row panel according to the size (count of buttons 1-4) of standard row panel. In IE6 it is added to <U> tag.
Button type
The icons and buttons for Button Type cell and the default icons shown on Toolbar.
TabHtml Class added to Cell class for Button Type cell for Button=”Tab”.
Here you can set border, padding, background, font and other text attributes.
TabHtml1 Class replaced TabHtml when the Button Type cell value is 1 (=> checked).
TabSep Tab separator tag automatically added right side to Button type cell with Button=”Tab”.
TabSepRight, TabSepLeft It replaces TabSep when the next or previous cell has not Button=”Tab”.
TabSepFirst, TabSepLast Class added to Cell class for Button Type cell for Button=”TabSep”.
ToolHtml Class added to Cell class for Button Type cell for Button=”Html”.
Here you can set border, padding, background, font and other text attributes. Used by default for Style change buttons on Toolbar.
ToolHtml1 Class replaced ToolHtml when the Button Type cell value is 1 (=> checked).
ToolButton Class added to Cell class for Button Type cell for Button=”Button”.
Here you can set border, padding and background attributes. Used by default for Search action buttons.
ToolButtonButton Class for <BUTTON> tag for Button Type cell for Button=”Button”.
Here you can set all attributes.
ToolButtonButton1 Class replaced ToolButtonButton when the Button Type cell value is 1 (=> checked).
ToolSpaceButton Used instead of class ToolButtonButton for Space rows
ToolSpaceButton1 Used instead of class ToolButtonButton1 for Space rows
IconHtml Class added to Button type cell if it contains Icon attribute.
ToolHeader Displayed inside cell when Button type cell shows its menu defined by List attribute.
ToolMenuHeader Displayed outside cell when Button type cell shows its menu defined by List attribute.
ToolMenuItem One menu item in menu shown by Button type cell defined by List attribute
ToolMenuOuter Whole menu tag shown by Button type cell defined by List attribute
ToolMenuBody Inner menu tag shown by Button type cell defined by List attribute
Special Toolbar buttons
ToolSave, ToolReload, ToolRepaint, ToolAdd, ToolAddChild, ToolSort1, ToolSort, ToolCalc1, ToolCalc,
ToolExpandAll, ToolCollapseAll, ToolColumns, ToolCfg, ToolHelp, ToolResize, ToolPrint, ToolExport, ToolDebug
The standard Toolbar button images. The Button Type cell will show them just when the cell has the name (e.g. <I Cells=“Save” SaveType=”Button”/>)
When the button supports two states (Calc, Sort), the class without prefix is for off and with 1 prefix is on.
Here you can set background-image and background-position, but also background-color, border and padding.
ToolPagerFirst, ToolPagerFirst1, ToolPagerPrev, ToolPagerPrev1, ToolPagerNext, ToolPagerNext1, ToolPagerLast, ToolPagerLast1
The pager buttons for cell Type Pager. The cell Type Pager is automatically converted to the Button Type cells with appropriate settings and icons.
The class without prefix is for disabled button and with 1 prefix is for enabled button.
Here you can set background-image and background-position, but also background-color, border and padding.
ResizeGrid The special bottom right icon for resizing grid main tag, set background, border, padding and display.
Cell images
Here you should change only background-image, background-position and padding-left as image width.
The cell images are included directly to <TD> cell tag as background images. Only the Right side images can be placed in separated <TD> tag next to the cell.
In IE6 when placed to the next right tag are placed into inner <U> tag, so for the <U> tag should be set padding-left as icon width.
IconLeft, IconRight, IconCenter Custom icon displayed on the left or on the right cell side, set by Icon attribute.
DateLeft, DefaultsLeft, EnumLeft Calendar, Defaults and Enum buttons displayed on the left side inside cell as left aligned background.
For Enum is it the default setting.
DateRight, DefaultsRight, EnumRight Calendar, Default and Enum buttons displayed on the right side.
It can be displayed as background in the next right <TD> tag or inside cell as right aligned background.
When displayed inside cell, the cell text will be written through the button icon when the cell is overflowed.
When displayed in next <TD> tag, it will always have width set by the <C WidthPad/>, globally for the whole column.
DefaultsSpaceLeft, DefaultsSpaceRight Different button Defaults displayed in Space row
Radio0Left Unchecked Radio button displayed on the left side of the caption
Radio0Right Unchecked Radio button displayed on the right side of the caption
Radio1Left, Radio1Right Checked Radio button displayed on the left or right.
Radio2Left, Radio2Right Unchecked Radio button displayed on the left or right. A different icon, by default checkbox instead of radio
Radio3Left, Radio3Right Checked Radio button checkbox displayed on the left or right.
Bool0, Bool1 Checkbox image for Bool Type cell
Bool0RO, Bool1RO Disabled checkbox image for read only Bool Type cell
Bool0Space, Bool1Space, Bool0SpaceRO, Bool1SpaceRO Different checkbox image displayed in Space row.
BoolChar0, BoolChar1, BoolChar2, BoolChar0RO, BoolChar1RO, BoolChar2RO Bool Type cell as text (BoolIcon=’6’).
BoolCharIE Added to Bool Type cell as text (BoolIcon=’6’) in quirks mode in IE.
Filter0, Filter1 Filter
panel image – checkbox to switch on/off the filtering. Filter is standard
row not Space row!
Group0, Group1 Group panel image - checkbox to switch on/off the grouping
Search0, Search1 Search panel image - checkbox to switch on/off the searching
Filter images
Here you should change only background-image, background-position and padding-left as image width.
Filter0Left – Filter12Left Filter cell operator images displayed on the left side inside cell as left aligned background
0 – Off, 1 – Equal, 2 - Not equal, 3 - Less than, 4 - Less than or equal, 5 - Greater than, 6 - Greater than or equal,
7 – Begins with, 8 – Does not begin with, 9 - Ends with, 10 – Does not end with, 11 – Contains, 12 – Does not contain
Filter0Right – Filter12Right Alternate images to display the filter operator icon on the right side, inside or outside the Filter cell
Filter0Menu – Filter12Menu The filter operator images displayed in popup filter menu
FilterMenuHeader The popup filter menu caption. It contains the actually selected filter icon, as inner tag.
Here you can set border, margin, padding and background.
Sort images
Here you should change only background-image, background-position and padding-left as image width.
Sort0Right – Sort6Right Sorting images displayed in header on right side, inside or outside the header cell
0 – off, 1 – first asc, 2 – second asc, 3 – third asc, 4 – first desc, 5 – second desc, 6 – third desc
Sort0Left – Sort6Left Alternate images to display the sorting icons on the left side inside cell as left aligned background.
Right side pager
PagerMain Main pager tag, it is related to Sections settings, <DIV> tag. Set border, padding, margin and background.
PagerHeader Pager header tag, <DIV> tag. Set border, padding, margin and background.
PagerCaption Pager caption tag, <DIV> tag. Set font and other text attributes and also border, padding, margin and background.
PagerBody Pager body tag with pages, without header, <DIV> tag, shows scrollbars if required. Set border, padding, margin and background.
PagerItem One pager page,<DIV> tag. Set height and font and other text attributes and also border, padding, margin and background.
PagerHover Highlight page under mouse cursor, done by absolute tag with opacity. Set border, background and opacity.
PagerFocus Pager cursor marks currently displayed pages, it can mark more, even incomplete, pages or only one, even incomplete page.
Done by absolute tag with opacity , you can set here border, background and opacity.
PagerSort1, PagerSort2, PagerSort3 Item names are marked according to sorted columns, 1 is most important, 3 least,
The complete page is placed to <B> tag, the incomplete to <SPAN> tag.
PagerSortS Item name separator, | and => , <SPAN> tag.
The Color... classes set a background color for particular state. Can have set only background-color.
Every cell or row can be in more states at one time and the resulted background color is computed from all the state colors by summing their differences from #FFFFFF.
The Class... classes set other CSS attribute for particular state. Can have set border, font and color.
It is defined since version 6.3, in v6.0 – v6.2 were these CSS attributes defined in Color... classes instead.
It can be used only for some states or / and if it is permitted by appropriate XML attribute for the state.
Coloring classes can slow down the grid, because the rows must be refreshed and not just recolored to take effect of the settings.
The colors except FocusedCell... and HoveredCell... are not used for Space, Header, Panel and Button.
ColorDefault Base color for all cells.
ColorNoFocus, ClassNoFocus Not focusable cell (CanFocus=’0’).
ColorReadOnly, ClassReadOnly Read only cell (CanEdit=’0’).
ColorPreview, ClassPreview Preview cell (CanEdit=’2’).
ColorAlternate, ClassAlternate Alternate color replaced ColorDefault for odd (or next) rows when set <Cfg Alternate/>.
ColorSelected, ClassSelected Selected row (Selected=’1’) or selected cell (cell Selected=’1’ and row Selected=’2’).
To use ClassSelected for individual selected cells (not rows) you must set <Cfg SelectClass=’1’/>.
ColorError, ClassError Invalid cell (Error=’...’).
ColorAdded, ClassAdded Added row (Added=’1’).
ColorDeleted, ClassDeleted Deleted row (Deleted=’1’).
ColorMoved1, ClassMoved1 Moved row inside its parent (Moved=’1’).
ColorMoved2, ClassMoved2 Moved row to another parent (Moved=’2’).
ColorChanged, ClassChanged Changed row (Changed=’1’).
ColorChangedCell, ClassChangedCell Changed cell (Changed=’1’).
ColorMaxChildren, ClassMaxChildren Automatically created child rows when children count reaches row’s MaxChildren.
ColorDetail, ClassDetail Master row with children that can be displayed in detail grid.
ColorDetailSelected, ClassDetailSelected Master row that’s children are actually displayed in detail gird.
ColorFound1, ClassFound1 Marked found cells by cell Mark action. The ClassFound is used only if set <Cfg SearchClass=’1’/>.
ColorFound2, ClassFound2 The next found cell when called search with new Mark action and another search expression.
ColorFound3, ClassFound3 The next found cell when called search with new Mark action and another search expression.
ColorHovered Color when hovered any row. Only when set HoverRow=’Color’.
ColorHoveredCell, ClassHoveredCell Color of editable cell when hovered.
The ColorHoveredCell is used only if set HoverCell=’Color’, the ClassHoveredCell is used only if set HoverCell=’Class’
ColorHoveredCellReadOnly, Class... Color of read-only (CanEdit=’0’) cell when hovered, similar to ColorHoveredCell.
ColorHoveredCellNoFocus, Class... Color of not focusable (CanFocus=’0’) cell when hovered, similar to ColorHoveredCell.
ColorHoveredCellHeader, Class... Color of header cell when hovered, similar to ColorHoveredCell.
ColorHoveredCellPanel, Class... Color of Panel Type cell when standard (no fast) panel is used. Similar to ColorHoveredCell.
Standard panel is rendered into inner div, so there is no interference between background-color and panel image.
ColorHoveredCellFastPanel, Class... Color of Panel Type cell when fast panel (FastPanel=’1’) is used. Similar to ColorHoveredCell.
Fast panel is rendered directly into the TD tag, so there can be interference between background-color and panel image.
ColorHoveredCellSpace, Class... Color of not editable Space cell. Similar to ColorHoveredCell.
ColorHoveredCellSpaceEdit, Class... Color of editable Space cell. Similar to ColorHoveredCell.
ColorHoveredCellSpaceBool, Class... Color of Space cell type Button. Similar to ColorHoveredCell.
ColorHoveredCellButton, Class... Color of Button Type cell. Similar to ColorHoveredCell.
ColorHoveredCellButton1, Class ... Color of Button Type cell switched on (value = 1). Similar to ColorHoveredCell.
ColorHoveredCellTab, Class... Color of Button Type cell with Button=”Tab”. Similar to ColorHoveredCell.
ColorHoveredCellTab1, Class... Color of Button Type cell with Button=”Tab” switched on (value = 1). Similar to ColorHoveredCell.
ColorFocused, ClassFocused Color of focused row (grid.FRow).
The ColorFocused is used only if set FocusRow=’Color’, the ClassFocused is used only if set FocusRow=’Class’
ColorFocusedCell, ClassFocusedCell Absolute color of focused cell (grid.FRow, grid.FCol).
The ColorFocusedCell color is set directly as background-color without any computing with others.
The ColorFocusedCell is used only if set FocusRow=’Color’, the ClassFocusedCell is used only if set FocusRow=’Class’
ColorFocusedCellSpace, ClassFocusedCellSpace Absolute color of focused Space cell (grid.FRow, grid.FCol). Similar to ColorFocusedCell.
ColorEditedCell Absolute color of focused cell being edited. This color is set directly as background-color without any computing with others.
Set only background-color. All other attributes can be set by EditInput and EditTextarea classes.
ColorViewedCell Absolute color of focused cell being viewed – read only edit mode, similar to ColorEditedCell.
Cursors
The cursors are absolutely positioned tags above the grid to mark the cursor cell and row.
HoverPanelBackground Background of hovered row above the row left (left only) panel. You can set background and opacity.
HoverRowBackground Background of hovered row except the row left (left only) panel. You can set background and opacity.
HoverRowBorder Border around of hovered row. You can set z-index, border, padding and background. The background and padding is inner border.
HoverCellBorder Border around of hovered cell. You can set z-index, border, padding and background. The background and padding is inner border.
FocusPanelBackground Background of focused row above the row left (left only) panel. You can set background and opacity.
FocusRowBackground Background of focused row except the row left (left only) panel. You can set background and opacity.
FocusRowBorder Border around of focused row. You can set z-index, border, padding and background. The background and padding is inner border.
FocusCellBorder Border around of focused cell. You can set z-index, border, padding and background. The background and padding is inner border.
FocusCellSpaceBorder Border around of focused Space cell. You can set z-index, border, padding and background. The background and padding is inner border.
EditCellBorder Border around of edited cell. You can set z-index, border, padding and background. The background and padding is inner border.
EditCellSpaceBorder Border around of edited Space cell. You can set z-index, border, padding and background. The background and padding is inner border.
EditCellInput Tag above the editable part of the cell, excluding side button and tree image. Set border, padding or background.
Inside it is displayed the <INPUT> or <TEXTAREA> tag, see EditInput and EditTextarea classes.
Dragging
MouseObject Absolute tag displayed under mouse when dragging. It contains the dragged content. You can set border, padding and opacity.
DragObject Absolute tag displayed under mouse when dragging rows and is set <Cfg DragObject=’2’/>
DragColInsideTop, DragColInsideBottom, DragColOutsideTop, DragColOutsideBottom The icons marking new position of dragging columns
The Inside is inside the section, the Outside is to another section. You can set background, width, height.
Messages
Message The status message shown on longer actions in grid. Absolutely positioned, centered into the grid, modal.
Set background, border, padding, font and other text attributes.
MessageShadow The shadow box placed under the Message, just shadow visual effect.
Set margin-top, margin-left to specify how much is the shadow moved relative to the message. Set background and opacity.
PageMessage The message shown inside page or child pages when they are loading or rendering.
It is centered inside page, but can be shown more times when the page is higher than grid.
Set background, border, padding, font and other text attributes.
GridMessage No grid (GM,GS,...) prefix here! Used for initial message when the prefix is not known yet. Centered inside main tag.
Set background, border, padding, font and other text attributes.
GridErrorMessage No grid (GM,GS,...) prefix here! Used for critical error message when grid cannot render. Centered inside main tag.
Set background, border, padding, font and other text attributes.
Debug
... Not finished yet ...
Menus (Lib)
... Not finished yet ...
Grid configuration menus
... Not finished yet ...
Calendar (Lib)
... Not finished yet ...
Hint / Tip
... Not finished yet ...