Changing style sheets and images
TreeGrid v5.9
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 row Class attribute, ClassOuter, ClassInner cell attributes or in event OnGetClass.
To change CSS style for individual cell you can use its XML attributes Class, 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 <Style Prefix=’G’/> attribute. In predefined style sheets are these prefixes: GridModern “GM”, GridLight “GL”, GridOffice “GO”.
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>.
Some styles use other image files for their backgrounds. These backgrounds are defined directly in .css file.
There also two cursor files for dragging. DragOne.cur and DragMore.cur. These files are not required.
! Don't use margin properties, except is explicitly permitted.
! Don’t set border or padding to strings (like “medium”), use always value in pixels (like “1px”).
! Don't change extent properties (border, width, height) at runtime (in events).
TreeGrid contains many <table> tags, so remember difference in inheriting styles in Strict (inherits to tables) and Quirks (does not inherit) modes.
Here you can change border and padding of whole grid section. The border and padding set with relation to Special rows settings and Toolbar.
! 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
.GVScroll Vertical scrollbar, you can also its background
.GHScroll Horizontal scrollbar, you can also its background
.GXScroll Right bottom cell between scrollbars, here you can set its background. ! its border attribute is ignored now.
Here you can set margin, border, padding and background of special solid rows. The margin, border and padding set with relation to Sections settings and Toolbar.
GSpace, GSearch, GGroup, GPager Given special space row.
GFilter Filter row. You must not set its border or margin.
GFillRow Space row with RelHeight=’1’ to fill remaining space of main tag, used also for row created by ConstHeight attribute.
GFillUserRow Fixed User row with RelHeight=’1’ to fill remaining space of main tag. You must not set its border or margin.
Here you can set border, padding, background, vertical alignment and wrapping of cells.
Here you control whole cells, including tree icons, right buttons, sorting icons in header and so on.
Remember background colors are automatically changed by cell states, you should set background only for header cell or panel.
! All cells must have the same border width and padding
.GHeader Header cell, contains column captions
.GHeaderNoSort Header cell when sorting is not permitted or by clicking to sort icon only.
.GHeaderHover Header cell under mouse cursor
.GHeaderNoSortHover Header cell when sorting is not permitted or by clicking to sort icon only, under mouse cursor.
.GHeaderFocus Header cell when moving
.GHeaderGroup Header cell displayed on group row, when used custom grouping area.
.GHeaderGroupFocus Header cell on group row being dragged outside.
.GHeaderGroupDelete Header cell on group row to be removed from the row.
.GHeaderMulti Odd multiline header cell
.GHeaderMultiHover Odd multi-line header cell under mouse cursor.
.GHeaderMultiEven Even multiline header cell
.GHeaderMultiEvenHover Even multi-line header cell under mouse cursor.
.GPanelTop Top row panel left to header
.GPanelTopHover Top row panel under cursor
.GPanel Variable row panel on the left
.GPanelHover Variable row panel under mouse cursor
.GFixedPanel Fixed row panel on the left
.GFixedPanelHover Fixed row panel under mouse cursor
.GFilterPanel Filter row panel on the left
.GFilterPanelHover Filter row panel under mouse cursor
.GSpacePanel Space row panel on the left
.GSpacePanelHover Space row panel under mouse cursor
.GCell All editable ells in variable rows
.GCellNE All non editable cells in variable rows
.GFixedCell All editable cells in fixed rows
.GFixedCellNE All non editable cells in fixed rows
.GFilterCell All editable cells in filter row
.GFilterCellNE All non editable cells in filter row
.GSpaceCell All editable cells in space rows except .GSpaceSelectCell and .GSpaceCheckboxCell
.GSpaceCellNE All non editable cells space rows
.GSpaceCheckboxCell All editable cells of type Bool in space rows
.GSpaceSelectCell All cells with Button type Defaults in space rows
.GSpaceSelect The text part of cell with Button type Defaults in space rows.
.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
.GCellSpaceButton Cell with standard button (it is parent <div> tag of <button>)
Here you can set font, text color, and other text attributes of cell content.
Here you control just inner content of the cell without any tree icons, right buttons or sorting icons in header. Or you control these buttons and icons separately.
Here you can set padding, border or even margin of input controls like <input>. Take care about these settings; they are optimized for all browsers.
.GHeadText Column caption
.GHeadSort Sort icon
.GGroupText Column caption on grouping row.
.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>
.GHtml Non editable cell of type “Html”
.GRadio Cell type “Radio”
.GButton Button right to the cell value
.GButtonImg Image button right to the cell value
.GButtonSpace Standard button cell (Button), settings of <button> tag
.GButtonSpaceChecked Standard button cell (Button), with value of 1 - marked button.
.GGroupCustom Text in DropCols type cell (like “To group by, drag column caption here...”)
Here you can set all CSS attributes of grid control panel (by default placed on bottom).
.GToolbar Main tag setting, you can set its border, padding and background attributes.
The border and padding set with relation to Sections settings and Special rows settings.
.GToolbarCell Every cell on toolbar (Toolbar is Space row).
.GToolbarImg Every button on control panel. It is setting also for cell type Button with Icon attribute set.
Here you can set border, padding, margin, background and cursor attributes.
.GToolbarImgHover Image/link button under mouse cursor
.GToolbarImgChecked Image/link button cell (Button) with Icon attribute set, with value of 1 - marked button.
.GToolbarImgHoverChecked Checked image button under mouse cursor
.GToolbarFormula Style of toolbar Formula, for backward compatibility.
.GToolbarButton Cell of type Button
.GToolbarText Text on cell of type Button
Here you can set all CSS attributes for menu dialogs – main configuration menu and columns visibility menu.
.GCfgMenu Main menu tag, you can set its border, padding, margin or background.
.GCfgMenuHeader Header and caption of main menu.
.GCfgMenuSeparator Separator between menu sections.
.GCfgMenuItem One menu item and also caption, you can set its font, color and other text attributes and also background and padding.
.GCfgMenuHover One menu item under mouse cursor, you can set its font, color and other text attributes and also background and padding.
.GCfgMenuButton Button (OK,Cancel) on menu, the <button> tag.
Here you can set all CSS attributes for all popup menus, like Defaults menu, Filter menu, Cell menu or menu displayed by ShowMenu API method.
.GMenu Main menu tag, you can set its border, padding, margin or background.
.GMenuCaption Caption tag if the menu contains it, you can set font, color and other text attributes and also background and padding.
.GMenuSeparator Menu item separator (displayed for item named “*-“), you can set its border, padding, margin or background
.GMenuItem One menu row, you can set its font, color and other text attributes and also background and padding.
.GMenuGroup One menu group parent row, you can set its font, color and other text attributes and also background and padding.
.GMenuHover One menu row under mouse cursor, you can set its font, color and other text attributes and also background and padding.
.GMenuButton Button in popup menu. Used for Defaults menu with Range.
.GMenuIcon Selected icon in filter when filter menu is popped up.
Used for Enum type cell when set EnumType > 0 – enum expanded by custom menu
.GEnumCell The whole Enum cell with text and icon
.GEnum Main menu tag for expanded Enum, similar to .GMenu
.GEnumSeparator Menu item separator (displayed for item named “*-“), similar to .GMenuSeparator
.GEnumItem One menu row, similar to .GMenuItem.
.GEnumGroup One menu group parent row, similar to .GMenuGroup.
.GEnumHover One menu row under mouse cursor, similar to .GMenuHover.
.GEnumIcon The Enum cell when the menu is expanded, similar to .GMenuIcon.
Here you can set all CSS attributes for date picker popup dialog.
! The calendar is styled for strict mode, for IE quirks mode should be slightly changed width and height settings.
.GPickTag Main tag of date picker, <div> tag
.GPickBorder Left and right side border, <td> tag
.GPickHeader Top area with caption and close icon, <tr> tag
.GPickHeadText Dialog caption “Please select date”, <td> tag
.GPickClose Close button
.GPickFooter Bottom area with buttons, <tr> tag
.GPickFootText Cell bottom area, <td> tag
.GPickDate The second row of dialog with month and year to select, <tr> tag
.GPickBL Left button cell to change month and year
.GBickBR Right button cell to change month and year
.GPickMY The month and year caption
.GPickRow Every row with date numbers, <tr> tag
.GPickRowW Row with day captions, <tr> tag
.GPickCell Every cell with date numbers or with day captions, <td> tag
.GPickHover Every selectable date number under mouse cursor
.GPickWDN Weekday names
.GPickWD Workdays
.GPickSa Saturdays
.GPickSu Sundays
.GPickOM Days from previous and next month
.GPickSel Selected day
.GPickSelHover Selected day under mouse cursor
.GPickNow Today
.GPickWDNE, .GPickSaNE, .GPickSuNE, .GPickSelNE, .GPickNowNE, .GPickOMNE Not editable cells.
.GPick2M Month cells in second dialog for choosing month and year
.GPick2Y Year cells in second dialog for choosing month and year
.GPick2MSel, .GPick2YSel Actually selected month and year
.GPick2MHover, .GPick2YHover, .GPick2MSelHover, .GPick2YSelHover Cells under mouse cursor
.GPick2SepH Horizontal line below caption, <tr> tag
.GPick2Sep Vertical line between years and months
.GPick2BL Button years left
.GPick2BR Button years right
.GPickButton Control button on calendar when used Range and control button in second dialog for choosing month and year
.GPickTimeCell The last row with displayed time, visible only if the cell has time part in its EditFormat, not applicable when used Range
.GPickTime <input> with the time
Here you can set all CSS attributes for main vertical pager, displayed on the right, when paging is used.
.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(s)
.GPagerSort1, .GPagerSort2, .GPagerSort3 Item names according to sorted columns, 1 is most important, 3 least
.GPagerSortS Item name separator
Here you can set all CSS attribute for horizontal pager content.
The pager is displayed as Space row and uses class GPager for the pager row.
GSimplePager One link on the pager, you can set its border, margin, padding, background and also text attributes like font or color.
You can also set the GSimplePager:visited and GSimplePager:hover classes.
GSimplePagerActive Actual page on the simple pager.
CSS settings for Gantt chart created by gantt () function. The class with prefix GanttG are for custom use when set classprefix parameter for gantt function to “GanttG”.
The individual layouts are placed over themselves in this order: Base background, Background, Gantt (startdate/duedate), Flow, Mark, Dependencies, Milestones
.GGanttOuter CellOuter for the Gantt chart cell
.GGanttInner CellInner for the Gantt chart cell
.GGanttBack1, .GGanttBack2, .GGanttBack3, .GGanttBack4, .GGanttBack5, .GGanttGBack1, .GGanttGBack2, .GGanttGBack3,
.GGanttGBack4, .GGanttGBack5 Five backgrounds used for individual items in the gantt () parameter background.
.GGantt0Out, .GGantG0Out Outer tag of not yet started task
.GGantt0In, .GGantG0In Inner tag of not yet started task
.GGantt10Out, .GGanttG10Out Outer tag of not yet completed part of incomplete task
.GGantt10In, .GGanttG10In Inner tag of not yet completed part of incomplete task
.GGantt90Out, .GGanttG90Out Outer tag of already completed part of incomplete task
.GGantt90In, .GGanttG90In Inner tag of already completed part of incomplete task
.GGantt100Out, .GGanttG100Out Outer tag of fully completed task
.GGantt100In, .GGanttG100In Inner tag of fully completed task
.GGanttNullOut, .GGanttGNullOut Outer tag of task with unknown completion state
.GGanttNullIn, .GGanttGNullIn Inner tag of task with unknown completion state
.GGantt0Hov, .GGantt10Hov, .GGantt90Hov, .GGantt100Hov, .GGanttNullHov, .GGanttG0Hov, .GGanttG10Hov, .GGanttG90Hov,
.GGanttG100Hov, .GGanttGNullHov Outer tag of task under mouse cursor
.GGanttFlowOut, .GGanttGFlowOut Outer tag for Flow
.GGanttFlowIn, .GGanttGFlowIn Inner tag for Flow
.GGanttFlowHov, .GGanttGFlowHov Outer tag for Flow under mouse cursor
.GGanttMark, .GGanttGMark Tag for Mark
.GGanttDep, .GGanttGDep Parent tag for dependencies
.GGanttDepVert Vertical line
.GGanttDepVertTop Vertical top half line
.GGanttDepVertTop2 Vertical top half line, used to connection to top horizontal line
.GGanttDepVertBottom Vertical bottom half line
.GGanttDepVertBottom2 Vertical bottom half line, used to connection to bottom horizontal line
.GGanttDepHorzIn Inner part of middle horizontal line
.GGanttDepHorzTop Inner part of top horizontal line
.GGanttDepHorzBottom Inner part of bottom horizontal line
.GGanttDepHorzOut Outer part of all horizontal lines
.GGanttDepIcon Parent for arrow icon
.GGanttMilestoneHov, .GGanttGMilestoneHov Tag for milestone under mouse cursor
.GGanttHeaderTable <table> for header
.GGanttHeader1, .GGanttHeader2, .GGanttHeader3, .GGanttHeader4, .GGanttHeader5, .GGanttGHeader1, .GGanttGHeader2, .GGanttGHeader3, .GGanttGHeader4, .GGanttGHeader5 Five tags used for individual headers set in the gantt ()
.GMessage Informational or error message box (like “Rendering...” or “Sorting...”). You can sets any its CSS attribute except size and position.
The exact GMessage class (with G prefix) is always used for messages displayed before Defaults.xml is loaded.
.GPageMessage Message box when loading/rendering the page (displayed inside empty page). You can sets any its CSS attribute except size and position.
.GPage One page body if showing all pages, you can set its border, padding or background.
.GPageOne One page body if paging is not used, you can set its border, padding or background.
.GChildPage Area with children of row, you can set its border, padding or background.
.GTable Main tag of whole table. You can set its border or padding. It is for <table> tag, so padding is spacing between sections.
To set spacing between cells, set <Cfg CellSpacing>.
.GHint Hint tip tag
.GTip Tooltip tag
.GShadow The shadow under messages, dialogs, hints and tips
.GPagerEdit Editable page number in Pager cell.
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.
This image file contains all icons displayed in grid.
The file contains 7 rows of images. The first three rows are 128 pixels high and the next four rows are 32 pixels height. You cannot change the height of these rows.
Remember, if you change width of any type of images by some <Img> attribute, like Tree, Line, Filter, … You must resize and move all images on the appropriate row.
Tree images
The first three high rows contain images for building tree. To speed up rendering the first two rows contain all combinations of tree icons.
These two rows have images:
000L010L001L011L
100L110L101L111L
Where 0 and 1 are images of line (0 = empty, 1 = line). These images are all 21 pixels wide by default, this value can be changed by <Img Line=””> attribute.
L are images for end of line. These images are 26 pixels wide by default, this value can be changed by <Img Tree=””> attribute.
The third high row contains the rest of tree images like L image. These images are 26 pixels wide by default, this value can be changed by <Img Tree=””> attribute.
When displayed, the tree images are displayed as high as the row. If row if higher then 128 pixels, the tree image is repeated without first 32 pixels (vertically).
Row images
The last four rows contain other row images. The rows are 32 pixels high, but height of all these images is 17 pixels by default and can be changed by <Img Height=”” SpaceHeight=””> attributes.
In the fourth row are panel images. All these images must have the same width, defined in <Img Panel=””>. By default in Grid.gif have images width 13 pixels.
These images are in the order: MSDC MSDC MSDC MSDC MSDC MSDC MDC MDC MC
where S is select (unselected), S is unselect (selected), S is not selectable, D is delete, D cannot be deleted, M is move, C is copy.
Cannot move and cannot copy icons are always empty images and cannot be changed.
In the fifth 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 fifth row on position 160px are icons for Space panel – GroupOn, GroupOff, no grouping, SearchOn, SearchOff, no sorting.
Width of icons is defined by <Img SpacePanel=””>
In the fifth row on position 300px continue panel images, see them above. The order is MSC MSC MSC FF. Where F is Filter On and F is Filter off.
In the sixth 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 the sixth row on position 300px are icons for Space row content – Defaults, Bool false, Bool true.
Width of icons is defined by <Img SpaceRow=””>
In the sixth row on position 400px are icons for Gantt chart – dependency left, dependency right, milestone diamond, left triangle, right triangle
In the seventh row are row content images (unchecked, checked, date picker, radio, checked radio, button defaults, enum popup). All these images must have the same width, defined in <Img Row=””>. By default in Grid.gif have images height 17 pixels.
In the seventh row on position 128px are six tree images for use when tree lines are switched off by <Cfg NoTreeLines=’1’/>. These images are 26 pixels wide by default, this value can be changed by <Img Tree=””> attribute.
Next two images are expanded enum icons are wide as <Img Row=””>.
In the seventh row on position 400px are seven calendar images (close, month year popup, month year back, previous month, next month, previous years, next years). These images are 13px wide and high by default and their extents are set by <Img CalendarHeight=””> and <Img CalendarWidth=””>.
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 16 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, Show columns, Resize grid, Print, Export to Excel and eight Pager type cell images (first page, disabled, previous page, disabled, next page, disabled, last page, disabled).
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
Added some new styles and information about prefix
Added GFillRow style attribute
Updated Grid.gif section
Rewritten Style sheet section
Updated Grid.gif, row images – updated Panel images and added Space row panel and content images
Added many new styles to style sheet
Added .GChildPage class
Added GToolbarButton, GToolbarText, GMenuButton, GPickSelHover, GPickButton classes
Added GTip, GHint, GShadow and GPagerEdit classes
Added GMenuIcon
Added Custom Enum type
Changed Calendar style
Added GPickFooter and GPickFootText
Added GPickMY, changed GPickBL and GPickBL and deleted GPickB, GPickYear, GPickMonth
Added GPickRowW and changed GPickRow
Added GPickOM and GPickOMNE
Added GPick2M, .GPick2Y, .GPick2MSel, .GPick2YSel, .GPick2MHover, .GPick2YHover, .GPick2MSelHover, .GPick2YSelHover
Added GPick2SepH, GPick2Sep, GPick2BL, GPick2BR
Added information about new calendar icons in Grid.gif
Added information about Gantt icons
Added description of Gantt classes
Updated Gantt classes, many classes changed, added or deleted
Added GMenuCaption, GMenuSeparator, GMenuGroup, GEnumGroup and GEnumSeparator classes