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:
C# | Copy Code |
---|---|
// This setting affects all WebGrid's hierarchy including all tables and columns to allow sorting. LayoutSettings.AllowSorting = "Yes" |
C# | Copy Code |
---|---|
// This setting affects all tables to allow sorting, except tblCustomers. LayoutSettings.AllowSorting = "Yes" tblCustomers.AllowSorting = "No" |
C# | Copy Code |
---|---|
// This setting affects all tables and columns to allow sorting, except the the "FirstName" column of tblCustomers. LayoutSettings.AllowSorting = "Yes" tblCustomers.Columns.GetNamedItem("FirstName").AllowSorting = "No" |
Getting Started
Getting Started
Overview
WebGrid Features Overview
Other Resources
Walkthrough Topics
How-to Topics