Data Grid Properties (dataGridProperties)

dataGridProperties: {
 altRowFill: 'string'
                           }

where:

altRowFill: 'string'

Defines a background to fill alternating rows of the data grid.

Can be one of the following.

• undefined. This is the default value.
• A string that defines a single color, for example, 'red'.
• A string that defines an array of colors, for example, ['red','green'].

The dataGridProperties:cell:layout properties format the width and height of the data cells in the grid.

dataGridProperties:
{
cell: { 
  layout: { 
    width: {width    }, 
    height: {height  } 
      }
          } 
 }

where:

width: width

Defines the width of the cells in the grid. If undefined, the grid will be sized to completely fill the available space. Can be:

• A number of pixels.
• A rule and value pair in the following form.

  {rule: 'string', value: number} 

  where:

  rule: 'string'

  Is one of the following.

  • 'exactSize', which makes each cell exactly the size specified by n
  • 'minSize', which makes each cell at least the size specified by n
  • 'maxSize', which makes each cell at most the size specified by n

  The default value is {rule: 'maxSize', value: 300}

  value: number

  Is a number of pixels.

height: height

Defines the height of the cells in the grid. If undefined, the grid will be sized to completely fill the available space. Can be:

• A number of pixels.
• A rule and value pair in the following form.

  {rule: 'string', value: number} 

  where:

  rule: 'string'

  Is one of the following.

  • 'exactSize', which makes each cell exactly the size specified by n
  • 'minSize', which makes each cell at least the size specified by n
  • 'maxSize', which makes each cell at most the size specified by n

  The default value is {rule: 'maxSize', value: 500}

  value: number

  Is a number of pixels.

Inner grid lines are the divider lines between inner cells and the right (for horizontal grid lines) or bottom (for vertical grid lines) edge of the grid.

dataGridProperties: {
 cell:{
  innerGridLines: { 
   horizontal: {
    width: number,
    color: 'string',
    dash: 'string'
              }, 
   vertical: {
    width: number,
    color: 'string',
    dash: 'string'
               }
                 }
       }
                            }

where:

width: number

Is a number of pixels that defines the width of the horizontal inner grid lines. The default value is 1.

color: 'string'

Is a string that defines the color of the horizontal inner grid lines. The default value is '#E0E0E0'.

dash: 'string'

Is a string that defines the dash style of the horizontal inner grid lines. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

Multiple dashes can be defined within the dash string (for example, '2 4 4 2'), in which case, the dash types will alternate along the inner grid lines.

width: number

Is a number of pixels that defines the width of the vertical inner grid lines. The default value is 1.

color: 'string'

Is a string that defines the color of the vertical inner grid lines. The default value is '#EEEEEE''.

dash: 'string'

Is a string that defines the dash style of the vertical inner grid lines. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

Multiple dashes can be defined within the dash string (for example, '2 4 4 2'), in which case, the dash types will alternate along the inner grid lines.

The dataGrid:cell:labels properties format the values and tooltips in the grid cells. In order to override default tooltips, you must use a *GRAPH_JS_FINAL block in the WebFOCUS StyleSheet. For more information, see WebFOCUS Chart Attribute Syntax.

dataGrid:{
cell{
labels: {
   font: 'string',
   color: 'string',
   numberFormat: 'string',
   align: 'string',
   valign: 'string'
  },
  tooltip: 'string',
  formatList: [
   {row: number, col: number, repeat: number, 
      color: 'string',
     labels: {font: 'string', color: 'string'}} ... 
   ]
 }
 }
 }

where:

font: 'string'

Is a string that defines the font attributes for the cell labels. The default value is '10pt Sans-Serif'.

color: 'string'

Is a string that defines the color of the cell labels. The default value is 'rgb(20, 20, 20)'.

numberFormat: 'string'

Is a number format for the cell labels. The default is 'auto'. For information about number formats, see Introduction to JSON Properties for HTML5 Charts.

align: 'string'

Is a string that defines the horizontal alignment for the cell labels. The default value is 'right'.

valign: 'string'

Is a string that defines the vertical alignment for the cell labels. The default value is 'top'.

tooltip: 'string'

Is a custom tooltip for the cell label. A custom tooltip requires that the properties be in a *GRAPH_JS_FINAL block in the WebFOCUS StyleSheet. For information, see WebFOCUS Chart Attribute Syntax.

formatList

Is an array of formats for specific cells that you want to format differently from other cells. A formatList requires that the properties be in a *GRAPH_JS_FINAL block in the WebFOCUS StyleSheet. For information, see WebFOCUS Chart Attribute Syntax. You can use the following properties for each element in the array.

row:number

Is a row number.

col:number

Is a column number.

repeat:number

Is an increment. After the first row and/or column to use the format, the increment will be added to format additional cells with this format.

color: 'string'

Is a string that defines the fill color for the specified cells.

font: 'string'

Is a string that defines the font attributes for the specified cells.

color: 'string'

Is a string that defines the color for the labels in the specified cells.

dataGridProperties:{
rowHeader: {
  fill: 'string',
          }
                      }

where:

fill: 'string'

Is a string that defines the fill color for the row header cells. The default value is '#FAFAFA'.

dataGridProperties:{
rowHeader: {
  border: {
   width: number,
   color: 'string',
   dash: 'string'
  },
  }
}

where:

width: number

Is a number that defines the row header border width, in pixels. The default value is 1.

color: 'string'

Is a string that defines the row header border color. The default value is '#D0D0D0'.

dash: 'string'

Is a string that defines the dash style of the row header border. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

The row header inner grid lines are the lines between the rows and columns in the row header.

dataGridProperties:{
rowHeader: {
    innerGridLines: {
   horizontal: {
    width: number,
    color: 'string',
    dash: 'string'
               }, 
   vertical: {
    width: number,
    color: 'string',
    dash: 'string'
             }
                      }
           }
                                          }  

where:

width: number

Is a number that defines the width of the row header horizontal inner grid lines, in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of the row header horizontal inner grid lines. The default value is '#D8D8D8'.

dash: 'string'

Is a string that defines the dash style of the row header horizontal inner grid lines. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

width: number

Is a number that defines the width of the row header vertical inner grid lines, in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of the row header vertical inner grid lines. The default value is '#E0E0E0'.

dash: 'string'

Is a string that defines the dash style of the row header vertical inner grid lines. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

The row header divider line in a data grid is the line between the row header and the grid body cells.

dataGridProperties:{
rowHeader: {
    dividerLine: {
   width: number,
   color: 'string',
   dash: 'string'
                 },
            }
                       }

where:

width: number

Is a number that defines the width of the row header divider line, in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of the row header divider line. The default value is '#D0D0D0'.

dash: 'string'

Is a string that defines the dash style of the row header divider line. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

Row header titles, by default, are defined in the Master File or the request. In order to override the default titles and tooltips, the properties must be included in a *GRAPH_JS_FINAL block in the WebFOCUS StyleSheet. For information, see WebFOCUS Chart Attribute Syntax.

dataGridProperties:{
rowHeader: {
   title: {
   text: ['string',...], 
   font: 'string',
   color: 'string',
   align: 'string',
   valign: 'string',
   tooltip: 'string',
   dividerLine: {
    width: number,
    color: 'string',
    dash: 'string'
   }
  },
    }
 }
}

where:

text: ['string',...]

Defines the row header title text. It can be a single string or an array of strings. Nested row titles are not supported. The default row header title is the AS name from the request or the field name or title from the Master File. Changing the row header titles requires that the properties be in a *GRAPH_JS_FINAL block in the WebFOCUS StyleSheet. For information, see WebFOCUS Chart Attribute Syntax.

font: 'string'

Is a string that defines the font attributes for the row header titles. The default value is 'bold 10pt Sans-Serif'.

color: 'string'

Is a string that defines the color of the row header titles. The default value is 'rgb(20, 20, 20)'.

align: 'string'

Is a string that defines the horizontal alignment for the row header titles. The default value is 'left'.

valign: 'string'

Is a string that defines the vertical alignment for the row header titles. The default value is 'top'.

tooltip: 'string'

Defines a tooltip for the row header titles. The default value is undefined. Changing the row header titles requires that the properties be in a *GRAPH_JS_FINAL block in the WebFOCUS StyleSheet. For information, see WebFOCUS Chart Attribute Syntax. For information about creating custom tooltips using callback functions, see Introduction to JSON Properties for HTML5 Charts.

width: number

Is a number that defines the width of the row header title divider line, in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of the row header title divider line. The default value is '#D0D0D0'.

dash: 'string'

Is a string that defines the dash style of the row header title divider line. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

The row header labels in a data grid are the sort field values for each BY field assigned to the row attribute category. You can format the font, color, horizontal and vertical alignment, and content of the labels. You can also specify whether to merge consecutive labels with the same content or keep them separate.

dataGridProperties:{
 rowHeader: {
  labels: {
    font: 'string',
    color: 'string',
    align: 'string',
    valign: 'string',
    mergeMatching: boolean, 
   content: ['string',...] 
  }
 }
}

where:

font: 'string'

Is a string that defines the font attributes of the row header labels. The default value is '10pt Sans-Serif'.

color: 'string'

Is a string that defines the color of the row header labels. The default value is 'rgb(20, 20, 20)'.

align: 'string'

Is a string that defines the horizontal alignment of the row header labels. The default value is 'left'.

valign: 'string'

Is a string that defines the vertical alignment of the row header labels. The default value is 'top'.

mergeMatching: boolean

Defines whether to repeat consecutive duplicate labels on each row or merge them. Valid values are:

• true, which merges consecutive duplicate row header labels. This is the default value.
• false, which repeats duplicate row header labels.

content: ['string',...]

Defines the row header labels. It can be a single string, an array of strings, or an array of nested objects whose leaves are arrays of strings.

Note: If you replace the labels, your arrays of labels will be applied to the incoming data as you define them, without regard to the actual structure of the row header label arrays.

If you enable column header sorting, up and down arrows display in the last row of each column header cell. Clicking the up arrow sorts the grid output in ascending order, and clicking the down arrow sorts the grid in descending order, of the data values in that column.

dataGridProperties:{
colHeader: {
  sorting: {
   enabled: boolean  
          }
            }   
                      }

where:

enabled: boolean

Enables or disables column header sorting. Valid values are:

• true, which enables sorting the grid interactively based on a column.
• false, which disables interactive grid sorting. This is the default value.

If you enable column resizing in a data grid, the user can drag the left edge of a column to resize it.

dataGridProperties:{
colHeader: {
  resize: {
   enabled: boolean  
          }
            }   
                      }

where:

enabled: boolean

Enables or disables column resizing. Valid values are:

• true, which enables resizing the grid columns.
• false, which disables resizing the grid column. This is the default value.

dataGridProperties:{
colHeader: {
  fill: 'string',
          }
                      }

where:

fill: 'string'

Is a string that defines the fill color for the column header cells. The default value is '#FAFAFA'.

dataGridProperties:{
colHeader: {
  border: {
   width: number,
   color: 'string',
   dash: 'string'
  },
  }
}

where:

width: number

Is a number that defines the column header border width, in pixels. The default value is 1.

color: 'string'

Is a string that defines the column header border color. The default value is '#D0D0D0'.

dash: 'string'

Is a string that defines the dash style of the column header border. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

The column header inner grid lines are the lines between the rows and columns in the column header.

dataGridProperties:{
colHeader: {
    innerGridLines: {
   horizontal: {
    width: number,
    color: 'string',
    dash: 'string'
               }, 
   vertical: {
    width: number,
    color: 'string',
    dash: 'string'
             }
                      }
           }
                                          }  

where:

width: number

Is a number that defines the width of the column header horizontal inner grid lines, in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of the column header horizontal inner grid lines. The default value is '#E0E0E0'.

dash: 'string'

Is a string that defines the dash style of the column header horizontal inner grid lines. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

width: number

Is a number that defines the width of the column header vertical inner grid lines, in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of the column header vertical inner grid lines. The default value is '#ECECEC'.

dash: 'string'

Is a string that defines the dash style of the column header vertical inner grid lines. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

The column header divider line in a data grid is the line between the column header and the grid body cells.

dataGridProperties:{
colHeader: {
    dividerLine: {
   width: number,
   color: 'string',
   dash: 'string'
                 },
            }
                       }

where:

width: number

Is a number that defines the width of the column header divider line, in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of the column header divider line. The default value is '#D0D0D0'.

dash: 'string'

Is a string that defines the dash style of the column header divider line. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

Column header titles, by default, are defined in the Master File or the request. In order to override the default titles and tooltips, the properties must be included in a *GRAPH_JS_FINAL block in the WebFOCUS StyleSheet. For information, see WebFOCUS Chart Attribute Syntax.

dataGridProperties:{
colHeader: {
   title: {
   text: ['string',...], 
   font: 'string',
   color: 'string',
   align: 'string',
   valign: 'string',
   tooltip: 'string',
   dividerLine: {
    width: number,
    color: 'string',
    dash: 'string'
   }
  },
    }
 }
}

where:

colHeader:

Defines the properties of the data grid column header.

text: ['string',...]

Defines the column header title text. It can be a single string or an array of strings. Nested column titles are not supported. The default column header title is the field name or title from the Master File or the AS name from the request. Changing the row header titles requires that the properties be in a *GRAPH_JS_FINAL block in the WebFOCUS StyleSheet. For information, see WebFOCUS Chart Attribute Syntax.

font: 'string'

Is a string that defines the font attributes for the column header titles. The default value is 'bold 10pt Sans-Serif'.

color: 'string'

Is a string that defines the color of the column header titles. The default value is 'rgb(20, 20, 20)'.

align: 'string'

Is a string that defines the horizontal alignment for the column header titles. The default value is 'right'.

valign: 'string'

Is a string that defines the vertical alignment for the column header titles. The default value is 'top'.

tooltip: 'string'

Defines a tooltip for the column header titles. The default value is undefined. Changing the column header tooltip requires that the properties be in a *GRAPH_JS_FINAL block in the WebFOCUS StyleSheet. For information, see WebFOCUS Chart Attribute Syntax. For information about creating custom tooltips using callback functions, see Introduction to JSON Properties for HTML5 Charts

dividerLIne:

Defines the properties of the column header title divider line.

width: number

Is a number that defines the width of the column header title divider line in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of the column header title divider line. The default value is '#EEEEEE'.

dash: 'string'

Is a string that defines the dash style of the column header title divider line. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

The column header labels in a data grid are the sort field values for each BY field assigned to the column attribute category. You can format the font, color, horizontal and vertical alignment, and content of the labels. You can also specify whether to merge consecutive labels with the same content or keep them separate.

dataGridProperties:{
 colHeader: {
  labels: {
    font: 'string',
    color: 'string',
    align: 'string',
    valign: 'string',
    mergeMatching: boolean, 
   content: ['string',...] 
  }
 }
}

where:

font: 'string'

Is a string that defines the font attributes of the column header labels. The default value is '10pt Sans-Serif'.

color: 'string'

Is a string that defines the color of the column header labels. The default value is 'rgb(20, 20, 20)'.

align: 'string'

Is a string that defines the horizontal alignment of the column header labels. The default value is 'center'.

valign: 'string'

Is a string that defines the vertical alignment of the column header labels. The default value is 'top'.

mergeMatching: boolean

Defines whether to repeat duplicate consecutive labels on each column or merge them. Valid values are:

• true, which merges duplicate column header labels. This is the default value.
• false, which repeats duplicate row header labels.

content: ['string',...]

Defines the column header labels. Can be a single string, an array of strings, or an array of nested objects whose leaves are arrays of strings. You must account for the last row of the column header (the row that contains the column titles for the measure fields) in your arrays.

Note: If you replace the labels, your arrays of labels will be applied to the incoming data as you define them, without regard to the actual structure of the column header label arrays.

The last row of column header labels is the row that corresponds to the measure field column titles in the data grid. Using the dataGridProperties:colHeader:lastLabels properties, you can apply formatting to these labels.

dataGridProperties:{
 colHeader: {
  labels: {
    font: 'string',
    color: 'string',
    align: 'string',
    valign: 'string',
        }
           }
               }

where:

font: 'string'

Is a string that defines the font attributes of the last row of column header labels. The default value is '10pt Sans-Serif'.

color: 'string'

Is a string that defines the color of the last row of column header labels. The default value is 'rgb(20, 20, 20)'.

align: 'string'

Is a string that defines the horizontal alignment of the last row of column header labels. The default value is 'right'.

valign: 'string'

Is a string that defines the vertical alignment of the last row of column header labels. The default value is 'center'.

dataGridProperties:
{
columnTotals: {
  visible: boolean,
  calculation: 'string', 
  headerLabel: {
   text: 'string',
   font: 'string',
   color: 'string',
   align: 'string',
   valign: 'string'
  },
  cellLabel: {
   font: 'string',
   color: 'string',
   align: 'string',
   valign: 'string'
  },
  border: {
   width: number,
   color: 'string',
   dash: 'string'
  },
  dividerLine: {
   width: number,
   color: 'string',
   dash: 'string'
  }
 }
}

where:

visible: boolean

Controls whether column totals display on the data grid. Valid values are:

• true, which displays column totals.
• false, which does not display column totals. This is the default value.

calculation: 'string'

Controls how the column totals are calculated. Valid values are

• 'sum', which adds the values in each column to produce the column total. This is the default value.
• 'min', which calculates the minimum value in each column to produce the column total.
• 'max', which calculates the maximum value in each column to produce the column total.
• 'mean', which averages the values in each column to produce the column total.

headerLabel:

Defines the properties of the header label for the column total row.

text: 'string'

Is a string that defines the header label for the column total row. The default value is 'TOTAL'.

font: 'string'

Is a string that defines the font attributes for the column total header label. The default value is 'bold 10pt Sans-Serif'.

color: 'string'

Is a string that defines the color of the column total header label. The default value is 'rgb(20, 20, 20)'.

align: 'string'

Is a string that defines the horizontal alignment of the column total header label. The default value is 'left'.

valign: 'string'

Is a string that defines the vertical alignment of the column total header label. The default value is 'center'.

cellLabel:

Defines the properties of the cells in the column total row.

font: 'string'

Is a string that defines the font attributes of the values in the cells of the column total row. the default value is 'bold 10pt Sans-Serif'.

color: 'string'

Is a string that defines the color of the values in the cells of the column total row. The default value is 'rgb(20, 20, 20)'.

align: 'string'

Is a string that defines the horizontal alignment of the values in the cells of the column total row. The default value is 'right'.

valign: 'string'

Is a string that defines the vertical alignment of the values in the cells of the column total row. The default value is 'top'.

border:

Defines the properties of the border around the bottom and sides of the column total row.

width: number

Is a number that defines the width of the border around the bottom and sides of the column total row, in pixels. The default value is 1.

color: 'string'

Is a string that defines the color of the border around the bottom and sides of the column total row. The default value is '#D0D0D0'.

dash: 'string'

Is a string that defines the dash style of the border around the bottom and sides of the column total row. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

dividerLine:

Defines the properties of the divider line above the column total row.

width: number

Is a number that defines the width of the divider line on top of the column total row, in pixels. The default value is 2.

color: 'string'

Is a string that defines the color of the divider line on top of the column total row. The default value is '#D0D0D0'.

dash: 'string'

Is a string that defines the dash style of the divider line on top of the column total row. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

dataGridProperties: {
scroll: {
  enabled: boolean,
  freezeRowHeader: boolean,
  freezeColHeader: boolean,
  size: number,
  color: 'string',
  handle: {
   color: 'string',
   hoverColor: 'string',
   border: {
    width: number, 
    color: 'string',
    dash: 'string'
           }
          }
        }
               }

where:

enabled: boolean

Enables or disables scroll bars on a data grid. Valid values are:

• true, which enables scroll bars. This is the default value.
• false, which disables scroll bars.

freezeRowHeader: boolean

Defines whether to freeze or scroll the row header on a data grid. Valid values are:

• true, which freezes the row header. This is the default value.
• false, which scrolls the row header.

freezeColHeader: boolean

Defines whether to freeze or scroll the column header on a data grid. Valid values are:

• true, which freezes the column header. This is the default value.
• false, which scrolls the column header.

size: number

Is a number that defines the height of the scroll bars, in pixels. The default value is 15.

color: 'string'

Is a string that defines the color of the scroll bars. The default value is 'rgb(240, 240, 240)'.

handle:

Defines the properties of the scroll bar handle.

color: 'string'

Is a string that defines the color of the scroll bar handles (the pieces you drag in order to scroll the data grid). The default value is '#C2C2C2'.

hoverColor: 'string'

Is a string that defines the color of a scroll bar handle when the mouse hovers over it. The default value is '#A8A8A8'.

border:

Defines the properties of the scroll bar handle border.

width: number

Is a number that defines the width of the scroll bar handle border, in pixels. The default value is zero (0).

color: 'string'

Is a string that defines the color of the scroll bar handle border. The default value is 'transparent'.

dash: 'string'

Is a string that defines the dash style of the scroll bar handle border. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).