Changing style sheets and images

TreeGrid v4.6

 

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.

 

Style sheet

 

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

 

Sections

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

 

Cells

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

 

Cell contents

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

 

Toolbar

.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

 

Filters

.GFilterMenu                      Main tag of menu filter

.GFilterMenuItem              One row in filter menu

.GFilterMenuHover            One row in filter menu under mouse cursor

 

Date picker

.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

 

Pager

.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

 

Other

.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’.

 

 

Images

Grid.gif

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=””> attribute.

 

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 height 13 pixels.

These images are in the order: S0 D0 S0 DX S1 D0 S1 DX SX D0 SX DX CC, where S is select, D is delete, 1 – selected, 0 - not selected, X – disabled. CC is copy icon.

 

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 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.

 

The seventh row contains two sections (changing width of one section does not affect the width or position of the other section).

The first six images are row content images (unchecked, checked, date picker, radio, checked radio, button defaults). All these images must have the same width, defined in <Img Row=””>. By default in Grid.gif have images height 17 pixels.

And next six images are 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.

 

Toolbar.gif

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

 

4.4

Update Grid.gif section