Styling in C1FlexGrid

Styling cells of a grid is a common topic for help requests in the ComponentOne FlexGrid Forum. There are a number of techniques available depending on exactly what styling should be applied. This article introduces the conceptual knowledge of C1FlexGrid CellStyle along with the priorities in which they are applied. It also handles a use-case of overriding default style priorities. style Let's take a quick look at all of them one by one.


The C1FlexGrid control uses a CellStyle object to customize the cell appearance. The style editor lets you modify the existing styles and add new custom ones, which may later be assigned to cells, rows, and columns. The best thing about working with the Style Editor is that you can manage your grid styling without even writing any code! StyleNew: C1FlexGrid elements like Row, Column, CellRange etc have a 'StyleNew' property that retrieves the object's style, if it exists, or creates a new one and assigns it to the object. This property is preferred in situations where you don't need a full-fledged control over formatting. For example, if all you want to do is give the range a red background, you can write:

CellRange rg = _flex.GetCellRange(3, 3, 10, 10);  
rg.StyleNew.BackColor = Color.Red;

Clearing Styles: To clear the style formatting applied to a C1FlexGrid's cells, you can use Clear method of C1FlexGrid and pass 'Style' as a parameter to clear custom styles assigned to cells. Applying Clear method with parameter 'Style' clears only the style formatting, not the contents or UserData of the grid.


Enhance UI with Microsoft Office 2007 and 2010 Styling: FlexGrid supports Visual Styles that mimic the styles available in Office 2007 and 2010, including Blue, Silver, and Black. For this, you can use the VisualStyle property of C1FlexGrid which allows you to customize the appearance of the grid in order to have it match up with your application. Values can be assigned using VisualStyle enum.

Styling Grid’s Elements & their Priorities

The appearance of the cells (alignment, font, colors, borders, and so on) is handled with CellStyle objects. The grid has a Styles property that holds the collection of styles used to format the grid. This collection has some built-in Styles (like Focus, Highlight, Fixed etc). You can also create your own custom styles at runtime/design time and assign them to the following Grid elements:

 C1.Win.C1FlexGrid.CellStyle CustomStyle = c1FlexGrid1.Styles.Add("CustomStyle");


 CustomStyle.BackColor = Color.DarkTurquoise;  
c1FlexGrid1.Rows[5].Style = CustomStyle;


CustomStyle.BackColor = Color.DarkGreen;  
c1FlexGrid1.Cols[4].Style = CustomStyle;


 CustomStyle.BackColor = Color.Maroon;  
c1FlexGrid1.SetCellStyle(0, 0, CustomStyle);  


 CellRange rg = c1FlexGrid1.GetCellRange(3, 3, 10, 10);  
CustomStyle.BackColor = Color.Violet;  
rg.Style = CustomStyle;

However, the few built-in styles existing in Styles collection of C1FlexGrid are as follows. • Normal: Default style used to paint scrollable cells. • Alternate: Style used to paint scrollable cells in alternate rows. • Fixed: Style used to paint fixed cells. • Frozen: Style used to paint frozen cells (editable and selectable, but not scrollable). You can change properties of these styles to modify the way the grid looks. The priority of C1FlexGrid Styles is:

Normal < Alternate < Frozen < Row < Column < (Cell = CellRange) Fixed < Row < Column

* Please note that 'Cell' and 'CellRange' have equal priorities and hence the one applied later is preferred. Besides there are certain Styles which are applied when performing certain actions and hence, suppresses already applied custom styles. These built-in styles have highest priority in all the styles applied to a particular cell. • Editor: Style used to paint the cell being edited. • Focus: Style used to paint the current cell when the control has focus. • Highlight: Style used to paint highlighted selected cells. • Search: Style used to paint the cell selected while auto-searching. • SelectedColumnHeader: Style used to paint selected column headers. • SelectedRowHeader: Style used to paint selected row headers.

Suppressing Default Priority

Few built-in styles like Focus, Highlight etc. will suppress any custom style when applied to a cell. What if you still want the custom style to be applied to a cell? A famous use case is when a few cells of C1FlexGrid are painted with custom style and ‘SelectionMode’ property of C1FlexGrid is set to ‘Row’. Due to the highlight backcolor, all of the cells(except focused cell) in a selected row have background color set to ‘Blue’ irrespective of any custom styles applied on them. C1FlexGrid offers the flexibility to override the default priority of styles. In this scenario, re-assign the custom style to a desired cell in ‘OwnerDrawCell’ event. OwnerDrawCell event and DrawMode property allows you to override every visual aspect of the cell. The parameters used in the OwnerDrawCell event allows you to change the data that is displayed, the style of cell and draw whatever you want into the cell. In this case, you need to set desired style to the cell using e.Style property. Hope the article covers the important concepts of the styling.Download Sample - C# Download Sample - VB

Download Now!<%/if%>


GrapeCity Developer Tools
comments powered by Disqus