Customize the Document Viewer Tab Panel in React Application
- 3 minutes to read
Remove the Tab Panel
Use the CustomizeElements callback to get the Tab Panel by its PreviewElements ID and remove the Tab Panel from the collection of UI elements:
import { PreviewElements } from 'devexpress-reporting/dx-webdocumentviewer'
import React from "react";
import ko from "knockout";
import "./App.css";
class ReportViewer extends React.Component {
constructor(props) {
super(props);
this.reportUrl = ko.observable("XtraReport1");
this.requestOptions = {
// Specify the server-side application port.
host: "https://localhost:52454/",
invokeAction: "DXXRDV"
};
this.callbacks = {
CustomizeElements: function(s, e) {
var panelPart = e.GetById(PreviewElements.RightPanel);
var index = e.Elements.indexOf(panelPart);
e.Elements.splice(index, 1);
}
};
}
render() {
return (
<div>
<div
ref="viewer"
data-bind="dxReportViewer: $data"
style={{ width: "100%", height: "900px" }}
/>
</div>
);
}
componentDidMount() {
ko.applyBindings(
{
reportUrl: this.reportUrl,
requestOptions: this.requestOptions,
callbacks: this.callbacks
},
this.refs.viewer
);
}
componentWillUnmount() {
ko.cleanNode(this.refs.viewer);
}
}
export default ReportViewer;
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 function receives the IPreviewModel object and the Document Viewer’s View Model object as arguments.
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.