You can hide the component toolbar to show customized user interface or to customize the toolbar icons and elements appearances using the templates and Report Viewer toolbar customization properties.
In this tutorial, the
sales-order-detail.rdl
report is used, and it can be downloaded from here. You can add the reports from Syncfusion installation location. For more information, see Samples and demos.
To hide toolbar items, set the toolbarSettings
property. The following code can be used to remove the parameter option from the toolbar and hide the parameter block.
Similarly, you can show or hide all other toolbar options with the help of toolbarSettings.items
enum.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: {
items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Parameters
}
});
});
You can view the Web API service used in the above code from the Reporting Service git hub location. For more information, see Samples and demos.
The following code sample hides the print options from the toolbar items.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: {
items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print
}
});
});
To enable stop option in toolbar, set the toolbarSettings.items
property to ej.ReportViewer.ToolbarItems.All
. The following code can be used to enable stop option in toolbar.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: {
items: ej.ReportViewer.ToolbarItems.All
}
});
});
To enable export setup option in toolbar, set the toolbarSettings.items
property to ej.ReportViewer.ToolbarItems.All
. The following code can be used to enable export setup option in toolbar.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: {
items: ej.ReportViewer.ToolbarItems.All
}
});
});
To enable search text option in toolbar, set the toolbarSettings.items
property to ej.ReportViewer.ToolbarItems.All
. The following code can be used to enable search text option in toolbar.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: {
items: ej.ReportViewer.ToolbarItems.All
}
});
});
To hide the Report Viewer toolbar set the showToolbar
property to false.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: { showToolbar: false }
});
});
The Report Viewer provides the exportOptions
property to show or hide the default export types available in the component. The following code hides the HTML export type from the default export options.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
exportSettings: { exportOptions:ej.ReportViewer.ExportOptions.All & ~ej.ReportViewer.ExportOptions.Html }
});
});
To add custom items to the export drop-down available in the Report Viewer toolbar, use the property customItems
and provide the JSON array of collection input with the index
, cssClass
name, and value
properties. Register the exportItemClick
event to handle the custom item actions as given in following code snippet..
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
//Export click event handler
function onExportItemClick(args) {
if (args.value === "Text File") {
//Implement the code to export report as Text
alert("Text File export option clicked");
} else if (args.value === "DOT") {
//Implement the code to export report as DOT
alert("DOT export option clicked");
}
}
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
exportSettings: {
excelFormat: ej.ReportViewer.ExcelFormats.Excel2013,
wordFormat: ej.ReportViewer.WordFormats.Word2013,
exportOptions: ej.ReportViewer.ExportOptions.All & ~ej.ReportViewer.ExportOptions.Html,
customItems: [{
index: 2,
cssClass: '',
value: 'Text File'
},
{
index: 4,
cssClass: '',
value: 'DOT'
}]
},
exportItemClick: onExportItemClick
});
});
You can add custom items to Report Viewer toolbar using the toolbarSettings
property. You must register the toolBarItemClick
event to handle the newly added custom items action.
To add a custom item to existing toolbar group use the property customItems
in toolbarSettings
and provide the JSON array of collection input with the groupIndex
, index
, itemType
, cssClass
name, and tooltip
properties as given in following code snippet.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
//Toolbar click event handler
function ontoolBarItemClick(args) {
if (args.value === "CustomItem") {
//Implement the code to CustomItem toolbar option
alert("CustomItem toolbar option Clicked");
}
}
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: {
showToolbar: true,
items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print,
customItems: [{
groupIndex: 1,
index: 1,
type: 'Default',
id:'CustomItem',
cssClass: "e-icon e-mail e-reportviewer-icon CustomItem",
tooltip: { header: 'CustomItem', content: 'toolbaritems'}
}]
},
toolBarItemClick: ontoolBarItemClick
});
});
To add new toolbar group and custom items to it, use the property customGroups
in toolbarSettings
and provide the JSON array of collection input with the groupIndex
, items
properties. The items
must have the properties itemType
, cssClass
and tooltip
as given in following code snippet.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>
//Toolbar click event handler
function ontoolBarItemClick(args) {
if (args.value === "CustomGroup") {
//Implement the code to CustomGroup toolbar option
alert("CustomGroup toolbar option clicked");
}
if (args.value === "subCustomGroup") {
//Implement the code to subCustomGroup toolbar option
alert("SubCustomGroup toolbar option clicked");
}
}
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: {
showToolbar: true,
items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print,
customGroups: [{
items: [{
type: 'Default',
cssClass: "e-icon e-mail e-reportviewer-icon CustomGroup",
id: 'CustomGroup',
tooltip: { header: 'CustomGroup', content: 'toolbargroups'}
},
{
type: 'Default',
cssClass: "e-icon e-mail e-reportviewer-icon subCustomGroup",
id: 'subCustomGroup',
tooltip: { header: 'subCustomGroup', content: 'subtoolbargroups'}
}],
groupIndex: 3
}]
},
toolBarItemClick: ontoolBarItemClick
});
});