Report Viewer SDK
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

toolbarSettings

Properties

click

string

Fires when user click on toolbar item in the toolbar.

Defaults to empty

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{click: "onToolbarClick"}
        });
</script>

items

enum

Specifies the toolbar items.

Name Description
Print Specifies the Print as value in ToolbarItems to get specified item.
Refresh Specifies the Refresh as value in ToolbarItems to get specified item.
Stop Specifies the Stop as value in ToolbarItems to get specified item.
Zoom Specifies the Zoom as value in ToolbarItems to get specified item.
FittoPage Specifies the FittoPage as value in ToolbarItems to get specified item.
Export Specifies the Export as value in ToolbarItems to get specified item.
PageNavigation Specifies the PageNavigation as value in ToolbarItems to get specified item.
Parameters Specifies the Parameters as value in ToolbarItems to get specified item.
PrintLayout Specifies the PrintLayout as value in ToolbarItems to get specified item.
PageSetup Specifies the PageSetup as value in ToolbarItems to get specified item.
ExportSetup Specifies the ExportSetup as value in ToolbarItems to get specified item.
Find Specifies the Find as value in ToolbarItems to get specified item.
Analytics Specifies the Analytics as value in ToolbarItems to get specified item.
Settings Specifies the Settings as value in ToolbarItems to get specified item.
LimitRecordSetup Specifies the LimitRecordSetup as value in ToolbarItems to get specified item.
All Shows all toolbar items.

Defaults to null

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{ items: ej.ReportViewer.ToolbarItems.All }
        });
</script>

toolbars

enum

Specifies the toolbars.

Name Description
Horizontal Specifies the Horizontal as value in Toolbars to display horizontal toolbar.
Vertical Specifies the Vertical as value in Toolbars to display vertical toolbar.
All Shows both vertical and horizontal toolbars.

Defaults to All

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{ toolbars: ej.ReportViewer.Toolbars.All & ~ej.ReportViewer.Toolbars.Horizontal }
        });
</script>

showToolbar

boolean

Shows or hides the toolbar.

Defaults to true

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{ showToolbar: true }
        });
</script>

showTooltip

boolean

Shows or hides the tooltip of toolbar items.

Defaults to true

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{ showTooltip: true }
        });
</script>

autoHide

boolean

Enable or Disable auto hide for horizontal toolbar.

Defaults to true

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{ autoHide: true }
        });
</script>

autoHideDelay

number

Set auto hide time delay for horizontal toolbar.

Defaults to 5

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{ autoHideDelay: 5 }
        });
</script>

templateId

string

Specifies the toolbar template ID.

Defaults to empty

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{ templateId: "customtoolbarId" }
        });
</script>

customItems

array

Add the custom icon item to the toolbar.

Defaults to empty

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{
                customItems: [{
                            groupIndex: 1,
                            index: 1,
                            type: 'Default',
                            prefixIcon: "e-icons e-save",
                            appendTo: 'HorizontalToolbar',
                            id: "customItem",
                            cssClass: "CustomItem",
                            tooltip: { header: 'CustomItem', content: 'toolbaritems', value: 'CustomItem' },
                            sidePanel: { isEnabled: true, title: 'Custom Panel', id: 'custom-panel' }
                        }]
            }
        });
</script>

customGroups

array

Add the custom icon groups to the toolbar.

Defaults to empty

Example

<div id="reportviewer"></div>
<script>
    $("#reportviewer").boldReportViewer(
        {
            toolbarSettings:{
                customGroups: [{
                            items: [{
                                type: 'Default',
                                prefixIcon: "e-icons e-save",
                                id: "customGroup",
                                cssClass: "CustomGroup",
                                tooltip: { header: 'CustomItem', content: 'toolbaritems', value: 'CustomItem' }
                            },
                            {
                                type: 'Default',
                                prefixIcon: "e-icons e-save",
                                id: "customsubGroup",
                                cssClass: "subCustomGroup",
                                tooltip: { header: 'subCustomGroup', content: 'subtoolbargroups', value: 'subCustomGroup' }
                            }],
                            appendTo: 'VerticalToolbar',
                            groupIndex: 3
                        }],
            }
        });
</script>