All docs
V21.1
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Customize the Document Viewer Tab Panel in Angular Application

  • 3 minutes to read

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 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.