ColumnDefinition / PartialColumnDefinition

Description

A ColumnDefinition is an interface that exposes properties to configure columns in the DataGrid.

Properties

Property

Type

Default value

Description

id

string

unknown

A unique value identifying the ColumnDefinition.

Two ColumnDefinition with the same id represent the same column.

allowEdit

boolean | undefined

undefined

true if the data cells in the corresponding column can be edited, otherwise false.

allowFilter

boolean

true

true if the corresponding column can be filtered, otherwise false.

allowGroup

boolean

true

true if the corresponding column can be grouped, otherwise false.

allowResize

boolean

true

true if the width of the corresponding column can be resized, otherwise false.

allowSort

boolean

true

true if the corresponding column can be sorted, otherwise false.

editors

ResourceKeyCollection

{}

A collection of key/string pairs where key represents an EditorType and string is the id of the EditorDefinition in the DataGrid’s EditorDefinitionCollection.

editorsConverters

ResourceKeyCollection

{}

A collection of key/string pairs where key represents an EditorConverterType and string is the id of the ValueConverterDefinition in the DataGrid’s ValueConverterDefinitionCollection.

formatters

ResourceKeyCollection

{}

A collection of key/value pairs where key represents a FormatterType and string is the id of the FormatDefinition in the DataGrid’s FormatDefinitionCollection.

viewers

ResourceKeyCollection

{}

A collection of key/value pairs where key represents a ViewerType and string is the id of the ViewerDefinition in the DataGrid’s ViewerDefinitionCollection.

field

string

“”

The name of the data item’s property that serves as the source for the data shown in the data cells of the corresponding column.

title

string

“”

The title of the corresponding column, to be displayed in the column’s header cell.

type

string

“”

The data type of the property identified in the field property.

Supported types are: “string”, “boolean”, “number”, “integer”, “date”, “time”, “dateTime”.  Data cell values are automatically formatted according to the type.  For “date”, “time”, and “dateTime”, a Javascript date object must be provided.

visible

boolean

true

true if the corresponding column is visible, otherwise false.

width

number

75

The width of the corresponding column, in px.

minWidth

number

0

The minimum width of the corresponding column, in px.

maxWidth

number

Number.Max_Value

The maximum width of the corresponding column, in px.

validationRules

ValidationRule[]

[]

An array of string or ValidationRuleConfiguration objects representing the ValidationRule to use when editing DataGrid items. The DataGrid offers a number of built-in ValidationRule that can be easily referenced by their string identifier, rather than having to reference their corresponding ValidationRuleDefinition object.

Example

const columnDefinition = {

  id: "country",

  field: "country",

  title: "String",

  type: "string",

  editors: {

    dataCell: "dataCellComboBoxEditor"

  },

  editorsConverters: {

    dataCell: "percent",

    filterEditor: "percent"

  },

  formatters: {

    dataField: "nameFormatter"

  }

  viewers: {

    dataCell: "dataCellFlagViewer"

  },

  validationRules: ["required"], 

  width: 110

};