Options
All
  • Public
  • Public/Protected
  • All
Menu

Class DataColumn

DataColumn is the default column type for the GridView widget.

It is used to show data columns and allows sorting and filtering them.

A simple data column definition refers to an attribute in the data model of the GridView's data provider. The name of the attribute is specified by attribute.

By setting value and label, the header and cell content can be customized.

A data column differentiates between the [[getDataCellValue|data cell value]] and the data cell content. The cell value is an un-formatted value that may be used for calculation, while the actual cell content is a formatted version of that value which may contain HTML markup.

For more details and usage information on DataColumn, see the guide article on data widgets.

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

attribute

attribute: any

The attribute name associated with this column. When neither content nor value is specified, the value of the specified attribute will be retrieved from each data model and displayed.

Also, if label is not specified, the label associated with the attribute will be displayed.

content

content: string | CallableFunction

This is a callable that will be used to generate the content of each cell. The signature of the function should be the following: function (model, key, index, column). Where model, key, and index refer to the model, key and index of the row currently being rendered and column is a reference to the Column object.

contentOptions

contentOptions: {} = {}

Closure the HTML attributes for the data cell tag. This can either be an array of attributes or an anonymous function ([[Closure]]) that returns such an array. The signature of the function should be the following: function (model, key, index, column). Where model, key, and index refer to the model, key and index of the row currently being rendered and column is a reference to the Column object. A function may be used to assign different attributes to different rows based on the data in that row.

see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any

enableSorting

enableSorting: boolean = true

Whether to allow sorting by this column. If true and attribute is found in the sort definition of GridView.dataProvider, then the header cell of this column will contain a link that may trigger the sorting when being clicked.

encodeLabel

encodeLabel: boolean = true

Whether the header label should be HTML-encoded.

see

label

filter

filter: any

The HTML code representing a filter input (e.g. a text field, a dropdown list) that is used for this data column. This property is effective only when GridView.filterModel is set.

  • If this property is not set, a text field will be generated as the filter input with attributes defined with filterInputOptions. See [[BaseHtml.activeInput]] for details on how an active input tag is generated.
  • If this property is an array, a dropdown list will be generated that uses this property value as the list options.
  • If you don't want a filter for this data column, set this value to be false.

filterAttribute

filterAttribute: any

The attribute name of the GridView.filterModel associated with this column. If not set, will have the same value as attribute.

filterInputOptions

filterInputOptions: any = ...

The HTML attributes for the filter input fields. This property is used in combination with the filter property. When filter is not set or is an array, this property will be used to render the HTML attributes for the generated filter input fields.

Empty id in the default value ensures that id would not be obtained from the model attribute thus providing better performance.

see

Html.renderTagAttributes for details on how attributes are being rendered.

filterOptions

filterOptions: {} = {}

The HTML attributes for the filter cell tag.

see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any

footer

footer: string

The footer cell content. Note that it will not be HTML-encoded.

footerOptions

footerOptions: {} = {}

The HTML attributes for the footer cell tag.

see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any

format

format: string = 'text'

Closure in which format should the value of each data model be displayed as (e.g. "raw", "text", "html", ['date', 'js:Y-m-d']). Supported formats are determined by the [[GridView.formatter|formatter]] used by the GridView. Default format is "text" which will format the value as an HTML-encoded plain text when [[Formatter]] is used as the [[GridView.formatter|formatter]] of the GridView.

see

[[Formatter.format]]

grid

grid: GridView

The grid view object that owns this column.

header

header: string

The header cell content. Note that it will not be HTML-encoded.

headerOptions

headerOptions: {} = {}

The HTML attributes for the header cell tag.

see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any

initialization

initialization: Promise<void>

A Promise which resolves when this Component has been successfully initialized.

label

label: any

Label to be displayed in the header cell and also to be used as the sorting link label when sorting is enabled for this column. If it is not set and the models provided by the GridViews data provider are instances of [[ActiveRecord]], the label will be determined using [[ActiveRecord.getAttributeLabel]]. Otherwise [[Inflector.camel2words]] will be used to get a label.

options

options: {} = {}

The HTML attributes for the column group tag.

see

Html.renderTagAttributes for details on how attributes are being rendered.

Type declaration

  • [key: string]: any

sortLinkOptions

sortLinkOptions: any = {}

The HTML attributes for the link tag in the header cell generated by Sort.link when sorting is enabled for this column.

see

Html.renderTagAttributes for details on how attributes are being rendered.

value

value: any

Closure an anonymous function or a string that is used to determine the value to display in the current column.

If this is an anonymous function, it will be called for each row and the return value will be used as the value to display for every data model. The signature of this function should be: function (model, key, index, column). Where model, key, and index refer to the model, key and index of the row currently being rendered and column is a reference to the DataColumn object.

You may also set this property to a string representing the attribute name to be displayed in this column. This can be used when the attribute to be displayed is different from the attribute that is used for sorting and filtering.

If this is not set, model[attribute] will be used to obtain the value, where attribute is the value of attribute.

visible

visible: boolean = true

Whether this column is visible. Defaults to true.

Methods

getDataCellvalue

  • getDataCellvalue(model: Model, key: string, index: number): string

  • Returns the data cell value.

    Parameters

    • model: Model

      the data model

    • key: string

      the key associated with the data model

    • index: number

      the zero-based index of the data model among the models array returned by GridView.dataProvider.

    Returns string

    the data cell value

Protected getHeaderCellLabel

  • getHeaderCellLabel(): Promise<string>

init

  • init(): Promise<void>

  • Initializes the object. This method is invoked at the end of the constructor after the object is initialized with the given configuration.

    Returns Promise<void>

renderDataCell

  • renderDataCell(model: Model, key: string, index: number): Promise<string>

  • Renders a data cell.

    Parameters

    • model: Model

      the data model being rendered

    • key: string

      the key associated with the data model

    • index: number

      the zero-based index of the data item among the item array returned by GridView.dataProvider.

    Returns Promise<string>

    the rendering result

Protected renderDataCellContent

  • renderDataCellContent(model: Model, key: string, index: number): Promise<string>

renderFilterCell

  • renderFilterCell(): string

Protected renderFilterCellContent

  • renderFilterCellContent(): string

  • Renders the filter cell content. The default implementation simply renders a space. This method may be overridden to customize the rendering of the filter cell (if any).

    Returns string

    the rendering result

renderFooterCell

  • renderFooterCell(): string

Protected renderFooterCellContent

  • renderFooterCellContent(): string

  • Renders the footer cell content. The default implementation simply renders footer. This method may be overridden to customize the rendering of the footer cell.

    Returns string

    the rendering result

renderHeaderCell

  • renderHeaderCell(): Promise<string>

Protected renderHeaderCellContent

  • renderHeaderCellContent(): Promise<string>

Generated using TypeDoc