Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ActionColumn

ActionColumn is a column for the GridView widget that displays buttons for viewing and manipulating the items.

To add an ActionColumn to the gridview, add it to the [[GridView::columns|columns]] configuration as follows:

columns: [
    // ...
    {
        class: ActionColumn.class,
        // you may configure additional properties here
    },
]

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

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

actionRoutes

actionRoutes: {} = ...

Type declaration

  • [key: string]: string

buttonOptions

buttonOptions: {} = {}

The html options to be applied to the default button.

Type declaration

  • [key: string]: string

buttons

buttons: {} = {}

The button rendering callbacks. The array keys are the button names (without curly brackets), and the values are the corresponding button rendering callbacks. The callbacks should use the following signature:

function (url, model, key) {
    // return the button HTML code
}

where $url is the URL that the column creates for the button, $model is the model object being rendered for the current row, and $key is the key of the model in the data provider array.

You can add further conditions to the button, for example only display it, when the model is editable (here assuming you have a status field that indicates that):

{
    update: function(url, model, key) {
        return model.status === 'editable' ? Html.a('Update', url) : '';
    },
},

Type declaration

  • [key: string]: any

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

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

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.

Type declaration

  • [key: string]: any

icons

icons: {} = ...

The array keys are the icon names and the values the corresponding html:

{
    eye-open: '<svg ...></svg>',
    pencil: Html.tag('span', '', [ {class: 'glyphicon glyphicon-pencil'})
}

Defaults to FontAwesome 5 free svg icons.

see

https://fontawesome.com

Type declaration

  • [key: string]: string

initialization

initialization: Promise<void>

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

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

route

route: any

template

template: string = '{view} {update} {delete}'

The template used for composing each cell in the action column. Tokens enclosed within curly brackets are treated as controller action IDs (also called button names in the context of action column). They will be replaced by the corresponding button rendering callbacks specified in buttons. For example, the token {view} will be replaced by the result of the callback buttons['view']. If a callback cannot be found, the token will be replaced with an empty string.

As an example, to only have the view, and update button you can add the ActionColumn to your GridView columns as follows:

{class: 'ActionColumn', template: '{view} {update}'},
see

buttons

visible

visible: boolean = true

Whether this column is visible. Defaults to true.

visibleButtons

visibleButtons: {} = {}

The visibility conditions for each button. The array keys are the button names (without curly brackets), and the values are the boolean true/false or the anonymous function. When the button name is not specified in this array it will be shown by default. The callbacks must use the following signature:

function (model, key, index) {
    return model.status === 'editable';
}

Or you can pass a boolean value:

{
   update: true
}

Type declaration

  • [key: string]: boolean | (() => boolean)

Methods

createUrl

  • createUrl(action: any, model: any, key: any, index: any): string

  • Creates a URL for the given action and model. This method is called for each button and each row.

    Parameters

    • action: any

      the button name (or action ID)

    • model: any
    • key: any

      the key associated with the data model

    • index: any

      the current row index

    Returns string

    the created URL

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>

Protected initDefaultButton

  • initDefaultButton(name: any, iconName: any, additionalOptions?: {}): void

  • Initializes the default button rendering callback for single button.

    Parameters

    • name: any

      Button name as it's written in template

    • iconName: any

      Part of Bootstrap glyphicon class that makes it unique

    • additionalOptions: {} = {}

      Array of additional options

      Returns void

    Protected initDefaultButtons

    • initDefaultButtons(): 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: any, key: any, index: any): 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>

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

      Returns Promise<string>

      the rendering result

    Generated using TypeDoc