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. jQuery
  4. Change report parameters and refresh
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.

Change report parameters and refresh

i am new to syncfusion plataform.  i am trying to change  the report parameters and refresh the report, i dont know how to get a reference to the  report viewer from angular

this is my view

<div class="row">
    <label class="control-label col-md-1" for="">Fecha </label>
    <div class="col-md-2">
        <input ng-model="$ctrl.desde" style="width: 100%;" />
    </div>
    <div class="col-md-2">
        <input  ng-model="$ctrl.hasta" style="width: 100%;" />
    </div>
    <button type="button" class="btn btn-large btn-block btn-success">Consultar</button>
</div>
<div class="row">
    <div class="control" style="min-height: 680px !important;">
        <div ej-reportviewer id="container" e-reportserviceurl="$ctrl.reportServiceUrl" e-reportpath="$ctrl.reportPath" e-processingmode="$ctrl.processingMode" style="height:680px"></div>
    </div>
</div>

and this is my component

(function (angular) {
    'use strict';
    function ventaPorVendedorController($http,appConfig) {
        var ctrl = this;
        ctrl.desde = '01/01/2016';
        ctrl.hasta = '31/01/2016';
        ctrl.reportServiceUrl=appConfig.apiUrl +"api/Reports";
        ctrl.processingMode= ej.ReportViewer.ProcessingMode.Local;
        ctrl.reportPath= 'Ventas.rdl';
        ctrl.consultar = function () {
            // update report parameters and refresh
        }
    }
    angular.module('app').component('clienteReporteVentaPorVendedor', {
        templateUrl: '/App/Cliente/Reporte/Venta/porVendedor.tpl.html',
        controller: ventaPorVendedorController,
        bindings: { $router: '<' },
    });
})(window.angular);




3 Replies
YD Yuvaraj Devarajan Syncfusion Team May 31, 2016 08:49 AM UTC

Hi Gabriel, 

Thanks for contacting Syncfusion support. 

i dont know how to get a reference to the  report viewer from angular 
We can get the reference of the ReportViewer from angular js as shown in the below code example. 

JS: 
           angular.module('syncApp', ['ejangular']).controller('ReportController', function ($scope) { 
            $scope.report = true; 
            $scope.samplevalue = 'http://' + window.location.host + '/api/ReportApi'; 
            $scope.path = '~/Report/Dependent.rdl'; 
            $scope.mode = ej.ReportViewer.ProcessingMode.Remote; 
        }););             


Please refer to the below UG documentation for more information, 

i am trying to change  the report parameters and refresh the report,  
We can Refresh the report or change the ReportParameter from client side(JS) to server side(WebAPI) as shown in the below code example. 

JS: 
angular.module('syncApp', ['ejangular']).controller('ReportController', function ($scope) { 
            $scope.report = true; 
            $scope.samplevalue = 'http://' + window.location.host + '/api/ReportApi'; 
            $scope.path = '~/Report/Dependent.rdl'; 
            $scope.mode = ej.ReportViewer.ProcessingMode.Remote; 
 
            $scope.Refresh = function () { 
                var proxy = $('#container').data('ejReportViewer'); 
                proxy._refresh = true; 
                $('#' + proxy._id + '_viewBlockContainer .e-reportviewer-viewerblockcontent table:first').attr('isviewclick', 'true'); 
                _params = []; 
                _params.push({ Name: 'ReportParameter1', Values: [1], Labels: ['Bikes'] }); 
                proxy._refreshReport(); 
            } 
 
            ej.ReportViewer.prototype.doAjaxPost = function (type, url, jsondata, onSuccess) { 
                var proxy = $('#container').data('ejReportViewer'); 
                var inVokemethod = onSuccess; 
 
                $.ajax({ 
                    type: type, 
                    url: url, 
                    crossDomain: true, 
                    contentType: 'application/json; charset=utf-8', 
                    dataType: 'json', 
                    data: jsondata, 
                    beforeSend: function (req) { 
                        if (inVokemethod == "_getDataSourceCredential") { 
                            var _json = jQuery.parseJSON(this.data); 
                            if (_params != null) { 
                                _json["params"] = _params; 
                            } 
                            this.data = JSON.stringify(_json); 
                        } 
 
                        if (inVokemethod == "_getPageModel" || inVokemethod == "_getPreviewModel") { 
                            if (!proxy._isToolbarClick) { 
                                proxy._showloadingIndicator(true); 
                                proxy._updateDatasource = true; 
                            } else { 
                                proxy._showNavigationIndicator(true); 
                            } 
                        } 
                        req.setRequestHeader('ejAuthenticationToken', proxy._authenticationToken); 
                    }, 
                    success: function (data) { 
                        if (data && typeof (data.Data) != "undefined") { 
                            data = data.Data; 
                        } 
                        if (typeof (data) == "string") { 
                            if (data.indexOf("Sf_Exception") != -1) { 
                                proxy._renderExcpetion(inVokemethod + ":" + data); 
                                return; 
                            } 
                        } 
                        proxy[inVokemethod](data); 
                    }, 
                }); 
            } 
        });               
  
WebAPi: 
public void OnReportLoaded(ReportViewerOptions reportOption) 
        { 
            var parameters = new List<Syncfusion.Reports.EJ.ReportParameter>(); 
            if (System.Web.HttpContext.Current.Items.Contains("parakey")) 
            { 
                reportOption.ReportModel.Parameters = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<List<Syncfusion.Reports.EJ.ReportParameter>> 
(System.Web.HttpContext.Current.Items["parakey"].ToString()); 
                System.Web.HttpContext.Current.Items.Remove("parakey"); 
            }                               
        } 

We have prepared the sample based on this and it can be downloaded from the below location, 

You can obtain the JavaScript ReportViewer samples from the below build installed location, 
%userprofile%\AppData\Local\Syncfusion\EssentialStudio\version\JavaScript\reportsamples 

 
Regards, 
Yuvaraj D 


GA gabriel May 31, 2016 05:09 PM UTC

Thanks, i will try this solution

YD Yuvaraj Devarajan Syncfusion Team June 1, 2016 03:55 AM UTC

Hi Gabriel, 

Thanks for your update. We will wait to hear from you. 

Regards, 
Yuvaraj D 


Loader.
Up arrow icon