ActionColumn
A column that displays actions as clickable icons in the cell.
//<code-header>
fiddle.title = 'Action column';
//</code-header>
// tree with ActionColumn
const tree = new TreeGrid({
appendTo : targetElement,
autoHeight : true,
columns : [
{ type : 'tree', field : 'name', text : 'Name', flex : 1 },
{ type : 'number', field : 'born', text : 'Born', flex : 1 },
{ type : 'number', field : 'salary', text : 'Salary' },
{
type : 'action',
text : 'Actions',
width : 100,
actions : [{
cls : 'fa fa-minus',
tooltip : 'Decrease salary',
visible : ({ record }) => !Boolean(record.children && record.children.length),
onClick : ({ record }) => {
if (record.salary > 1000) {
record.salary = record.salary - 1000;
}
}
}, {
cls : 'fa fa-plus',
tooltip : 'Increase salary',
visible : ({ record }) => !Boolean(record.children && record.children.length),
onClick : ({ record }) => record.salary = record.salary + 1000
},
{
cls : 'fa fa-trash',
tooltip : 'Remove row',
onClick : ({ record }) => record.remove()
}]
}
],
data : [
{
id : 1,
name : 'ABBA',
iconCls : 'b-icon fa-users',
born : null,
salary : null,
expanded : true,
children : [
{ id : 11, name : 'Anni-Frid', born : 1945, salary : 50000, iconCls : 'b-icon fa-user' },
{ id : 12, name : 'Bjorn', born : 1945, salary : 140000, iconCls : 'b-icon fa-user' },
{ id : 13, name : 'Benny', born : 1946, salary : 400000, iconCls : 'b-icon fa-user' },
{ id : 14, name : 'Agnetha', born : 1950, salary : 40000, iconCls : 'b-icon fa-user' }
]
},
{
id : 2,
name : 'Roxette',
iconCls : 'b-icon fa-users',
born : null,
salary : null,
children : [
{ id : 21, name : 'Per', born : 1959, salary : 88000, iconCls : 'b-icon fa-user' },
{ id : 22, name : 'Marie', born : 1958, salary : 70000, iconCls : 'b-icon fa-user' }
]
}
]
});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.
Configs
82
Configs
82Common
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}`)
}]
}]
});
Set to true to disable actions in this column if the grid is readOnly
Layout
Column minimal width. If value is Number then minimal width is in pixels.
Integration
Interaction
Menu
Misc
Rendering
Properties
152
Properties
152Common
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}`)
}]
}]
});
Set to true to disable actions in this column if the grid is readOnly
Class hierarchy
Layout
Column minimal width. If value is Number then minimal width is in pixels.
Editing
Integration
Interaction
JSON
Menu
Misc
Other
Parent & children
Rendering
Functions
76
Functions
76Configuration
Editing
Events
Identification
Misc
Other
Parent & children
Events
5
Events
5Event handlers
5
Event handlers
5Typedefs
3
Typedefs
3Config object for an action in an ActionColumn.
| Parameter | Type | Description |
|---|---|---|
cls | String | CSS Class for action icon |
ariaLabel | String | A text to use for the action element's |
ariaHasPopup | true | false | menu | listbox | tree | grid | dialog | Boolean | A value to use for the action element's |
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 |
tooltip.record | Model | The record |
visible | function | Boolean | Boolean to define the action icon visibility or a callback function, passed the
row's |
onClick | function | Callback to handle click action item event |
onClick.record | Model | The row record |
onClick.target | HTMLElement | The clicked action element |
onClick.action | ActionConfig | The clicked action config |
onClick.grid | GridBase | The Grid instance |
onClick.column | ActionColumn | The ActionColumn instance |
showForGroup | Boolean | Set to |
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 Note: when specified, the or |
renderer.record | Model | The record |
CSS variables
5
CSS variables
5| 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 |