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

AngularJS: Update report parameters depending on input and refresh report

I'm building an web application using AngularJS for the frontend and WebAPI (C#) for the backend.

How can I update a boolean report parameter based an check box input and refresh the report?

1 Reply

YD Yuvaraj Devarajan Syncfusion Team March 6, 2017 09:50 AM UTC

Hi Peter, 

Thanks for contacting Syncfusion support. 

We can able to Refresh the report or change the Boolean value ReportParameter from client side (Checkbox input) to server side(WebAPI) as shown in below code example. 

Html page: 
        var _params = null; 
        function Refresh() {                       
            var checkBoxData = $('#Radio1').data('ejRadioButton'); 
            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: [checkBoxData.isChecked] }); 
        ej.ReportViewer.prototype.doAjaxPost = function (type, url, jsondata, onSuccess) { 
            var proxy = $('#container').data('ejReportViewer'); 
            var inVokemethod = onSuccess; 
                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._updateDatasource = true; 
                        } else { 
                    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); 

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

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

Please refer to the below UG documentation for more detail, 

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

Yuvaraj D. 

Live Chat Icon For mobile
Up arrow icon