Demo - Customizing the Viewer toolbar

by Troy Taylor

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.viewer.min.js"></script>
<div class="container">

  <h1>
    Customizing the Viewer toolbar
  </h1>
  <p>
    This sample shows a simple way to customize the
    Wijmo Viewer toolbars, which is to use the
    querySelector command to locate the buttons you
    want and removing them from the DOM.</p>
  <p>
    In this case, we remove the Print, Export, and Search
    buttons from the toolbar and side bars.</p>
  <div id="theViewer">
  </div>
</div>

JavaScript

onload = function() {

  var viewer = new wijmo.viewer.ReportViewer('#theViewer', {
    serviceUrl: 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report',
    filePath: 'ReportsRoot/Formatting/AlternateBackground.flxr',
    reportName: 'AlternateBackground'
    //filePath: 'ReportsRoot/DataManipulation/Parameters.flxr',
    //reportName: 'Parameters'
  })

  // remove printlayout/print/export buttons
  var host = viewer.hostElement;
  var commands = [0, 1, 28]; // print layout, print, export
  commands.forEach(function(cmd) {
    var btn = host.querySelector('.wj-toolbar a.wj-btn[command-tag="' + cmd + '"]');
    wijmo.removeChild(btn);
  });

  // remove the separator after the print button
  var separator = host.querySelector('.wj-toolbar span.wj-separator');
  wijmo.removeChild(separator);

  // remove the search/export buttons from the left panel
  var btns = host.querySelectorAll('.wj-viewer-leftpanel ul > li');
  wijmo.removeChild(btns[3]); // search
  wijmo.removeChild(btns[4]); // export

}