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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change report parameters and refresh

Thread ID:

Created:

Updated:

Platform:

Replies:

124300 May 30,2016 07:25 PM UTC Jun 1,2016 03:55 AM UTC JavaScript 3
loading
Tags: ejReportViewer
gabriel
Asked On May 30, 2016 07:25 PM UTC

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);




Yuvaraj Devarajan [Syncfusion]
Replied On 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 


gabriel
Replied On May 31, 2016 05:09 PM UTC

Thanks, i will try this solution

Yuvaraj Devarajan [Syncfusion]
Replied On June 1, 2016 03:55 AM UTC

Hi Gabriel, 

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

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

;