Customize the Document Viewer Tab Panel in Angular Application
- 3 minutes to read
For information on a general technique that allows you to customize the UI elements in Reporting components, review the following help topic: Use Custom HTML Templates.
Remove the Tab Panel
Use the CustomizeElements callback to get the Toolbar element by its PreviewElements ID and remove the Toolbar from the collection of UI elements:
<div>
<dx-report-viewer [reportUrl]="reportUrl" height="800px">
<dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
</dxrv-request-options>
<dxrv-callbacks (CustomizeElements)="onCustomizeElements($event)">
</dxrv-callbacks>
</dx-report-viewer>
</div>
Add a New Tab
Create a new tab and add it to the tab collection in the Document Viewer’s View Model. The tab content is defined in a template specified in the tab constructor.
Use the BeforeRender callback to customize toolbar commands.
The callback event argument provides access to the JSReportViewer object that is the sender and to the Document Viewer’s View Model that is the argument.
The view model’s tabPanel property allows you to access a tab collection in the Tab Panel. Create a new tab (an instance of the TabInfo<T> class) and add it to the collection.
In the TabInfo constructor, specify the template used to render the tab content and the template used to render the tab image.
The customized tab panel is shown in the image below:
<!-- -->
<body>
<script type="text/html" id="my-test-panel">
<div>
<button> <span>Button</span> </button>
</div>
</script>
<script type="text/html" id="fivestar">
<svg viewBox="-3.4 -4 32 32" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_1" transform="translate(-3.4, -4)"
style="enable-background:new 0 0 32 32">
<g id="Rating_1_">
<polygon class="dxd-icon-fill"
points="16,4 19.9,11.9 28.6,13.2 22.3,19.3 23.8,28 16,23.9 8.2,28 9.7,19.3 3.4,13.2 12.1,11.9 " />
</g>
</g>
</svg>
</script>
<!-- -->
</body>
<!-- -->
A custom template can contain standard ASP.NET Web Forms components or custom controls. If you wish to use the DevExpress client-side controls, see the following help section: DevExtreme Widgets.
You can use our SVG Icon Builder tool to create custom icons. For more information, review the following help topic: How To: Draw and Use SVG Images.