# ReportViewer.Toolbar

## Content

# Interface: Toolbar

[ReportViewer](../modules/ReportViewer).Toolbar

Viewer toolbar.

## Table of contents

### Methods

- [addItem](ReportViewer.Toolbar#additem)
- [getDefaultToolbarItems](ReportViewer.Toolbar#getdefaulttoolbaritems)
- [removeItem](ReportViewer.Toolbar#removeitem)
- [updateItem](ReportViewer.Toolbar#updateitem)
- [updateLayout](ReportViewer.Toolbar#updatelayout)

## Methods

### <a id="additem" name="additem"></a> addItem

▸ **addItem**<`Item`\>(`item`): `void`

Adds a new item to the toolbar.

```javascript
var pdfExportButton = {
    key: '$pdfExportButtonKey',
    iconCssClass: 'mdi mdi-file-pdf',
    enabled: true,
    action: function(item) {
        console.log('Export to PDF function works here');
    },
    onUpdate: function(arg, item) {
        console.log('Something in viewer was updated, check/update button state here');
    }
};
viewer.toolbar.addItem(pdfExportButton);
```

#### Type parameters

| Name | Type |
| :------ | :------ |
| `Item` | extends `Without`<`ToolbarItemButton`, `ToolbarItemDropdown`\> & { `enabled?`: `boolean` ; `icon?`: `Icon` ; `iconCssClass?`: `string` ; `key`: `string` ; `text?`: `string` ; `title?`: `string` ; `action?`: (`curr?`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\> ; `onUpdate?`: (`args`: `ChangedEventArgs`, `curr`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\>  } & { `items`: `DropdownItem`[] ; `selectedKey?`: `string`  } \| `Without`<`ToolbarItemDropdown`, `ToolbarItemButton`\> & { `enabled?`: `boolean` ; `icon?`: `Icon` ; `iconCssClass?`: `string` ; `key`: `string` ; `text?`: `string` ; `title?`: `string` ; `action?`: (`curr?`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\> ; `onUpdate?`: (`args`: `ChangedEventArgs`, `curr`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\>  } & { `checked?`: `boolean`  } = `Without`<`ToolbarItemButton`, `ToolbarItemDropdown`\> & { `enabled?`: `boolean` ; `icon?`: `Icon` ; `iconCssClass?`: `string` ; `key`: `string` ; `text?`: `string` ; `title?`: `string` ; `action?`: (`curr?`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\> ; `onUpdate?`: (`args`: `ChangedEventArgs`, `curr`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\>  } & { `items`: `DropdownItem`[] ; `selectedKey?`: `string`  } \| `Without`<`ToolbarItemDropdown`, `ToolbarItemButton`\> & { `enabled?`: `boolean` ; `icon?`: `Icon` ; `iconCssClass?`: `string` ; `key`: `string` ; `text?`: `string` ; `title?`: `string` ; `action?`: (`curr?`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\> ; `onUpdate?`: (`args`: `ChangedEventArgs`, `curr`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\>  } & { `checked?`: `boolean`  } |

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `item` | `Item` | An item to be added. |

#### Returns

`void`

___

### <a id="getdefaulttoolbaritems" name="getdefaulttoolbaritems"></a> getDefaultToolbarItems

▸ **getDefaultToolbarItems**(): `string`[]

Gets the list of default toolbar items.

#### Returns

`string`[]

___

### <a id="removeitem" name="removeitem"></a> removeItem

▸ **removeItem**(`key`): `void`

Removes a toolbar item.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `key` | `string` | The toolbar item key, as it was specified in the addItem parameters. |

#### Returns

`void`

___

### <a id="updateitem" name="updateitem"></a> updateItem

▸ **updateItem**<`Item`\>(`key`, `itemUpdate?`): `void`

Updates a previously added toolbar item.

#### Type parameters

| Name | Type |
| :------ | :------ |
| `Item` | extends `Without`<`ToolbarItemButton`, `ToolbarItemDropdown`\> & { `enabled?`: `boolean` ; `icon?`: `Icon` ; `iconCssClass?`: `string` ; `key`: `string` ; `text?`: `string` ; `title?`: `string` ; `action?`: (`curr?`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\> ; `onUpdate?`: (`args`: `ChangedEventArgs`, `curr`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\>  } & { `items`: `DropdownItem`[] ; `selectedKey?`: `string`  } \| `Without`<`ToolbarItemDropdown`, `ToolbarItemButton`\> & { `enabled?`: `boolean` ; `icon?`: `Icon` ; `iconCssClass?`: `string` ; `key`: `string` ; `text?`: `string` ; `title?`: `string` ; `action?`: (`curr?`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\> ; `onUpdate?`: (`args`: `ChangedEventArgs`, `curr`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\>  } & { `checked?`: `boolean`  } = `Without`<`ToolbarItemButton`, `ToolbarItemDropdown`\> & { `enabled?`: `boolean` ; `icon?`: `Icon` ; `iconCssClass?`: `string` ; `key`: `string` ; `text?`: `string` ; `title?`: `string` ; `action?`: (`curr?`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\> ; `onUpdate?`: (`args`: `ChangedEventArgs`, `curr`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\>  } & { `items`: `DropdownItem`[] ; `selectedKey?`: `string`  } \| `Without`<`ToolbarItemDropdown`, `ToolbarItemButton`\> & { `enabled?`: `boolean` ; `icon?`: `Icon` ; `iconCssClass?`: `string` ; `key`: `string` ; `text?`: `string` ; `title?`: `string` ; `action?`: (`curr?`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\> ; `onUpdate?`: (`args`: `ChangedEventArgs`, `curr`: `ToolbarItemBase`<`T`\>) => `void` \| `Partial`<`ToolbarItemBase`<`T`\>\>  } & { `checked?`: `boolean`  } |

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `key` | `string` | the toolbar item key, as it was specified in the addItem parameters. |
| `itemUpdate?` | `Partial`<`Item`\> | New toolbar item settings. |

#### Returns

`void`

___

### <a id="updatelayout" name="updatelayout"></a> updateLayout

▸ **updateLayout**(`layout`): `void`

Defines the toolbar items layout (order and visibility) for different view modes.
A parameter is an object with default, full-screen, mobile mode properties (each property is an array of items to be shown in specific views). Setting to default will only affect all modes (full-screen, mobile) if they are not specified externally.

```javascript
viewer.toolbar.addItem(pdfExportButton); //now you want to remove everything except pdfExportButton and the navigation block.
viewer.toolbar.updateLayout({default: ['$pdfExportButtonKey', '$navigation']});
```

will create a toolbar with the export button and the "navigation" block.

#### Parameters

| Name | Type |
| :------ | :------ |
| `layout` | [`ToolbarLayout`](../modules/ReportViewer#toolbarlayout) |

#### Returns

`void`