Appearance

A variety of styling options are available for various sections of the Grid Grouping Control such as group, filter, header, footer, summary and nested cells, and different states such as adding new record, alternate record, Group Indent Cells among others.

To provide your application with a rich appearance the datagrid provides built-in support for numerous popular color schemes such as Microsoft Windows Vista and Microsoft Office 2007 among others. The appearance of every grid element such as the grid table, row, column header, group drop area is transformed by these color schemes. The supported color schemes are Microsoft Windows Vista, Windows, Microsoft Office 2007, Monochrome, Olive, Blue and Orange. These color schemes can be implemented via the framework Auto Format command.

The Advanced Styles Architecture available in Grid Grouping Control helps define styles for unique grid elements such as Group Cell, Header Cell, Nested Table Cell, Intend Cell and Summary Cell. The datagrid provides two customization options: Customization using Cascading Style Sheets (CSS) Customization via the Grid Style Architecture.

CSS Support

Custom CSS can be defined for each of the above mentioned elements in Grid Grouping Control.

Grid Style Architecture

The grid implements it's own style architecture with style inheritance across logically related elements in the grid. Use this as an alternative to the CSS style options for finer control over grid element appearance.

As in CSS, the Grid Style Architecture lets you define a style and apply it across different cells on the grid.For example, conditional formatting can be applied using Gid Style Architecture.

An illustration of conditional formatting using Grid Style Architecture is shown below.

The base style called Header Style is applied to the headers and Standard Style is applied to the other cells.Highlight Style is applied to the cells in the Sales column, where the value falls below the 'Target' value.

Grid Grouping Control with Base Styles

The datagrid provides the Customization Events option that enables fine tuning the appearance of individual cells. The most important events are Query Cell Style Info and Query Value events. Using these events, any grid cell's appearance and cell value can be customized. You can change the value displayed in a cell using the Query Cell event and the Query Cell Style Info event can control the appearance attributes of a cell such as cell interior, font and text.

The grid can be operated in Listbox mode where users can select one or more records by holding down CTRL or ALT and clicking the mouse button. Three unique selection types are available for Grid Grouping Control in Listbox mode. They are :

• Single Selection mode: Only one row can be selected at a time.
• Multi Simple mode: Multiple rows can be selected using the mouse.
• Multi Extended mode: Multiple rows can be selected using the CTRL and SHIFT keys.

The default setting of the selection mode is 'off'.

The Area Selection mode, also known as Model Based Selection, lets you select the cells in a range and copy them to external applications like Microsoft Excel and ConTEXT Text Editor. Using this mode, you can select across any range of cells, which is not possible with record-based selection. It uses alpha blending to highlight the selected cells. It is also possible to specify custom color for alpha blending.

Grid column width can be interactively adjusted by resizing the desired columns. When column resizing is enabled, place the mouse pointer over the column header boundary and drag the boundary line to the desired location in order to adjust the column width.

The grid columns can be re-arranged by drag and drop of desired column headers to a new location. The cue arrows hint destination location.

Conditional Formatting allows you to apply different styles to the cells based on user-defined value conditions. Given a criteria and an appearance style, the grid will automatically render those cells whose values meet the specified criteria with the specified style.

The illustration below shows conditional formatting. The records with Stock value < 10, are highlighted in red color.

The rows and columns can be frozen to the left or to the top of the grid, to be always visible while scrolling through a grid with large number of rows or columns.

A single record in a data table can span over multiple rows in Grid Grouping Control. This improves readability and conserves horizontal space. Multi-row span can be declaratively defined in the aspx.

The grid cell contents can be customized with HTML elements using templates in Grid Grouping Control. Custom templates can be used for changing the appearance of individual sections in the grid such as headers, cells in a column, and buttons in the button bar.

Annotations can be specified for different portions of the grid using the ToolTip property. These annotations are displayed on mouse hover over specified portions of the grid.

ToolTip for the various buttons in the Button Bar, can also be customized using the Button ToolTip property, available for individual buttons.

The Grouping Grid is capable of displaying high resolution images in cells. When bound to a datasource containing an image, the grid will read the image and display it within the appropriate cell. Several image customization options are also available. These options are listed below:

Image Size Modes

The different image modes on the Grouping Control Grid are:

• Normal - Displays the image as is without scaling.
• Center Image - Aligns the image to the center of the cell.
• Auto Size - Makes the image fit the cell dimensions while manitaining the height/width ratio.
• Stretch Image - Stretches the image, if necessary, to make it fit the cell dimensions.

Different styles can be applied to alternating record rows. The Alternating Row Styles option lets you create a rich grid appearance.

The Grouping Grid Control supports outlook style grouping. The illustration below is a simulation of a Microsoft Outlook 2003 styled grid. This grid is grouped on the values of the unbound field Day. All grid elements such as headers, group caption cells and plus/minus cells can be customized. This lets you greatly enhance the appearance of your application.