Changing style sheets and images
TreeGrid v4.3
All TreeGrid style definitions are in one .css file, by default in Grid.css. You have to include the style sheet into HTML header.
To change TreeGrid styles is better to update existing .css files than to create new one, because there are many restrictions to preserve grid layout compact.
You can change individual styles in the .css file, but you must preserve all style names. You can also add new styles to use them in TreeGrid event OnGetClass.
To change CSS style for individual cell you can use its XML attributes ClassInner, ClassOuter and ClassEdit. Dynamically you can change CSS class in API event OnGetClass.
In Grid.css all style names starts with letter “G”. This is default prefix. To use more style sheets you need to use another prefix in other sheets and set it in input XML data to <Img Style=’G’/> attribute. In predefined style sheets are these prefixes: GridBigger “GB”, GridLight “GL”, GridGame “GG”.
By CSS styles you can define all visual properties except background color for cells. For setting cell/row background color use tag <Colors> in input XML. Or use cell or row attribute Color.
All TreeGrid images are in two files, one with all row images and one with toolbar images. By default these files are Grid.gif and Toolbar.gif.
You can change these files, but you must preserve image position and order. If you change sizes of images, you must update settings in XML input data, tag <Img>.
There also two cursor files for dragging. DragOne.cur and DragMore.cur. These files are not required.
Don't use margin properties
Don't change extent properties (border, width, height) at runtime (in events)
If you want to suppress some border, set it to 0, don't clear it
Don't use padding properties
Sections on vertical must have the same width
Sections on horizontal must have the same height
.GHeadLeft Header + fixed head rows, row panels + left fixed columns
.GHeadMid Header + fixed head rows, variable columns
.GHeadRight Header + fixed head rows, right fixed columns
.GBodyLeft Variable rows, row panels + left fixed columns
.GBodyMid Variable rows, variable columns
.GBodyRight Variable rows, right fixed columns
.GFootLeft Fixed foot rows, row panels + left fixed columns
.GFootMid Fixed foot rows, variable columns
.GFootRight Fixed foot rows, right fixed columns
Don't use padding properties
All cells must have the same border width and padding
.GHeader Header cell, contains column captions
.GHeaderHover Header cell under mouse cursor
.GHeaderHoverMulti Multi-line header cell under mouse cursor
.GHeaderFocus Header cell when moving
.GPanelTop Top row panel left to header
.GPanelTopHover Top row panel under cursor
.GPanel Row panel on the left
.GPanelHover Row panel under cursor
.GCell All edited row cells
.GCellNE All non edited row cells
.GRightButton The button in cell on right side
.GFilterButton The button in filter row to change operator and in menu
.GTreeIcon Any icon (line, expand/collapse button) displayed in tree
All cell contents must have the same border width and margin on vertical
.GHeadText Column caption
.GHeadSort Sort icon
.GText Text cell (Text, Pass, Enum), not edited
.GLines Text cell on more lines (Lines)
.GNumber Number cell (Int, Float, Date), non edited
.GTextB, .GNumberB Highlighted cells, not used in grid, for custom events only
.GTextM, .GNumberM More highlighted cells, not used in grid, for custom events only
.GIText Edited text cell, with <INPUT type='text'>
.GINumber Edited number cell, with <INPUT type='text'>
.GTextArea Edited or nonedited cell with more rows (tag <TEXTAREA>)
.GSelect Edited enum cell, with <SELECT>
.GButton Button right to the cell value
.GButtonImg Image button right to the cell value
.GHtml Non editable cell of type “Html”
.GRadio Cell type “Radio”
.GControlPanel Bottom grid control panel
.GControlPanelImg Every button on control panel
.GControlPanelImgHover Every button on control panel under mouse cursor
.GCfgMenu Settings menu dialog
.GCfgMenuItem One item from settings menu
.GCfgMenuHover One item from settings menu under mouse cursor
.GCfgMenuButton Button (OK,Cancel) on settings menu
.GFilterMenu Main tag of menu filter
.GFilterMenuItem One row in filter menu
.GFilterMenuHover One row in filter menu under mouse cursor
.GPickTag Main tag of date picker
.GPickMS Month select
.GPickB Buttons
.GPickMY Month and year
.GPickWDN Weekday names
.GPickWD Workdays
.GPickSa Saturdays
.GPickSu Sundays
.GPickSel Selected day
.GPickNow Today
.GPagerBody Whole body of pager
.GPagerHeader Top header of pager
.GPagerCaption Header's text
.GPagerItem One item on pager body
.GPagerHover Item under mouse cursor
.GPagerCursor Selected page
.GPagerSort1, .GPagerSort2, .GPagerSort3 Item names according to sorted columns, 1 is most important, 3 least
.GPagerSortS Item name separator
.GMessage Message box
.GPageMessage Message box when loading/rendering the link
.GPage One page body if showing all pages
.GTable Main tag of whole table
.GFillRow Not used in grid, you can use it as Class attribute for User row if you set RelHeight=’100’.
This image file can be changed in input XML data <Img Grid=””>. By default this file is named Grid.gif and is located in directory with .css file.
All images must have the same height. The height is defined in input XML data <Img Height=””> attribute. By default in Grid.gif have images height 17 pixels.
First four rows are images for tree building. There are two columns by four images in each, together eight images in one row.
First three images in every column have the same width, defined in input XML data <Img Line=””> attribute. By default in Grid.gif have images height 21 pixels. These are all binary combinations of three bits. Don’t change empty images.
The fourth image in every column must be the same as first image in fifth row.
In the fifth row are ending tree images. All these images must have the same width, defined in <Img Tree=””>. By default in Grid.gif have images height 26 pixels.
In the sixth row are dragging tree images. All these images must have the same width, defined in <Img Tree=””>. By default in Grid.gif have images height 26 pixels.
These images replace ending tree images when dragging row.
In the seventh row are panel images. All these images must have the same width, defined in <Img Panel=””>. By default in Grid.gif have images height 13 pixels.
These images are in the order: S0 D0 S0 DX S1 D0 S1 DX SX D0 SX DX, where S is select, D is delete, 1 – selected, 0 - not selected, X – disabled.
In the eighth row are sorting images. All these images must have the same width, defined in <Img Sort=””>. By default in Grid.gif have images height 14 pixels.
In the ninth row are filter images. All these images must have the same width, defined in <Img Filter=””>. By default in Grid.gif have images height 17 pixels.
In tenth row are row images. All these images must have the same width, defined in <Img Row=””>. By default in Grid.gif have images height 17 pixels.
The first two images is checkbox for bool column. The third image is calendar.
This image file can be changed in input XML data <Img Toolbar=””>. By default this file is named Toolbar.gif and is located in directory with .css file.
All images are in one row and must have the same width and height. The size is defined in input XML data <Img ToolbarHeight=”” ToolbarWidth=””> attribute. By default in Toolbar.gif have images width 16 and height 25 pixels.
The images are in this order: Save, Reload, Repaint pages, Add, Add child, Sorting enabled, Sorting disabled, Calculations enabled, Calculations disabled, Expand all, Collapse all, Show configuration, Show help.
DragOne.cur, DragMore.cur
These mouse cursor files can be changed in input XML data <Img DragOne=”” DragMore=””>. By default these files are named DragOne.cur and DragMore.cur and are located in directory with .css file.
DragOne.cur is displayed when dragging one row or column.
DragMore.cur is displayed when dragging more rows.
Updates
4.1
Added some new styles and information about prefix
4.2
Added GFillRow style attribute