Customize Grid Details View

To customize the Grid Details View, search for Web Grid where id="WebGrid1". It uses two stylesheets which are in the following path:

[AVEVA Work Tasks Installed Path]\AVEVA\Work Tasks\BPMUITemplates\Default\Common\StyleSheet\Global.css

The following can be customized in the Grid Details View:

• Changing Header Style and Background Image

• Changing the color of the selected row style

• Changing the background color of the Frame

• Changing footer style of the Grid Details View

To change Header Style

To change the Header style of the Grid Details View, follow the steps given below:

• Open the Global.css file. You can find it at the following location:

[AVEVA Work Tasks Installed Path]\AVEVA\Work Tasks\BPMUITemplates\Default\Common\StyleSheet\Global.css

• To change the background image of the header, change the attribute BackgroundImage in the Css Class GridHeaderStyle tag.

  <HeaderStyle Wrap="false" Overflow="hidden" OverflowX="hidden" OverflowY="hidden" CssClass="GridHeaderStyle"></HeaderStyle>

  .GridHeaderStyle

  {

  font-size:8pt;

  font-family:"Segoe UI", "Trebuchet MS";

  border-color:#e1e1e1;

  border-style:solid;

  color:#363636;

  background-image:url(../images/grid-title-bg.png);

  height:20px;

  background-color:#e3efff;

  border-width:1px;

  }

• Header color can be altered by making change in the GridHeaderStyle class in the Global.css file.

  GridHeaderStyle

  {

  font-size:8pt;

  font-family:"Segoe UI", "Trebuchet MS";

  border-color:#e1e1e1;

  border-style:solid;

  color:Red;

  background-image:url(../images/grid-title-bg.png);

  height:20px;

  background-color:#e3efff;

  border-width:1px;

  }

Changing the color of the selected row style

• To alter the color of the selected row style, you need to make change in the SelectedRowStyle tag.

• Change the color attributes in the class GridSelectedRowStyle in the Global.css file.

  <SelectedRowStyle CssClass="GridSelectedRowStyle"></SelectedRowStyle>

  .GridSelectedRowStyle {

  border-width:1px;

  font-family:"Segoe UI", "Trebuchet MS";

  font-size:8pt;

  border-style:solid;

  background-color:#e1eeff;

  border-color:#ACA899;

  color:#363636;

  }

   

Changing the background color of the Frame

• To change the background color of the frame, change the attribute of colors in the GridFrameStyle class in Global.Css file.

  <FrameStyle GradientType="Vertical" CssClass="GridFrameStyle"></FrameStyle>

  .GridFrameStyle{

  font-size:8pt;

  font-family:"Segoe UI", "Trebuchet MS";

  color:#363636;

  border-style:solid;

  border-width:1px;

  border-color:#9ac6ff;

  background-color:#FFFFFF;

  }

Changing the footer style of the Grid Details View

• We can change the color of the Status bar by changing the CSSClass GridStatusBarStyle.

  .GridStatusBarStyle

  {

  font-size:8pt;

  font-family:"Segoe UI", "Trebuchet MS";

  color:#363636;

  background-color:#e4e4e4;

  border-width:1px;

  border-style:solid;

  border-color:#ACA899;

  }

• Change the color attributes in the GridStatusBarStyle CSSClass in the Global.Css file..

  <StatusBarStyle CssClass="GridStatusBarStyle">

  <Padding Top="2px" Left="2px" Bottom="2px" Right="2px"></Padding>

  </StatusBarStyle>