# Setting the Appearance of Grouped Rows

Spread for ASP.NET allows you to customize the appearance of the group headers and grouped rows by setting its background color, border, font, foreground color, etc.

## Content

You can customize the appearance of the group headers and the grouped rows. For an introduction to the user interface for grouping, refer to [Using Grouping](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-grouping/spweb-group-use).
You can set up the display so that the items are shown initially all expanded or all collapsed when grouping is performed with the [GroupingPolicy](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.GroupingPolicy.html) property.
You can set the colors and other formatting of both the hierarchy names and the data in the rows when grouping is performed with the [GroupInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.GroupInfo.html) class.
For more information on other hierarchical displays of data, refer to [Displaying Data as a Hierarchy](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-databound/spweb-dbhierarchy).
You can also define a set of properties in an array list called GroupInfo. Set the appearance of grouped rows by adding styles to the array list of appearance properties for grouping. A collection of [GroupInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.GroupInfo.html) objects is in the GroupInfoCollection. To set the appearance settings in a [GroupInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.GroupInfo.html) to a particular sheet, set the [GroupInfos](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.GroupInfos.html) property on that sheet. Appearance settings for grouping include:

* Background color
* Border
* CSS class
* Font
* Foreground (text) color
* HorizontalAlignment
* VerticalAlignment

Only column and sheet appearance settings remain when grouping is turned on. For more information about the group data model and the effect on the sheet data model, refer to [Creating a Custom Group](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-grouping/spweb-group-model). Since rows and cells are moved when the grouping feature is turned on, any style or span settings are ignored. You can use the [IsGroup](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Model.GroupDataModel.IsGroup.html) method, which determines whether a requested row is a data row or a group header row.
For information about the **GroupInfo** editor in the Spread Designer, for customizing the appearance settings of the group headers, refer to [GroupInfo Collection Editor](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-spdesigner/spweb-SDInterface/spweb-SDCollEditors/spweb-SDCollEditors-GroupInfo).

## Using Code

1. Set the [AllowColumnMove](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.AllowColumnMove.html), [GroupBarVisible](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.GroupBarVisible.html), and [AllowGroup](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.AllowGroup.html) properties.
2. Specify the main group bar color with the [GroupBarBackColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.GroupBarBackColor.html) property.
3. Specify colors for subgroups with the [GroupInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.GroupInfo.html) class.

## Example

This example sets the appearance for the group bar and the grouped rows.

```csharp
FpSpread1.ActiveSheetView.AllowColumnMove = true;
FpSpread1.ActiveSheetView.GroupBarVisible = true;
FpSpread1.ActiveSheetView.GroupBarBackColor = Color.Salmon;
FpSpread1.ActiveSheetView.GroupBarHeight = 50;
FpSpread1.ActiveSheetView.GroupMaximumLevel = 5;
FpSpread1.ActiveSheetView.AllowGroup = true;
FarPoint.Web.Spread.GroupInfo gi = new FarPoint.Web.Spread.GroupInfo();
gi.BackColor = Color.Yellow;
FarPoint.Web.Spread.GroupInfo gi2 = new FarPoint.Web.Spread.GroupInfo();
gi2.BackColor = Color.Green;
FarPoint.Web.Spread.GroupInfoCollection gic = new FarPoint.Web.Spread.GroupInfoCollection();
gic.AddRange(new FarPoint.Web.Spread.GroupInfo[] {gi, gi2});
FpSpread1.ActiveSheetView.GroupInfos.Add(gic[0]);
```

```vbnet
FpSpread1.ActiveSheetView.AllowColumnMove = True
FpSpread1.ActiveSheetView.GroupBarVisible = True
FpSpread1.ActiveSheetView.GroupBarBackColor = Color.Salmon
FpSpread1.ActiveSheetView.GroupBarHeight = 50
FpSpread1.ActiveSheetView.GroupMaximumLevel = 5
FpSpread1.ActiveSheetView.AllowGroup = True
Dim gi As New FarPoint.Web.Spread.GroupInfo
gi.BackColor = Color.Yellow
Dim gi2 As New FarPoint.Web.Spread.GroupInfo
gi2.BackColor = Color.Green
Dim gic As New FarPoint.Web.Spread.GroupInfoCollection()
gic.Add(gi)
FpSpread1.ActiveSheetView.GroupInfos.Add(gic(0))
```

## Using the Spread Designer

1. Select the **Settings** menu.
2. Select the **Group** icon in the **Other Settings** section.
3. Set the various properties.
4. Click **OK** to close the dialog.
5. Use the **View** menu to show or hide the group bar.
6. Click **Apply and Exit** to close the Spread Designer.

## See Also

[GroupInfoCollection Class](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.GroupInfoCollection.html)