AngularJS: Update report parameters depending on input and refresh report

[Peter Horak]

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?

[Yuvaraj Devarajan]

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, 

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/AngularSample955545875.zip  

Please refer to the below UG documentation for more detail, 

https://help.syncfusion.com/angular-1/reportviewer/getting-started  

You can obtain the Angular ReportViewer samples from the below build installed location, 

%userprofile%\AppData\Local\Syncfusion\EssentialStudio\version\ JavaScriptg1 app 

Regards, 

Yuvaraj D.