New to KendoReact? Start a free 30-day trial

GridToolbar

Component

Represents the GridToolbar component.

Definition

Package:@progress/kendo-react-grid

Syntax:

jsx

const App = () => {
    const [data, setData] = useState([
        { Column1: 'A1', Column2: 'A2' },
        { Column1: 'B1', Column2: 'B2' },
        { Column1: 'C1', Column2: 'C2' }
    ]);

    const customClick = () => {
        alert('Custom handler in custom toolbar');
    };

    return (
        <Grid data={data}>
            <GridToolbar>
                <Button title="Click" onClick={customClick}>
                    Click
                </Button>
            </GridToolbar>
        </Grid>
    );
};

export default App;

Properties

ariaLabel?

string

Represents the aria-label HTML attribute of the Toolbar component.

Example:

jsx

<Toolbar ariaLabel="Main toolbar" />

buttonScrollSpeed?

number

Sets the Toolbar scroll speed in pixels when scrolling via clicking the previous or next button. Applicable when the overflow property is set to scroll.

Default:

100

children?

ReactNode

Determines the children nodes.

className?

string

Sets additional classes to the Toolbar.

Example:

jsx

<Toolbar className="custom-toolbar" />

dir?

string

Represents the dir HTML attribute.

Example:

jsx

<Toolbar dir="rtl" />

displayName

string

fillMode?

"flat" | "solid" | "outline"

Configures the fillMode of the Toolbar. The available options are:

solid - Applies a background color and solid borders.
flat - Sets a transparent background and solid bottom border.
outline - Sets a transparent background and solid borders.

Default:

undefined (theme-controlled)

Example:

jsx

<Toolbar fillMode="flat" />

id?

string

Sets the id property of the top div element of the component.

keyboardNavigation?

boolean

If set to false, it will turn off the built-in keyboard navigation.

Example:

jsx

<Toolbar keyboardNavigation={false} />

nextButton?

ComponentType<object>

Defines the custom component that will be rendered as a next button. To remove the button, set a function which returns null () => null.

onResize?

(event: ToolbarResizeEvent) => void

The resize event of the Toolbar.

Parameters:eventToolbarResizeEvent

Example:

jsx

<Toolbar onResize={(event) => console.log(event)} />

overflow?

"section" | "none" | "scroll"

Represents the possible overflow mode options of the Toolbar. Applicable when there is not enough space to render all tools.

Default:

none

prevButton?

ComponentType<object>

Defines the custom component that will be rendered as a previous button. To remove the button, set a function which returns null () => null.

scrollButtons?

"hidden" | "auto" | "visible"

Determines the Toolbar scroll buttons visibility. Applicable when the overflow property is set to scroll.

Default:

auto

scrollButtonsPosition?

"split" | "end" | "start"

Determines the Toolbar scroll buttons position. Applicable when the overflow property is set to scroll.

Default:

split

size?

"small" | "medium" | "large"

Configures the size of the Toolbar. The available options are:

small - Sets the padding of the component to 4px 4px.
medium - Sets the padding of the component to 8px 8px.
large - Sets the padding of the component to 10px 10px.

Default:

undefined (theme-controlled)

Example:

jsx

<Toolbar size="large" />

style?

CSSProperties

The styles that are applied to the Toolbar.

Example:

jsx

<Toolbar style={{ backgroundColor: 'lightblue' }} />

tabIndex?

number

Specifies the tabIndex of the Toolbar.

Example:

jsx

<Toolbar tabIndex={0} />