ActionColumn

A column that displays actions as clickable icons in the cell.

new TreeGrid({
    appendTo : document.body,
    columns  : [{
        type    : 'action',
        text    : 'Increase amount',
        actions : [{
            cls      : 'fa fa-plus',
            renderer : ({ action, record }) => `<i class="b-action-item ${action.cls} b-${record.enabled ? "green" : "red"}-class"></i>`,
            visible  : ({ record }) => record.canAdd,
            tooltip  : ({ record }) => `<p class="b-nicer-than-default">Add to ${record.name}</p>`,
            onClick  : ({ record }) => console.log(`Adding ${record.name}`)
        }, {
            cls     : 'fa fa-pencil',
            tooltip : 'Edit note',
            onClick : ({ record }) => console.log(`Editing ${record.name}`)
        }]
    }]
});

Actions may be placed in Group headers, by setting action.showForGroup to true. Those actions will not be shown on normal rows.

Accessibility

If ariaLabel is omitted, adding a tooltip to an action will automatically set this as the aria-label for the button element. Use ariaHasPopup to indicate that the action triggers a popup, helping assistive technology users understand the interaction behavior.

Useful configs

Config	Description
actions	Array of action icon configs
disableIfGridReadOnly	Disable actions in read-only mode

Configs

Configs are options you supply in a configuration object when creating an instance of this class

actions : ActionConfig[]

An array of action config objects, see ActionConfig for details.

new Grid({
    columns  : [{
        type    : 'action',
        text    : 'Actions',
        actions : [{
            cls      : 'fa fa-plus',
            visible  : ({ record }) => record.canAdd,
            onClick  : ({ record }) => console.log(`Adding ${record.name}`)
        }, {
            cls     : 'fa fa-pencil',
            tooltip : 'Edit note',
            onClick : ({ record }) => console.log(`Editing ${record.name}`)
        }]
    }]
});

Has a corresponding runtime actions property.

disableIfGridReadOnly : Boolean

Set to true to disable actions in this column if the grid is readOnly

Has a corresponding runtime disableIfGridReadOnly property.
minWidth : Number/String30

Column minimal width. If value is Number then minimal width is in pixels.

Has a corresponding runtime minWidth property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isActionColumn : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of ActionColumn class, or subclass thereof.

actions : ActionConfig[]

An array of action config objects, see ActionConfig for details.

new Grid({
    columns  : [{
        type    : 'action',
        text    : 'Actions',
        actions : [{
            cls      : 'fa fa-plus',
            visible  : ({ record }) => record.canAdd,
            onClick  : ({ record }) => console.log(`Adding ${record.name}`)
        }, {
            cls     : 'fa fa-pencil',
            tooltip : 'Edit note',
            onClick : ({ record }) => console.log(`Editing ${record.name}`)
        }]
    }]
});

Has a corresponding actions config.

disableIfGridReadOnly : Boolean

Set to true to disable actions in this column if the grid is readOnly

Has a corresponding disableIfGridReadOnly config.
isActionColumn : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of ActionColumn class, or subclass thereof.
minWidth : Number/String30

Column minimal width. If value is Number then minimal width is in pixels.

Has a corresponding minWidth config.

Functions

Functions are methods available for calling on the class

defaultRenderer( )

private

Renderer that displays action icon(s) in the cell.
onCellClick( )

private

Handle icon click and call action handler.
updateAutoWidth( )
: Promise

private

ASYNC

Update width for actions column to fit content.

Type definitions

ActionConfig
Config object for an action in an ActionColumn.
Properties
- cls : String
  
  CSS Class for action icon
- ariaLabel : String
  
  A text to use for the action element's aria-label value. If not provided, the action's tooltip will be used as the aria-label (if present).
- ariaHasPopup : 'true'/'false'/'menu'/'listbox'/'tree'+ 3 more
  
  A value to use for the action element's aria-haspopup attribute. Set to indicate that the action triggers a popup. This helps assistive technologies inform users that activating the action will display a popup element.
- tooltip : Function/String/TooltipConfig
  
  Tooltip text, or a config object which can reconfigure the shared tooltip by setting boolean, numeric and string config values, or a function to return the tooltip text, passed the row's record
- record : Model
  
  The record
- visible : Function/Boolean
  
  Boolean to define the action icon visibility or a callback function, passed the row's record, to change it dynamically
- onClick : Function
  
  Callback to handle click action item event
- data : Object
  
  Click function data
- record : Model
  
  The row record
- target : HTMLElement
  
  The clicked action element
- action : ActionConfig
  
  The clicked action config
- grid : GridBase
  
  The Grid instance
- column : ActionColumn
  
  The ActionColumn instance
- showForGroup : Boolean
  
  Set to true to have action icon visible in group headers only when using the group feature
- renderer : Function/String
  A render function, or the name of a function in the Grid's ownership tree used to define the action element. Passed the row's record, expected to return an HTML string or a DOM config object.
  
  Note: when specified, the cls action config is ignored. Make sure you add an action icon manually, for example:
  
  { type : 'action', text : 'Increase amount', actions : [{ cls : 'fa fa-plus', // this line will be ignored renderer : ({ record }) => '<i class="b-action-item fa fa-plus"></i> ' + record.name, onClick : ({ record }) => {} }] }
  
  or
  
  { type : 'action', text : 'Increase amount', actions : [{ cls : 'fa fa-plus', // this line will be ignored renderer : 'up.renderAction' // Defined on the Grid onClick : ({ record }) => {} }] }
- record : Model
  
  The record

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-action-column-button-size	Button size (applied as font-size)
--b-action-column-color	Button color
--b-action-column-row-hover-color	Button color when row is hovered or selected
Hovered
--b-action-column-hover-color	Button color when hovered
Readonly
--b-action-column-readonly-color	Button color when readonly

ActionColumn

Accessibility

Useful configs

See also

Configs

Properties

Functions

Type definitions

Properties

CSS variables

Source path

Inheritance tree4

Mixins5

Contents