Previous Page Next Page

Toolbar

The Toolbar widget renders a horizontal bar of buttons. It is used by grids (for actions like Add, Refresh, Column Picker) and dialogs (for Save, Delete, etc.).

The ToolButton Definition

A toolbar button is a ToolButton:

interface ToolButton extends ToolButtonProps {
    hotkey?: string;            // e.g. "ctrl+s"
    hotkeyAllowDefault?: boolean;
    hotkeyContext?: any;
    separator?: false | true | 'left' | 'right' | 'both';
}

ToolButtonProps provides the button's appearance and behavior:

Property Description
title The button's title (text or element).
hint Tooltip shown on hover.
cssClass CSS class(es) applied to the button.
icon Icon class name displayed before the title.
action Action name stored on the button's data-action attribute.
onClick Handler invoked when the button is clicked.
visible Whether the button is visible; may be a function evaluated on update.
disabled Whether the button is disabled; may be a function evaluated on update.
ref Callback invoked with the created button element.

Adding Buttons to a Grid

Override getButtons() to add toolbar buttons to a grid:

protected override getButtons(): ToolButton[] {
    const buttons = super.getButtons();

    buttons.push({
        title: "My Action",
        cssClass: "my-action-button",
        icon: faIcon("star"),
        onClick: () => {
            // handle click
        },
        disabled: () => !this.hasPermission("My:Action")
    });

    return buttons;
}

The visible and disabled properties can be functions that are re-evaluated when the interface updates (via the updateInterface event).

Adding Buttons to a Dialog

Dialogs override getToolbarButtons():

protected override getToolbarButtons(): ToolButton[] {
    const buttons = super.getToolbarButtons();

    buttons.push({
        title: "Custom Action",
        onClick: () => { /* ... */ }
    });

    return buttons;
}

Hotkeys

Buttons can define a hotkey:

{
    title: "Save",
    hotkey: "ctrl+s",
    onClick: () => { /* ... */ }
}

The hotkey is bound to the toolbar's hotkeyContext (or the widget's DOM node).

Separators

Use separator to render a divider before a button:

{
    title: "Save",
    separator: true,
    onClick: () => { /* ... */ }
}

See Also