Support: How to customize the GridGroupingControl to get the Outlook style? : Syncfusion

How to customize the GridGroupingControl to get the Outlook style?

(Views :2863)

To customize the GridGroupingControl to Outlook style the following properties and events have to be handled in the grid.

Step 1: Outlook style theme

Setting of TableOptions.GridVisualStyles property will enable outlook like look and feel. This helps users to have customized with office 2007 themes. These themes are available from our version 5.1.

Step 2: GroupCaptionPlusMinusCell Appearance

The GroupCaptionPlusMinusCell appearance can be customized with an image object. This can be achieved by drawing the customized image over the cell. The GroupExpanded and GroupCollapsed events are handled to draw appropriate images on the cell. Please refer to the following kb article for more details.

http://www.syncfusion.com/support/kb/595

Step 3: Resizing Columns

In Outlook, the columns will get proportionally resized to fill the client area. A similar behavior can be achieved by handling the QueryColWidth event. In the QueryColWidth event handler new proportional column width has to be calculated and assign to the e.Size property.

Step 4: Additional property settings

A) ListBoxSelectionMode: To select rows has like Outlook style, the TableOptions.ListBoxSelectionMode property has to be set to SelectionMode.One to select the whole row and ListBoxSelectionCurrentCellOptions property set to HideCurrentCell to have same color has selection.

B) AddNewRecord: The ShowAddNewRecordBeforeDetails and ShowAddNewRecordAfterDetails properties to false to hide the AddNew record

C) GridLines: The grid lines are customized by setting the TableModel.Properties.DisplayVertLines to false to hide the vertical grid lines and the horizontal lines are customized by handling the QueryCellStyleInfo event.

In the attached sample, a helper class named ConfigureOutlookStyle is designed to set above property settings.

public ConfigureOutlookStyle(GridGroupingControl grid, GridVisualStyles skin)

{

myGrid = grid;

//Method to set the desired skin

public void SwitchToVisualStyles(GridVisualStyles skin)

{

myGrid.TableOptions.GridVisualStyles = skin;

//Set colors to be used with respect to the current skin

InitializeOffice2007Colors(skin);

myGrid.TableOptions.GridLineBorder = new GridBorder(GridBorderStyle.Solid, lineColor, GridBorderWeight.Thin);

myGrid.Appearance.GroupIndentCell.Borders.Bottom = new GridBorder(GridBorderStyle.Solid, lineColor,

GridBorderWeight.ExtraThin);

myGrid.Appearance.AnyRecordFieldCell.Borders.Bottom = new GridBorder(GridBorderStyle.Solid, lineColor,

GridBorderWeight.ExtraThin);

}

Public Class ConfigureOutlookStyle

Private myGrid As GridGroupingControl

'Method to set the desired skin

Public Sub SwitchToVisualStyles(ByVal skin As GridVisualStyles)

myGrid.TableOptions.GridVisualStyles = skin

'Set colors to be used with respect to the current skin

InitializeOffice2007Colors(skin)

myGrid.TableOptions.GridLineBorder = New GridBorder(GridBorderStyle.Solid, lineColor, GridBorderWeight.Thin)

myGrid.Appearance.GroupIndentCell.Borders.Bottom = New GridBorder(GridBorderStyle.Solid, lineColor,

GridBorderWeight.ExtraThin)

myGrid.Appearance.AnyRecordFieldCell.Borders.Bottom = New GridBorder(GridBorderStyle.Solid, lineColor,

GridBorderWeight.ExtraThin)

End Sub

End Class

Sample:

http://websamples.syncfusion.com/samples/kb/grid.windows/GGCOutlookstyle/main.htm