# Class RowColumnDefinition

GoJS® Diagramming Components
version 3.0.7
by Northwoods Software®

The RowColumnDefinition class describes constraints on a row or a column in a Panel of type "Table". It also provides information about the actual layout after the Table Panel has been arranged.

#####
Index

### Constructors

constructor

### Accessors

actual
alignment
background
coversSeparators
height
index
isRow
maximum
minimum
panel
position
separatorDashArray
separatorPadding
separatorStroke
separatorStrokeWidth
sizing
stretch
total
width

### Methods

bind
bindTwoWay
theme
themeData
themeModel
themeObject

### Properties

Default
None
ProportionalExtra

## Constructors

### constructor

- new RowColumnDefinition(init?: Partial<RowColumnDefinition & {
  column?: number;
  row?: number;
  }>): RowColumnDefinition

- You can use this constructor with Panel.addRowColumnDefinition to add RowColumnDefinitions to Table Panels.

  Calls to Panel.getRowDefinition or Panel.getColumnDefinition will automatically create and remember a RowColumnDefinition for you.

  #### Parameters

  - ##### `Optional` init: Partial<RowColumnDefinition & {
    column?: number;
    row?: number;
    }>

    Optional initialization properties. These can include `row` or `column` index numbers as a convenience instead of setting isRow and index.

  #### Returns RowColumnDefinition

## Accessors

### actual
: number

- This read-only property returns the usable row height or column width, after arrangement, in local coordinates, that objects in this row or column can be arranged within. This does not include separatorPadding or separatorStrokeWidth, as total does.

  This value gives the row height if isRow is true; otherwise this gives the column width. The value is meaningless until after the Table Panel using this RowColumnDefinition has been arranged.

  `see`
  - total
  - height
  - width
  - sizing

### alignment
: Spot

- Gets or sets a default alignment for elements that are in this row or column. The value must be a Spot. The default value is Spot.Default, so that this RowColumnDefinition does not supply any alignment information for the row or column.

  When an element's GraphObject.alignment property is Spot.Default, it gets the horizontal alignment from the element's column's RowColumnDefinition and the vertical alignment from the element's row's RowColumnDefinition. When that RowColumnDefinition.alignment property is also Default, it takes the value from the table panel's Panel.defaultAlignment property.

  `see`
  - GraphObject.alignment
  - Panel.defaultAlignment

### background
: BrushLike

- Gets or sets the background color for a particular row or column, which fills the entire span of the row or column, including any separatorPadding.

  The default value is null, which means nothing is drawn in the background of the row or column.

  `see`

  GraphObject.background

### coversSeparators
: boolean

- Determines whether or not the background, if there is one, is in front of or behind the separators.

  The default value is false -- any background is drawn behind any separator lines.

### height
: number

- Gets or sets the row height, in local coordinates. This describes the row height if isRow is true; otherwise this property is meaningless. The value must be non-negative and finite.

  The default value is NaN, which means this row will get a height that is just big enough to hold all of the objects in the row.

  Setting this value to a number will mean that all of the objects of this Panel in this row will be allocated that amount of row height. Whether an object in the row is actually arranged to have that height depends on whether the GraphObject.stretch stretches vertically.

  `see`
  - width
  - minimum
  - maximum
  - sizing

### index
: number

- This read-only property returns which row or column this RowColumnDefinition describes in the panel. The value is a zero-based integer.

  `see`
  - Panel.findColumnForLocalX
  - Panel.findRowForLocalY
  - Panel.leftIndex
  - Panel.topIndex
  - position

### isRow
: boolean

- This read-only property is true when this describes a row instead of a column in the panel. When this is true, the height, minimum, and maximum all describe the row height. Otherwise width and the other two properties describe the column width.

### maximum
: number

- Gets or sets the maximum row height or column width, in local coordinates. The maximum describes the row height if isRow is true; otherwise this describes the column width.

  The value must be non-negative. The default value is Infinity. The arranged height of all objects in this row, or the arranged width of all objects in this column, will be no greater than this value.

  `see`
  - width
  - height
  - minimum
  - sizing

### minimum
: number

- Gets or sets the minimum row height or column width, in local coordinates. The minimum describes the row height if isRow is true; otherwise this describes the column width.

  The value must be non-negative and finite. The default value is zero. The arranged height of all objects in this row, or the arranged width of all objects in this column, will be no less than this value.

  `see`
  - width
  - height
  - maximum
  - sizing

### `Readonly` panel
: Panel

- This read-only property returns the Panel that this row or column definition is in.

### position
: number

- This read-only property returns the actual arranged row or column starting position, after arrangement, in local coordinates. This value gives the Y position if isRow is true; otherwise this gives the X position. The value is meaningless until after the Table Panel using this RowColumnDefinition has been arranged.

  `see`
  - Panel.findColumnForLocalX
  - Panel.findRowForLocalY
  - Panel.leftIndex
  - Panel.topIndex
  - index

### separatorDashArray
: number[]

- Gets or sets the dash array for dashing the separator line, provided this row or column has a nonzero RowColumnDefinition.separatorStrokeWidth and non-null RowColumnDefinition.separatorStroke.

  Must be an array of positive numbers and zeroes, or else null to indicate a solid line.

  For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.

  Setting an array with all zeroes will set the value to null.

  Default is null, so that this RowColumnDefinition does not supply any stroke dash array information for what is drawn before the row or column. The separator line may still be drawn using dashes if Panel.defaultRowSeparatorDashArray or Panel.defaultColumnSeparatorDashArray is non-null.

  `see`
  - Panel.defaultColumnSeparatorDashArray
  - Panel.defaultRowSeparatorDashArray
  - separatorPadding
  - separatorStroke
  - separatorStrokeWidth
  - background

### separatorPadding
: MarginLike

- Gets or sets the additional padding for a particular row or column, in local coordinates. Padding is applied on two sides - before and after a row or column's contents. The separatorStrokeWidth comes before any padding Margin.top or Margin.left.

  The default value is null, so that this RowColumnDefinition does not supply any padding information for the row or column. There may still be some padding between rows and/or columns if Panel.defaultSeparatorPadding is non-zero.

  `see`
  - Panel.defaultSeparatorPadding
  - separatorStroke
  - separatorStrokeWidth
  - separatorDashArray
  - background

### separatorStroke
: BrushLike

- Gets or sets the stroke (color) for the separator line that is drawn before a particular row or column, provided that row or column has a nonzero separatorStrokeWidth.

  The default value is null, so that this RowColumnDefinition does not specify any brush for the separator line to draw before the row or column. The line may still be drawn if the value of Panel.defaultRowSeparatorStroke or Panel.defaultColumnSeparatorStroke is non-null.

  However, if no stroke color is specified, then no stroke width will be drawn, even if the separatorStrokeWidth value is non-zero.

  `see`
  - Panel.defaultColumnSeparatorStroke
  - Panel.defaultRowSeparatorStroke
  - separatorPadding
  - separatorStrokeWidth
  - separatorDashArray
  - background

### separatorStrokeWidth
: number

- Gets or sets the stroke width for a particular row or column's separator line, in local coordinates.

  The default value is NaN, so that this RowColumnDefinition does not supply any stroke width information for what is drawn before the row or column. The separator line may still be drawn if Panel.defaultRowSeparatorStroke or Panel.defaultColumnSeparatorStroke is a real number (they default to 1).

  `see`
  - Panel.defaultColumnSeparatorStrokeWidth
  - Panel.defaultRowSeparatorStrokeWidth
  - separatorPadding
  - separatorStroke
  - separatorDashArray
  - background

### sizing
: Sizing

- Gets or sets how this row or column deals with a Table Panel's extra space. The value must be a Sizing value. The default value is Sizing.Default.

  `see`
  - Panel.columnSizing
  - Panel.rowSizing
  - actual
  - total
  - height
  - width

### stretch
: Stretch

- Gets or sets the default stretch for elements that are in this row or column. The only accepted values are listed as constant properties of GraphObject: Stretch.None, Stretch.Fill, Stretch.Horizontal, Stretch.Vertical, or Stretch.Default. The default value is Stretch.Default, so that this RowColumnDefinition does not supply any stretch information for the row or column.

  When an element's GraphObject.stretch property is Stretch.Default, it gets the horizontal stretch from the element's column's RowColumnDefinition and the vertical stretch from the element's row's RowColumnDefinition. When that RowColumnDefinition.stretch property is also Default, it takes the value from the table panel's Panel.defaultStretch property.

  `see`
  - GraphObject.stretch
  - Panel.defaultStretch
  - sizing
  - width
  - height

### `Readonly` total
: number

- This read-only property returns the total arranged row height or column width, after arrangement, in local coordinates. This value gives the actual size plus the separatorPadding and separatorStrokeWidth.

  This value gives the vertical space occupied by the row if isRow is true; otherwise this gives the horizontal space occupied by the column. The value is meaningless until after the Table Panel using this RowColumnDefinition has been arranged.

  `see`
  - actual
  - height
  - width
  - sizing

### width
: number

- Gets or sets the column width, in local coordinates. The size describes the column width if isRow is false; otherwise this property is meaningless. The value must be non-negative and finite.

  The default value is NaN, which means this column will get a width that is just big enough to hold all of the objects in the column.

  Setting this value to a number will mean that all of the objects of this Panel in this column will be allocated that amount of column width. Whether an object in the column is actually arranged to have that width depends on whether the GraphObject.stretch stretches horizontally.

  `see`
  - height
  - minimum
  - maximum
  - sizing

## Methods

### bind

- bind(targetprop?: string, sourceprop?: string, conv?: ((val: any, targetObj: any) => any), backconv?: ((val: any, sourceData: any, model: Model) => any)): RowColumnDefinition

- Add a data-binding to this RowColumnDefinition for the given property names and optional conversion function.

  #### Parameters

  - ##### `Optional` targetprop: string

    A string naming the target property on the target object. This should not be the empty string.

  - ##### `Optional` sourceprop: string

    A string naming the source property on the bound data object. If this is the empty string, the whole Panel.data object is used. If this argument is not supplied, the source property is assumed to be the same as the target property.

  - ##### `Optional` conv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the data property value to the value to set the target property. If the function is null or not supplied, no conversion takes place.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  - ##### `Optional` backconv: ((val: any, sourceData: any, model: Model) => any)

    An optional conversion function to convert property values back to data values. Specifying this modifies the binding to set its Binding.mode to be BindingMode.TwoWay.

    - - (val: any, sourceData: any, model: Model): any

      - #### Parameters

        - ##### val: any

        - ##### sourceData: any

        - ##### model: Model

        #### Returns any

  #### Returns RowColumnDefinition

  this RowColumnDefinition

  `since`

  2.2

- bind(binding: Binding): RowColumnDefinition

- Add a data-binding of a property on this RowColumnDefinition to a property on a data object.

  Read more about Bindings at the Introduction page about Data Bindings.

  #### Parameters

  - ##### binding: Binding

  #### Returns RowColumnDefinition

  this RowColumnDefinition

### bindTwoWay

- bindTwoWay(targetprop: string | Binding, sourceprop?: string, conv?: ((val: any, targetObj: any) => any), backconv?: ((val: any, sourceData: any, model: Model) => any)): RowColumnDefinition

- This convenience function works like GraphObject.bind, creating a Binding, then also calls Binding.makeTwoWay on it. These are equivalent:

      .bind("text", "text", null, null)
      .bindTwoWay("text")

  As are these:

      .bind("text", "someProp", null, null)
      .bindTwoWay("text", "someProp")

  The first creates a two-way binding because specifying anything for the 4th argument (BackConversion) automatically sets the Binding.mode to be BindingMode.TwoWay. However, it requires specifying the middle arguments, which may not be necessary.

  Read more about Bindings at the Introduction page about Data Bindings.

  #### Parameters

  - ##### targetprop: string | Binding

    A string naming the target property on this GraphObject. This should not be the empty string. This becomes the value of Binding.targetProperty.

  - ##### `Optional` sourceprop: string

    A string naming the source property on the bound data object. If this is the empty string, the whole Panel.data object is used. If this argument is not supplied, the source property is assumed to be the same as the target property. This becomes the value of Binding.sourceProperty.

  - ##### `Optional` conv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the data property value to the value to set the target property. If the function is null or not supplied, no conversion takes place. This becomes the value of Binding.converter.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  - ##### `Optional` backconv: ((val: any, sourceData: any, model: Model) => any)

    An optional conversion function to convert GraphObject property values back to data values. Specifying this modifies the binding to set its Binding.mode to be BindingMode.TwoWay. This becomes the value of Binding.backConverter.

    - - (val: any, sourceData: any, model: Model): any

      - #### Parameters

        - ##### val: any

        - ##### sourceData: any

        - ##### model: Model

        #### Returns any

  #### Returns RowColumnDefinition

  this GraphObject

  `since`

  3.0

### theme

- theme(targetprop: string, sourceprop?: string, themeSource?: string, conv?: ((val: any, targetObj: any) => any), themeconv?: ((val: any, targetObj: any) => any)): RowColumnDefinition

- Add a ThemeBinding from a Theme property to a property on this RowColumnDefinition.

  Read more about theming at the Introduction page about Themes.

  #### Parameters

  - ##### targetprop: string

    A string naming the target property on the target object. This should not be the empty string.

  - ##### `Optional` sourceprop: string

    A string naming the source property on the theme. This should not be the empty string. If this argument is not supplied, the source property is assumed to be the same as the target property.

  - ##### `Optional` themeSource: string

    The theme source object to search for the source property. If this argument is null or not supplied, the empty-string is used.

  - ##### `Optional` conv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the source property to the theme property name. If the function is null or not supplied, no conversion takes place.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  - ##### `Optional` themeconv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the theme value to the value to set the target property. If the function is null or not supplied, no conversion takes place.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  #### Returns RowColumnDefinition

  this RowColumnDefinition

  `since`

  3.0

### themeData

- themeData(targetprop: string, sourceprop?: string, themeSource?: string, conv?: ((val: any, targetObj: any) => any), themeconv?: ((val: any, targetObj: any) => any)): RowColumnDefinition

- Add a ThemeBinding from a data property to a property on this RowColumnDefinition.

  This is a convenience function for theme that additionally calls ThemeBinding.ofData on the created binding.

  Read more about theming at the Introduction page about Themes.

  #### Parameters

  - ##### targetprop: string

    A string naming the target property on the target object. This should not be the empty string.

  - ##### `Optional` sourceprop: string

    A string naming the source property on the theme. This should not be the empty string. If this argument is not supplied, the source property is assumed to be the same as the target property.

  - ##### `Optional` themeSource: string

    The theme source object to search for the source property. If this argument is null or not supplied, the empty-string is used.

  - ##### `Optional` conv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the source property to the theme property name. If the function is null or not supplied, no conversion takes place.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  - ##### `Optional` themeconv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the theme value to the value to set the target property. If the function is null or not supplied, no conversion takes place.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  #### Returns RowColumnDefinition

  this RowColumnDefinition

  `since`

  3.0

### themeModel

- themeModel(targetprop: string, sourceprop?: string, themeSource?: string, conv?: ((val: any, targetObj: any) => any), themeconv?: ((val: any, targetObj: any) => any)): RowColumnDefinition

- Add a ThemeBinding from the shared Model.modelData to a property on this RowColumnDefinition.

  This is a convenience function for theme that additionally calls Binding.ofModel on the created binding.

  Read more about theming at the Introduction page about Themes.

  #### Parameters

  - ##### targetprop: string

    A string naming the target property on the target object. This should not be the empty string.

  - ##### `Optional` sourceprop: string

    A string naming the source property on the theme. This should not be the empty string. If this argument is not supplied, the source property is assumed to be the same as the target property.

  - ##### `Optional` themeSource: string

    The theme source object to search for the source property. If this argument is null or not supplied, the empty-string is used.

  - ##### `Optional` conv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the source property to the theme property name. If the function is null or not supplied, no conversion takes place.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  - ##### `Optional` themeconv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the theme value to the value to set the target property. If the function is null or not supplied, no conversion takes place.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  #### Returns RowColumnDefinition

  this RowColumnDefinition

  `since`

  3.0

### themeObject

- themeObject(targetprop: string, sourceprop?: string, themeSource?: string, conv?: ((val: any, targetObj: any) => any), themeconv?: ((val: any, targetObj: any) => any), objectSrcname?: string): RowColumnDefinition

- Add a ThemeBinding from a GraphObject property to a property on this RowColumnDefinition.

  This is a convenience function for theme that additionally calls Binding.ofObject on the created binding. It passes the `objectSrcname` param to the Binding.ofObject call.

  Read more about theming at the Introduction page about Themes.

  #### Parameters

  - ##### targetprop: string

    A string naming the target property on the target object. This should not be the empty string.

  - ##### `Optional` sourceprop: string

    A string naming the source property on the theme. This should not be the empty string. If this argument is not supplied, the source property is assumed to be the same as the target property.

  - ##### `Optional` themeSource: string

    The theme source object to search for the source property. If this argument is null or not supplied, the empty-string is used.

  - ##### `Optional` conv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the source property to the theme property name. If the function is null or not supplied, no conversion takes place.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  - ##### `Optional` themeconv: ((val: any, targetObj: any) => any)

    An optional side-effect-free function converting the theme value to the value to set the target property. If the function is null or not supplied, no conversion takes place.

    - - (val: any, targetObj: any): any

      - #### Parameters

        - ##### val: any

        - ##### targetObj: any

        #### Returns any

  - ##### `Optional` objectSrcname: string

    the GraphObject.name of an element in the visual tree of the bound Panel If not supplied, it uses the binding Panel as the source GraphObject.

  #### Returns RowColumnDefinition

  this RowColumnDefinition

  `since`

  3.0

## Properties

### `Static` `Readonly` Default

`deprecated`

See Sizing.Default.

### `Static` `Readonly` None

`deprecated`

See Sizing.None.

### `Static` `Readonly` ProportionalExtra

`deprecated`

See Sizing.ProportionalExtra.

Copyright © 1998-2024 by Northwoods Software Corporation.