Changing style sheets and images

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

 

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

.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

 

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,html,enum), not edited

.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

 

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

 

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.

 

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.

 

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.gif and DragMore.gif and are located in directory with .css file.

DragOne.gif is displayed when dragging one row or column.

DragMore.gif is displayed when dragging more rows.