WebGrid allows you to completely customize its appearance, look and behavior. The core style object is implemented in WebGridFormatStyle class, which contains numerous appearance-related such as BackColor, Font, BorderColor and so on. It is implemented by all UI elements such as Rows and Cells. The WebGridFormatStyle also allows you to put custom CSS Rules with the CustomRules property.

WebGrid's UI Elements that support the style customization through WebGridFormatStyle are:

• AlternatingRowStyle
  To get or set the style that is used to display alternate row.

• ButtonStyle
  The style of button object of Button Column.

 

• CheckedRowStyle
  The style is applied to checked row.

• EditFocusCellStyle
  The style of the focused cell object.

• EditTextboxStyle
  The style of the cell object during edit mode.

• FilterRowStyle
  The style is applied to filter row.

 

• FocusCellStyle
  To get or set the style used when a row or cell is focused/selected.

 

• FooterStyle
  The style is applied to the column footer.

• FrameStyle
  To specify the style applied to main WebGrid's frame.

• GroupRowInfoStyle
  To get or set the style for GroupRow.

• HeaderStyle
  The style is applied to the column headers.

• HyperlinkStyle
  The style is used for HyperLink column type.

 

• LostFocusRowStyle
  The style is applied to the selected row when the focus is out of the grid's area.

• NewRowStyle
  The style is applied to new row.

• PreviewRowStyle
  The style is applied to preview row area.

• RowHeaderStyle
  The style is applied to row's header.

• RowStyle
  The style is used to display WebGridRow object.

• ScrollBarStyle
  The style of the grid's ScrollBar.

• SelectedRowStyle
  The style is used to highlight selected row or cell.

 

• SortedColumnStyle
  The style is applied to the cell which column is sorted.

• StatusBarCommandStyle
  The normal, hover and active style for the command item in status bar.

• StatusBarStyle
  The style is applied to the status bar.

All of the styles above are accessible through LayoutSettings property, the centralized repository for all appearance and behavior-related settings. Most of element's styles support property inheritance, in which higher-level object's settings will override all lower-level object's settings which has "default" setting.

The WebGridFormatStyle itself contains numerous appearance-related settings including:

• BackColor.
• BackgroundImage.
• BorderWidth, BorderColor, BorderSize.
• CustomRules.
• CssClass.
• Cursor.
• Font.
• ForeColor.
• Padding, Margin.
• Height, Width. Note that these properties are not applicable to some UI elements such as CellStyle because those element's height and width are automatically calculated based on Row's height and Column's width to deliver consistent layout.
• Horizontal Align, Vertical Align.
• Wrap.
  

Some UI Elements' styles are defined separately and individually in their specific object holder such as GroupBox and FocusCellStyle, which are also contained in LayoutSettings property. You can also change the images used in WebGrid with your own in ImageSettings, which is also under the LayoutSettings property.

Developers generally have 2 considerations while customizing the styles of WebGrid:

• Direct styles customization
  This can be done through WebGrid.NET Designer and directly changing the styles in LayoutSettings or individual objects such as Table or Column. You can also apply a predefined layout from Layout Manager .
• StyleSheet-controlled styles
  It allows you to create a set of styles defined in external StyleSheet and have it linked to the WebGrid. It also enables the web applications to have global theme support for overall WebSite appearance. To use the styles that defined in-line or in external StyleSheet, simply set the CssClass of each element's style. When it is rendered, WebGrid will automatically be displayed using the specified CssClass and corresponded to defined styles.

Property inheritance example:

 

See Also

 

 

---

© 2012 Intersoft Solutions Corp. All Rights Reserved.