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

How to dynamically change report parameters and refresh report?

Thread ID:

Created:

Updated:

Platform:

Replies:

131584 Jul 18,2017 08:49 AM UTC Sep 26,2017 12:53 PM UTC AngularJS 5
loading
Tags: ejReportViewer
Peter Horak
Asked On July 18, 2017 08:49 AM UTC

I would like to change report parameters using inputs in my html and refresh the report viewer dynamically on input changes. My form and the corresponding controller are in separate files (html, js). How can I achieve this?
HTML:

<section data-ng-controller="ergebnisController as vm">

<div class="panel panel-default col-sm-12 formRemovePadding">


<div class="panel-heading">

<div class="form-group">

<h5 class="panel-title col-sm-9">Berichtsparameterh5>

div>

div>


<div class="panel-body">

<div class="form-group">

<label for="vorjahrAnzeigen" class="col-sm-2 control-label">Vorjahr anzeigenlabel>

<div class="col-sm-1">

<input type="checkbox" class="form-control" id="vorjahrAnzeigen"

data-ng-model="vm.vorjahrAnzeigen"

ng-change="vm.parameterChanged()" />

div>

<label for="prozentAnzeigen" class="col-sm-2 control-label">Prozentwerte anzeigenlabel>

<div class="col-sm-1">

<input type="checkbox" class="form-control" id="prozentAnzeigen"

data-ng-model="vm.prozentAnzeigen"

ng-change="vm.parameterChanged()" />

div>

<label for="kontonummerAnzeigen" class="col-sm-2 control-label">Kontonummern anzeigenlabel>

<div class="col-sm-1">

<input type="checkbox" class="form-control" id="kontonummerAnzeigen"

data-ng-model="vm.kontonummerAnzeigen"

ng-change="vm.parameterChanged()" />

div>

div>

div>


div>


<div id="container" ej-reportviewer e-reportserviceurl="vm.reportServiceUrl"

e-processingmode="vm.localMode" e-isresponsive="true"

e-reportpath="vm.rdlcReportPath"

e-locale="de-DE"

e-renderingcomplete="vm.loadComplete"

style="width:100%;height:680px;">

div>



section>

JS:

(function () {

'use strict';


var controllerId = 'ergebnisController';


angular

.module('app')

.controller(controllerId, ergebnisController);


ergebnisController.$inject = ['$location', '$scope', 'config', 'common', 'tableHelper', 'dataservice', 'modalService', 'userFactory'];


function ergebnisController($location, $scope, config, common, tableHelper, dataservice, modalService, userFactory) {


//Variables

var vm = this;

vm.dataLoaded = false; //for Spinner


vm.reportServiceUrl = common.serviceUrl(config.apiServices.reportapi);

vm.localMode = ej.ReportViewer.ProcessingMode.Local;

vm.rdlcReportPath = 'Ergebnis.rdlc';


vm.vorjahrAnzeigen = false;

vm.prozentAnzeigen = false;

vm.kontonummerAnzeigen = true;


//Methoden

vm.loadComplete = loadComplete;

vm.parameterChanged = parameterChanged;


common.activateController(controllerId);


loadData();


function loadData() {


userFactory.model.loadCurrentUser().then(

function (success) {

vm.user = userFactory.model.user;


initReport();

});

}


function initReport() {


$("#container").ejReportViewer({

parameters: [{

name: 'Jahr',

labels: ['Jahr'],

prompt: 'Jahr:',

values: [vm.selectedRechnungsperiode.jahr],

nullable: false

}, {

name: 'VorjahrAnzeigen',

labels: ['Vorjahr anzeigen'],

prompt: 'Vorjahr anzeigen:',

values: [vm.vorjahrAnzeigen],

nullable: false

}, {

name: 'ProzentAnzeigen',

labels: ['Prozentwerte anzeigen'],

prompt: 'Prozentwerte anzeigen:',

values: [vm.prozentAnzeigen],

nullable: false

}, {

name: 'KontonummerAnzeigen',

labels: ['Kontonummern anzeigen'],

prompt: 'Kontonummern anzeigen:',

values: [vm.kontonummerAnzeigen],

nullable: false

}],

});

}


// handler for renderingcomplete event

function loadComplete(args) {

if (args.reportParameters) {

// iterate over the report parameters

for (var i in args.reportParameters) {

if (common.isNumber(i)) {

if (args.reportParameters[i].DataType === "Boolean") {

for (var index = 1; index <= 2; index++) {

var spanTag = $($('#' + args.reportParameters[i].ControlId + '_0' + index).parent()).siblings('span');

if (spanTag && spanTag[0].innerText.toLowerCase() === "true") {

spanTag[0].innerText = "ja";

} else {

spanTag[0].innerText = "nein";

}

}

}

}

}

}

}


// refresh ReportViewer

function parameterChanged() {


}

}

})();


Yuvaraj Devarajan [Syncfusion]
Replied On July 19, 2017 07:35 AM UTC

Hi Peter, 

Thanks for contacting Syncfusion support. 

We have an option to achieve your requirement by passing the external value to report parameter dynamically from viewer to WebAPI using doAjaxPost method in control render viewer page as shown in following code example, 

View: 
       function changeParam() { 
            var paramdata = $("#textParam").val(); 
            if (paramdata != "") 
            { 
                    var proxy = $('#container').data('ejReportViewer');                   
                    proxy._refresh = true;                    
                    _params = []; 
                    _params.push({ Name: 'StateProvinceCode', Values: [paramdata], Labels: [paramdata] }); 
                    proxy._refreshReport(); 
            }            
        } 

webAPI: 
        public void OnReportLoaded(ReportViewerOptions reportOption) 
        { 
            var parameters = new List<Syncfusion.Reports.EJ.ReportParameter>(); 
            if (System.Web.HttpContext.Current.Items.Contains("parakey")) 
            { 
                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"); 
            } 
 
            reportOption.ReportModel.Parameters = parameters; 
            if (parameters != null && parameters.Count > 0) 
            { 
                reportOption.ReportModel.DataSources.Clear(); 
                reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "StoreSales", Value = StoreSales.GetData(parameters[0].Values[0]) }); 
            } 
            else 
            { 
                reportOption.ReportModel.DataSources.Clear(); 
                reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "StoreSales", Value = StoreSales.GetData("GA") }); 
            }                 
        } 

We have prepared a sample and it can be downloaded from below location, 

Regards, 
Yuvaraj D. 


Peter Horak
Replied On July 19, 2017 12:03 PM UTC

It's working perfectly. Many thanks...


Yuvaraj Devarajan [Syncfusion]
Replied On July 20, 2017 04:42 AM UTC

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


Peter Horak
Replied On September 25, 2017 02:39 PM UTC

When the report is shown initially the webapi backend (ReportApiController) hasn't got the parameters with their values. Therefore it's not possible to select data corresponding to the default parameter values. Is it possible to pass the default parameter values and selecting the corresponding data before the report is shown (maybe in OnReportLoaded() of the ReportApiController)?


Ravi Kumar Gurunathan [Syncfusion]
Replied On September 26, 2017 12:53 PM UTC

Hi Peter, 
 
We can achieve your requirement to pass the default parameter values from viewer to WebAPI controller and selecting the corresponding data in OnReportLoaded() as shown in following code example, 
 
View: 
<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/Region.rdlc'; 
                $scope.mode = ej.ReportViewer.ProcessingMode.Local; 
                $scope.toolbar = { items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Parameters }; 
                $scope.parameter = [{ 
                    name: 'StateProvinceCode', 
                    labels: ['FL'], 
                    values: ['FL'], 
                }]; 
            }); 
        </script> 
 
webAPI: 
public object PostReportAction(Dictionary<string, object> jsonResult) 
        { 
            if (jsonResult.ContainsValue("GetDataSourceCredential")) 
            { 
                // default parameters are added into the same parakey 
                System.Web.HttpContext.Current.Items.Add("parakey", jsonResult.ContainsKey("params") ? jsonResult["params"] : jsonResult["parameters"]); 
            } 
            return ReportHelper.ProcessReport(jsonResult, this); 
        } 
 
We have prepared a sample and it can be downloaded from below location,  
 
Ravi kumar G 
 


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

;