Customize the ASP.NET Document Viewer's Toolbar
- 2 minutes to read
This tutorial describes how to customize the toolbar used for navigation in web reports by hiding its print commands, customizing captions and adding a custom button.
Perform the actions below to customize the Document Viewer Toolbar.
Create a Web Application
To get started with this tutorial, open an existing ASP.NET Web Application with a print preview or create a new one from scratch. To learn how to add a print preview to a web application, refer to the Add a Document Viewer to an ASP.NET WebForms Application tutorial.
Remove Items from the Toolbar
To remove items from the report toolbar, do the following.
Click the document viewer’s smart tag and click the Designer… link in the invoked actions list.
In the invoked ASPxDocumentViewer Designer, click Toolbar Items in the designer’s menu to open the toolbar item editor. To display default toolbar items, click the Default Items button.
To remove the PrintReport, PrintPage and ReportToolbarSeparator items from the report toolbar, select these items on the toolbar items list and click the Remove button (
).
Add a Custom Button
To add a custom button to the report toolbar, do the following.
Invoke the ASPxDocumentViewer Designer (as described in the previous section), click the Add button (
) and in the invoked drop-down menu select Button.
Change the Name property of the newly added button to German KlickMich and its Text property to Klick mich. To apply the changes, click OK.
You can also specify a glyph to display on a button by setting its ImageUrl property. To specify a separate glyph to display on the button when it is disabled, set its ImageUrlDisable as well.
To specify client-side behavior for the custom button, open the ASPxDocumentViewer Designer and click the Client-Side Events menu item to invoke the client-side events editor.
In this dialog, select the ToolbarItemClick event handler and write a JavaScript code as shown below.
Localize the Web Report Toolbar
To change the text of a report toolbar item, specify its Text property using the toolbar item editor. In this example, the text “Page…of” is changed to its German equivalent (“Seite…von”).
To localize the text of an item’s tooltip, specify its ToolTip property.
View the Result
The result is shown in the following image.
