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.

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] }); 
            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 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\ JavaScript\ng1 app 

Regards, 
Yuvaraj D. 


Loader.
Up arrow icon