We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. AngularJS
  4. Customizing Toolbar using AngularJS directive
Starting in 2019, the Reporting control is no longer included in Essential Studio. If you're experiencing issues with the Syncfusion Reporting Platform, Report Viewer, Report Designer, or Report Writer, we recommend migrating to Bold Reports, our dedicated reporting platform.

Bold Reports offers a comprehensive suite of tools and features for all your reporting needs, and we will help you make a smooth transition from the discontinued control. Our support team at https://support.boldreports.com/ is here to assist you with any questions or difficulties you may encounter during the migration process.

We thank you for choosing Syncfusion and appreciate your understanding.

Customizing Toolbar using AngularJS directive

I would like to customize the ReportViewer toolbar using an Angular directive. This is the corresponding HTML:

    <div id="container" ej-reportviewer e-reportserviceurl="vm.reportServiceUrl"
         e-processingmode="vm.localMode" e-isresponsive="true"
         e-reportpath="vm.rdlcReportPath"
         e-toolbarsettings="{ items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Parameters }"
         e-locale="de-DE"
         e-renderingcomplete="vm.loadComplete"
         style="width:100%;height:680px;">
    </div>

The line beginning with "e-toolbarsettings" will hide the complete toolbar instead of just hiding the Parameter button.

What's wrong?

3 Replies
YD Yuvaraj Devarajan Syncfusion Team July 17, 2017 12:51 PM UTC

Hi Peter, 

Thanks for contacting Syncfusion support. 

On further analysis of the shared code example, you have specified the “toolbarsetting” property definition directly inside HTML tag. Hence the mentioned problem occurs at your end. In ReportViewer, we have internally used the bitwise operator for ToolbarSettings items selection. If you wish to specify the value for the “toolbarsetting” property to hide only the parameter and display other items in HTML tag, then set the value that is sum of all the toolbar item enum (959) excluding ‘Parameters’ value as shown in below code example, 
 
<div ng-controller="ReportController"> 
        <div ng-if="report"> 
            <div id="container" ej-reportviewer="ej-reportviewer" e-reportserviceurl="samplevalue" e-processingmode="mode" e-reportpath="path" e-toolbarsettings-items="959" style="height:680px"></div> 
        </div> 
    </div> 
 
The values for the toolbar items are shown in below table, 
public enum ToolbarItems 
    { 
        Export = 1, 
        Zoom = 2, 
        PageNavigation = 4, 
        Refresh = 8, 
        Print = 16, 
        DocumentMap = 32, 
        Parameters = 64, 
        PrintLayout = 128, 
        FittoPage = 256, 
        PageSetup = 512, 
        All = 1023, 
    } 
 
Also, you can set the “toolbarsetting” property in control render script to hide parameter toolbar in ReportViewer as sown in below code example, 
 
<body>    
    <div ng-controller="ReportController"> 
        <div ng-if="report"> 
            <div id="container" ej-reportviewer="ej-reportviewer" e-reportserviceurl="samplevalue" e-processingmode="mode" e-reportpath="path" e-toolbarsettings-items="toolbar" style="height:680px"></div> 
        </div> 
    </div> 
 
    <script type="text/javascript"> 
        angular.module('syncApp', ['ejangular']).controller('ReportController', function ($scope) { 
            $scope.report = true; 
            $scope.samplevalue = 'http://' + window.location.host + '/api/ReportApi'; 
            $scope.path = '~/Report/GroupingAgg.rdl'; 
            $scope.mode = ej.ReportViewer.ProcessingMode.Remote; 
            $scope.toolbar = { items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Parameters} 
        }); 
         
    </script> 
</body> 
    
We have prepared a sample and it can be download from below location, 
 
Regards, 
Yuvaraj D. 


PH Peter Horak July 19, 2017 12:04 PM UTC

It's working perfectly. Many thanks...


YD Yuvaraj Devarajan Syncfusion Team July 20, 2017 04:43 AM UTC

Hi Peter, 
 
Thanks for the update. We are happy to hear that your issue is resolved. 
 
Regards, 
Yuvaraj D. 


Loader.
Live Chat Icon For mobile
Up arrow icon