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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customizing Toolbar using AngularJS directive

Thread ID:

Created:

Updated:

Platform:

Replies:

131549 Jul 16,2017 11:27 AM Jul 20,2017 12:43 AM AngularJS 3
loading
Tags: ejReportViewer
Peter Horak
Asked On July 16, 2017 11:27 AM

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?

Yuvaraj Devarajan [Syncfusion]
Replied On July 17, 2017 08:51 AM

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. 


Peter Horak
Replied On July 19, 2017 08:04 AM

It's working perfectly. Many thanks...


Yuvaraj Devarajan [Syncfusion]
Replied On July 20, 2017 12:43 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;