Table of Contents
Table of Contents
Customizing Grid Appearance

Overview

EO.Web supports many properties that are used to customize the appearance of the Grid. These properties fall into the following categories:

Row/Cell Appearance

Header Appearance

Footer Appearance

Row/Cell Appearance

Row/cell appearance is controlled by a number of styles and ItemHeight.

ItemHeight is used to set the pixel height of a GridItem. EO.Web Grid does not support variable item height and a fixed item height must be specified in order to the Grid to correctly render each item.

A number of style properties can be used to set the style of an item/cell. Different styles properties are applied depending on the type of the columns, whether the mouse is over the column, whether the cell is in edit mode and the index of the row.

Note:: If you set any of the "hover" style ( for example, ItemHoverStyle), you should also set the corresponding "normal" style ( for example, ItemStyle for ItemHoverStyle). When EO.Web Grid switches styles, it applies the new style without erasing the previous style. For example, if the intended result is to have regular black item text changes to blue when mouse hovers over it, you should not only set the font color for ItemHoverStyle to "blue", but also the font color for ItemStyle to "black". This way the text color changes to blue when mouse move overs the item, and changes back to black when mouse leaves the item. Without setting the font color for ItemStyle to "black", the text will not change back to black when mouse leaves the item.

A collection of these styles are grouped together as a GridItemStyleSet object. Each of them is identified by a unique StyleSetID. Each Grid supports multiple GridItemStyleSet through its ItemStyles property, which maintains a list of GridItemStyleSet object. The collection should contain at least one GridItemStyleSet object with a special style ID _Default.

A GridItem can use the _Default style set, or can user another style set by setting the item's StyleSetID item.

Header Appearance

EO.Web Grid displays column headers by default. Header appearance is controled by a set of properties starting with "ColumnHeader", for example, ColumnHeaderStyle, ColumnHeaderHeight, etc. Usually a number of images will be used for column headers:

Image Remarks
Background image A background image can be specified with ColumnHeaderStyle.
Background hover image A background hover image can be specified with ColumnHeaderHoverStyle. It is displayed when user hovers the mouse over the column header to create a highlighting effect.
Column header divider image A divider image can be specified with ColumnHeaderDividerImage. It is displayed in between two adjacent column headers to create a visual divider between the two columns.
Column Header ascending image This image is specified by ColumnHeaderAscImage. It is used to be displayed on top of the column header to indicate the column is in ascending sorting order.
Column Header descending image This image is specified by ColumnHeaderDescImage. It is used to be displayed on top of the column header to indicate the column is in descending sorting order.

These images together with several style properties offer great flexibility on customizing header appearance.

Footer Appearance

EO.Web Grid displays a footer with paging buttons when paging is enabled. Like any other part of the grid, the footer area can also be fully customized. For a detailed list of all properties related to the pager, see here.