Introduction

Aspose.Grid.Web has its own default look & feel but there might be several occasions when developers would like to change its appearance according their own needs. To facilitate this feature, Aspose.Grid.Web provides a lot of properties to let developers fully control its appearance style. In this topic, we will discuss few of those properties.

 

Setting Style or Appearance of Aspose.Grid.Web

 

Preset Styles

To save the efforts of developers, Aspose.Grid.Web offers some pre-defined styles, which are called Preset Styles. Developers can simply select a style from the list of these styles, which include the following:

Styles	Color Scheme
Standard	Silver
Colorful1	Rose
Colorful2	Blue
Professional1	Cyan
Professional2	Cyan again
Traditional1	Dark
Traditional2	Gray
Custom	Customized

 

When a particular style is selected, it changes the whole appearance of the GridWeb control. Developers can select a Preset Style to be applied on Grid during design time but this task can also be accomplished at runtime using the flexible API of Aspose.Grid.Web.

NOTE: Aspose.Grid.Web control is represented by GridWeb class.

To select a Preset Style for the GridWeb control, please follow the steps below:

• Add Aspose.Grid.Web control to your Web Form
• Select a Preset Style to be applied on the control

NOTE: GridWeb control provides PresetStyle property to which developers can assign any desired Preset Style.

Example:

[C#]

 

 

//Applying Colorful1 style on the GridWeb control

GridWeb1.PresetStyle = PresetStyle.Colorful1;

 

 

[VB.NET]

 

 

'Applying Colorful1 style on the GridWeb control

GridWeb1.PresetStyle = PresetStyle.Colorful1

 

The output of above code snippet is displayed in the figure shown below:

 

 

Figure: GridWeb control with Colorful1 style applied on it

 

Header Bar Style

If you take a look at the GridWeb control, you would notice two header bars. One for columns (that is A, B, C, D etc.) and other for rows (that is 1, 2, 3, 4 etc.). Aspose.Grid.Web allows developers to control the appearance of these header bars. Developers may set the style of header bars either at design time or runtime.

NOTE: GridWeb control provides HeaderBarStyle property that applies style on both header bars of the control.

Example:

[C#]

 

 

//Setting the background color of the header bars

GridWeb1.HeaderBarStyle.BackColor=Color.Brown;

 

 

//Setting the foreground color of the header bars

GridWeb1.HeaderBarStyle.ForeColor=Color.Yellow;

 

 

//Setting the font of the header bars to bold

GridWeb1.HeaderBarStyle.Font.Bold=true;

 

 

//Setting the font name to "Century Gothic"

GridWeb1.HeaderBarStyle.Font.Name="Century Gothic";

 

 

//Setting the border width to 2 points

GridWeb1.HeaderBarStyle.BorderWidth = new Unit(2, UnitType.Point);

 

 

[VB.NET]

 

 

'Setting the background color of the header bars

GridWeb1.HeaderBarStyle.BackColor=Color.Brown

 

 

'Setting the foreground color of the header bars

GridWeb1.HeaderBarStyle.ForeColor=Color.Yellow

 

 

'Setting the font of the header bars to bold

GridWeb1.HeaderBarStyle.Font.Bold=True

 

 

'Setting the font name to "Century Gothic"

GridWeb1.HeaderBarStyle.Font.Name="Century Gothic"

 

 

'Setting the border width to 2 points

GridWeb1.HeaderBarStyle.BorderWidth = New Unit(2, UnitType.Point)

 

The output of above code snippet is displayed in the figure shown below:

 

 

Figure: Modified style of Header Bar

 

Tab Bar Style

At the bottom of the GridWeb control, you can see tabs like Sheet1, Sheet2 etc. Using Aspose.Grid.Web, it's possible to control the look & feel of these tabs. There are always two types of tabs. One that is selected and other which is not selected. To control the style of any active tab (that is focused tab), developers can use ActiveTabStyle property of GridWeb control. However, the style of remaining non-active tabs can be customized using TabStyle property.

Example:

[C#]

 

 

//Setting the background color of tabs to Yellow

GridWeb1.TabStyle.BackColor=Color.Yellow;

 

 

//Setting the foreground color of tabs to Blue

GridWeb1.TabStyle.ForeColor=Color.Blue;

 

 

//Setting the background color of active tab to Blue

GridWeb1.ActiveTabStyle.BackColor=Color.Blue;

 

 

//Setting the foreground color of active tab to Yellow

GridWeb1.ActiveTabStyle.ForeColor=Color.Yellow;

 

 

[VB.NET]

 

 

'Setting the background color of tabs to Yellow

GridWeb1.TabStyle.BackColor=Color.Yellow

 

 

'Setting the foreground color of tabs to Blue

GridWeb1.TabStyle.ForeColor=Color.Blue

 

 

'Setting the background color of active tab to Blue

GridWeb1.ActiveTabStyle.BackColor=Color.Blue

 

 

'Setting the foreground color of active tab to Yellow

GridWeb1.ActiveTabStyle.ForeColor=Color.Yellow

 

The output of above code snippet is displayed in the figure shown below:

 

 

Figure: Modified styles of Active & Non-Active Tab Bars

 

In the above figure, you can see that Sheet4 is an Active Tab so, it's appearance style is different from other Non-Active Tabs as we defined in our example code snippet.

 

Reusable Customized Style File

Aspose.Grid.Web also supports to persist its appearance or style settings to a file. When you have set all the appearance properties of the GridWeb control, you may save these properties or settings to a disk file. This approach is very useful for developers to save their time and efforts by re-using their old style configurations from a style file instead of setting all style (or appearance) properties of the control one by one.

 

Saving Style File

Once you have finished setting style properties, you can save your style configuration settings in the form of an XML file (it is because that Style file is stored as an XML file) by calling SaveCustomStyleFile method of the GridWeb control.

Example:

[C#]

 

 

//Setting the background color of the header bars

GridWeb1.HeaderBarStyle.BackColor=Color.Brown;

 

 

//Setting the foreground color of the header bars

GridWeb1.HeaderBarStyle.ForeColor=Color.Yellow;

 

 

//Setting the font of the header bars to bold

GridWeb1.HeaderBarStyle.Font.Bold=true;

 

 

//Setting the font name to "Century Gothic"

GridWeb1.HeaderBarStyle.Font.Name="Century Gothic";

 

 

//Setting the border width to 2 points

GridWeb1.HeaderBarStyle.BorderWidth = new Unit(2, UnitType.Point);

 

 

//Setting the background color of tabs to Yellow

GridWeb1.TabStyle.BackColor=Color.Yellow;

 

 

//Setting the foreground color of tabs to Blue

GridWeb1.TabStyle.ForeColor=Color.Blue;

 

 

//Setting the background color of active tab to Blue

GridWeb1.ActiveTabStyle.BackColor=Color.Blue;

 

 

//Setting the foreground color of active tab to Yellow

GridWeb1.ActiveTabStyle.ForeColor=Color.Yellow;

 

 

//Saving style information to an XML file

GridWeb1.SaveCustomStyleFile("d:\\style1.xml");

 

 

[VB.NET]

 

 

'Setting the background color of the header bars

GridWeb1.HeaderBarStyle.BackColor=Color.Brown

 

 

'Setting the foreground color of the header bars

GridWeb1.HeaderBarStyle.ForeColor=Color.Yellow

 

 

'Setting the font of the header bars to bold

GridWeb1.HeaderBarStyle.Font.Bold=True

 

 

'Setting the font name to "Century Gothic"

GridWeb1.HeaderBarStyle.Font.Name="Century Gothic"

 

 

'Setting the border width to 2 points

GridWeb1.HeaderBarStyle.BorderWidth = New Unit(2, UnitType.Point)

 

 

'Setting the background color of tabs to Yellow

GridWeb1.TabStyle.BackColor=Color.Yellow

 

 

'Setting the foreground color of tabs to Blue

GridWeb1.TabStyle.ForeColor=Color.Blue

 

 

'Setting the background color of active tab to Blue

GridWeb1.ActiveTabStyle.BackColor=Color.Blue

 

 

'Setting the foreground color of active tab to Yellow

GridWeb1.ActiveTabStyle.ForeColor=Color.Yellow

 

 

'Saving style information to an XML file

GridWeb1.SaveCustomStyleFile("d:\\style1.xml")

 

NOTE: The saved style file is in XML format so, developers may also edit this file with any text editor, if desired.

 

Loading Style File

To apply style settings from an existing style file to GridWeb control, developers can set the path of style file to CustomStyleFileName property of the control. But, before doing that it is must to set the PresetStyle property of control to Custom. It is because that style file contains custom style information that is already defined by a developer.

NOTE: It is also possible to load or save style file using Aspose.Grid.Web Designer.

Example:

[C#]

 

 

//Setting the PresetStyle of the control to Custom

GridWeb1.PresetStyle = PresetStyle.Custom;

 

 

//Setting the path of style file to load style information from this file to the control

GridWeb1.CustomStyleFileName = "d:\\style1.xml";

 

 

[VB.NET]

 

 

'Setting the PresetStyle of the control to Custom

GridWeb1.PresetStyle = PresetStyle.Custom