Edit this page

How to move Parameters Area and Document Map on different place of the view


Product Version
Product ProgressĀ® TelerikĀ® Reporting
Viewer HTML5 Viewer


The following article demonstrate how to display the Parameters area and/or Document Map area on different place than the default ones. By default, the HTML5 Viewer's parameters area is positioned on the right sight of the viewer and the Document Map - on the left sight.


To change their location, you can customize the viewer's HTML by apply custom CSS to the viewer's elements. The provided examples are modified with custom JS and CSS rules. 1. In Html5ReportViewer-Top.html file contains a report viewer which has Parameters Area at the top and Document Map as default - at the left side. 2. In Html5ReportViewer-Reversed.html file contains a report viewer which has Parameters Area at the left side and Document Map at the right side, i.e. I reversed them.

For example when parameters area is at the top, when toggling its visibiliity, the requirement would be to move other areas to avoid the remaining white spaces. This is done by custom functions updatePagesAreaMargin and updateDocumentMapArea:

function updatePagesAreaMargin(condition, marginType) {
    if (condition) {
        $(".trv-pages-area").css(marginType, "15em");
    else {
        $(".trv-pages-area").css(marginType, "0em");
function updateDocumentMapArea(condition, marginType) {
    if (condition) {
        $(".trv-document-map").css(marginType, "15em");
    else {
        $(".trv-document-map").css(marginType, "0em");

Then apply these functions in callback function updateUi that will be called every time the UI needs an update (for more information, please check the full list of options during viewer's initialization):

updateUi: function (e) {
    var rv = e.data.sender;
    updatePagesAreaMargin(rv.commands.toggleDocumentMap.checked(), "margin-left");
    updatePagesAreaMargin(rv.commands.toggleParametersArea.checked(), "margin-top");
    updateDocumentMapArea(rv.commands.toggleParametersArea.checked(), "margin-top");

At the end, it would be needed to add custom CSS rules as provided ones in the attached project (between tags in viewer initialization file).

The rest of the placements could be done by following the same logic.

See Also

You can download the sample application containing both approaches from here. Please note that the project is build against R2 2018 v12.1.18.620 (SP1). In order to build it successfully, you will need to use the Upgrade Wizard to upgrade/downgrade to the latest installed version on the machine.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article