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
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.

How to dynamically change report parameters and refresh report?

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() {


}

}

})();


5 Replies

YD Yuvaraj Devarajan Syncfusion Team 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. 



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

It's working perfectly. Many thanks...



YD Yuvaraj Devarajan Syncfusion Team 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. 



PH Peter Horak 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)?



RK Ravi Kumar Gurunathan Syncfusion Team 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 
 


Loader.
Live Chat Icon For mobile
Up arrow icon