# Customizing the Graphical Interface

This topic illustrates how you can customize the graphical user interface of the Spread component by using your own graphics for certain parts of the interface.

## Content

You can customize the graphical user interface of the component by using your own graphics for certain parts of the interface. You can customize these aspects of the component:

* Sort indicator that is displayed in the column header
* Expand and collapse icons in the hierarchical display
* Icons in the filter bar

The following image displays custom icons in the hierarchical display.

![SetImage](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/setimage.png)

To display or hide the sort indicator, use the [SortIndicator](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Model.SortIndicator.html) enumeration settings and the [SortIndicator](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Column.SortIndicator.html) property of the [Column](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Column.html) class.
Use the [GetImage](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.GetImage.html) method and [SetImage](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.SetImage.html) method in the [FpSpread](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.html) component to work with the image. Use the [SpreadImages](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SpreadImages.html) enumeration to specify the images to customize.
You can also manage whether users can expand rows to see child views. For more information, refer to [Handling Row Expansion](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-databound/spweb-dbrowexpand).
For more information on sorting, refer to [Customizing Sorting of Rows of User Data](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-sorting).

## Using Code

You can use the [SetImage](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.SetImage.html) method to add your own image to the control. Specify which image to replace and the URL of the image with this method.

## Example

The following example uses the [SetImage](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.SetImage.html) method with a control that has been bound to a hierarchical data set.

```csharp
System.Data.DataSet ds = new System.Data.DataSet();
DataTable name;
DataTable city;
name = ds.Tables.Add("Customers");
name.Columns.AddRange(new DataColumn[] {new DataColumn("LastName", typeof(string)), new DataColumn("FirstName", typeof(string)), new DataColumn("ID", typeof(Int32))});
name.Rows.Add(new object[] {"Fielding", "William", 0});
name.Rows.Add(new object[] {"Williams", "Arthur", 1});
name.Rows.Add(new object[] {"Zuchini", "Theodore", 2});
city = ds.Tables.Add("City/State");
city.Columns.AddRange(new DataColumn[] {new DataColumn("City", typeof(string)), new DataColumn("Owner", typeof(Int32)), new DataColumn("State", typeof(string))});
city.Rows.Add(new object[] {"Atlanta", 0, "Georgia"});
city.Rows.Add(new object[] {"Boston", 1, "Mass."});
city.Rows.Add(new object[] {"Tampa", 2, "Fla."});
ds.Relations.Add("City/State", name.Columns["ID"], city.Columns["Owner"]);
FpSpread1.DataSource = ds;
FpSpread1.SetImage(FarPoint.Web.Spread.SpreadImages.Expand, "icon1.ico");
FpSpread1.SetImage(FarPoint.Web.Spread.SpreadImages.Collapse, "icon2.ico");
```

```vbnet
Dim ds As New System.Data.DataSet
Dim name As DataTable
Dim city As DataTable
name = ds.Tables.Add("Customers")
name.Columns.AddRange(New DataColumn() {New DataColumn("LastName", Type.GetType("System.String")), New DataColumn("FirstName", Type.GetType("System.String")), New DataColumn("ID", Type.GetType("System.Int32"))})
name.Rows.Add(New Object() {"Fielding", "William", 0})
name.Rows.Add(New Object() {"Williams", "Arthur", 1})
name.Rows.Add(New Object() {"Zuchini", "Theodore", 2})
city = ds.Tables.Add("City/State")
city.Columns.AddRange(New DataColumn() {New DataColumn("City", Type.GetType("System.String")), New DataColumn("Owner", Type.GetType("System.Int32")), New DataColumn("State", Type.GetType("System.String"))})
city.Rows.Add(New Object() {"Atlanta", 0, "Georgia"})
city.Rows.Add(New Object() {"Boston", 1, "Mass."})
city.Rows.Add(New Object() {"Tampa", 2, "Fla."})
ds.Relations.Add("City/State", name.Columns("ID"), city.Columns("Owner"))
FpSpread1.DataSource = ds
FpSpread1.SetImage(FarPoint.Web.Spread.SpreadImages.Expand, "icon1.ico")
FpSpread1.SetImage(FarPoint.Web.Spread.SpreadImages.Collapse, "icon2.ico")
```

## See Also

[SpreadImages Enumeration](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SpreadImages.html)
[Using the Filter Bar](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interactfiltermanage/spweb-interactfilterbar)