# Customizing the Group Bar

You can customize the appearance of the group bar at the top of the grouping display using Spread for ASP.NET.

## Content

You can customize the appearance of the group bar at the top of the grouping display and you can hide or display the grouping bar at the top of the sheet. The properties on the sheet ([SheetView](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.html) object) include:

| **SheetView Property** | **Description** |
| ------------------ | ----------- |
| [GroupBarBackColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.GroupBarBackColor.html) | Set the background color of the grouping bar |
| [GroupBarHeight](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.GroupBarHeight.html) | Set the height of the grouping bar |
| [GroupBarVisible](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.GroupBarVisible.html) | Set whether to display the grouping bar |
| [GroupMaximumLevel](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.GroupMaximumLevel.html) | Set the maximum number of levels of grouping allowed |

## 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.