Display report based on user selection

[Craig]

I have a MVC application where I have a bunch of reports.  I want the user to be able to select a report they want to view, select the parameters and then display the selected report when they click a button.  How do I go about doing this?

[Stef]

Hi Craig,

Below you can find a quote from your support ticket on the same question, where you provided some more details:

"In your demo you are using the ASP.NET Report Viewer which requires you to use an aspx page. Our recommendation is to switch to the new HTML5 Report Viewer, which is more suitable for MVC applications. Details how it works can be found in this forum thread.

In all cases you can use the following approach:

1. Create custom UI to allow the user to select the desired report and enter report parameters;
2. Pass the saved selection the view with the viewer:
   1. In the case of the ASP.NET ReportViewer you can use a model saving the TRDX file path and the parameters' keys and values. Then in the aspx to set the ReportViewer.ReportSource to an UriReportSource, pointing the TRDX file path. The selected parameters' values can be added to the ReportSource.Parameters collection, which is mapped to the Report.ReportParameters collection by key (For more details check Report Sources).
      
      The aspx is rendered as a partial content and you will need to re-render the partial view with the updated model on changing the selected report. This can be done with a post to  controller's action.
      
      
   2. In the case of the HTML5 Report Viewer, you can use the client-side API to change the viewer's reportSource e.g., as in the How To: Pass values to report parameters. The viewer makes asynchronous calls to the service and updates the DIV element with the viewer's content.

"

If you have further questions, please let us continue the discussion in one of the threads, to avoid splitting details.


Thank you for you understanding.

Regards,
Stef
Telerik

 

 

[Craig]

Based on your recommendation, I am using the HTML5 control.  I think I have everything configured correct but all that is shown is Loading { }.  I am guessing that the control won't show up unless the report is there.  Not sure what I have wrong.  I have the report located in the Reports directory, using the EPHContext and have four parameters.  What am I mising?

The code for the viewer ->

@using Telerik.Reporting
@using Telerik.ReportViewer.Mvc
{
    <link href="/Content/ReportViewer/styles/telerikReportViewer-8.1.14.804.css" rel="stylesheet" />
    <style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
            overflow: hidden;
        }
    </style>
}

@section scripts
{
    <script src="/Content/ReportViewer/js/telerikReportViewer-8.1.14.804.js"></script>
    <link href="/Content/kendo/kendo.common.min.css" rel="stylesheet" />
    <link href="/Content/kendo/kendo.blueopal.min.css" rel="stylesheet" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.web.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.mobile.min.js"></script>
}

@(Html.TelerikReporting().ReportViewer()
        .Id("reportViewer1")
        .ServiceUrl("/api/reports/")
        .TemplateUrl("/Content/ReportViewer/templates/telerikReportViewerTemplate.htmll")
        .ReportSource(new UriReportSource() { Uri = "~/Reports/OrderSummaryByProduct.trdx" })
        .ViewMode(ViewModes.INTERACTIVE)
        .ScaleMode(ScaleModes.SPECIFIC)
        .Scale(1.0)
        .PersistSession(false)
)

My Controller classes ->

namespace EPH.Controllers
{
    public class ReportsController : ReportsControllerBase
    {
        protected override IReportResolver CreateReportResolver()
        {
            var reportsPath = HttpContext.Current.Server.MapPath("~/Reports");

            return new ReportFileResolver(reportsPath)
                .AddFallbackResolver(new ReportTypeResolver());
        }

        protected override ICache CreateCache()
        {
            return Telerik.Reporting.Services.Engine.CacheFactory.CreateFileCache();
        }
    }

    public class ReportController : BaseController
    {
        private CustomerBLL _customerBLL;
        private OrderBLL _orderBLL;
        private PaymentTypeBLL _paymentTypeBLL;
        private ReportBLL _reportBLL;

        #region Constructors
        public ReportController(IUnitOfWork unitOfWork)
            : base(unitOfWork)
        {
            _customerBLL = new CustomerBLL(unitOfWork);
            _orderBLL = new OrderBLL(unitOfWork);
            _paymentTypeBLL = new PaymentTypeBLL(unitOfWork);
            _reportBLL = new ReportBLL(unitOfWork);
        }
        #endregion

        #region Public Methods

        public ActionResult ReportsView()
        {
            var oFullParameterList = _unitOfWork.ReportRepository.GetReportParameters();
            ReportViewerModel vm = new ReportViewerModel()
            {
                Reports = new Report()
                {
                    ReportParameters = oFullParameterList.ToList()
                },
                ReportId = 1
            };
            vm.ReportsTextList = _unitOfWork.ReportRepository.GetReportTexts().ToList();
            vm.OrderStatuses = _unitOfWork.OrderRepository.GetOrderStatuses().ToList();
            return View(vm);
        }

The config file ->

<add name="EPHEntities" connectionString="metadata=res://*/EPHModel.csdl|res://*/EPHModel.ssdl|res://*/EPHModel.msl;provider=System.Data.SqlClient;provider connection string="data source=(Local);initial catalog=EPH_DEV;persist security info=True;user id=eph; password=r0krjLvV;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
<add name="DefaultConnection" connectionString="Server=(Local);Database=EPH_DEV2;user id=eph;password=r0krjLvV;MultipleActiveResultSets=True;App=EntityFramework" providerName="System.Data.SqlClient" />
<add name="EPHContext" connectionString="Server=(Local);Database=EPH_DEV;user id=eph;password=r0krjLvV;MultipleActiveResultSets=True;App=EntityFramework" providerName="System.Data.SqlClient" />

[Craig]

I was able to get rid of the { } as I forgot to add the @section header part.  Now I am still stuck with "Loading......"

[Craig]

I moved the ReportsController into its own file thinking that might be the problem but it still is stuck on Loading....  I also put a break point in ReportsController to see if it is ever called, which it is not.  I walked through the C# demo to see if I could figure out what I was missing and noticed that the report bar was showing if I put a breakpoint in ReportsController, which is not happening in my code.  At this point I am totally confused as to what is wrong.

[Stef]

Hi Craig,

If you are seeing only the 'Loading...' message without the viewer's toolbar, most probably CSS, JS and HTML files paths are not resolved correctly. This can be checked in the browser's console - there will be listed any errors caused by unsuccessful requests. You can also use Fiddler to record the requests and their responses statuses.

To test if the service responds at a given address, perform the test suggested in the How To: Add Telerik Reporting REST Web API to Web Application article (step 8). If it is responding, check the relative paths in the application, use '~' and Url.Content method to map the files correctly. For more information please refer to the MSDN article ASP.NET Web Project Paths. Verify all sections are rendered in the produced page - with the given code snippet there must be a layout view that contains the rest of the required files (jQuery link, RenderSection and RenderBody calls).

Also it is important to run the application in HTML5 compliant browser and the linked CSS, JS, HTML files to have matching versions and to be at least the minimum versions listed in the System Requirements.


Regards,
Stef
Telerik

 

 

[Stef]

Hello,

In addition, if you are running in IE, make sure the layout view has an HTML5 DOCTYPE or a meta tag forcing the browser to use a Standard rendering mode, instead of Compatibility View - Defining document compatibility.

Regards,
Stef
Telerik

 

 

[Craig]

I have been able to display a report within my application.  Thanks for your help.  I do have three items that still need to be addressed -

I was able to get the icons to display .. issue with font-awesome, but the EXPORT button does not display any selections.  Is there a configuration, that I need to setup?

The really big issue, is that this application uses bootstrap and I need to display the report in a Panel, but it won’t show
up.  Do you know how to accomplish this or is this even possible?

This is the code block from the parent that I am attempting to display the report in.

<div class="container">
    <form class="form-horizontal" id="myform" name="myform" method="post" role="form">
        <div class="form-group">
            <div class="col-md-4">
                <div class="panel panel-default equal">
                    <div class="panel-heading">Report List</div>
                    <div class="panel-body">
                        <label class="col-md-2 control-label input-sm">Report Name:</label>
                        <div class="col-md-8">
                            @Html.DropDownListFor(m => m.ReportId, new SelectList(Model.ReportsTextList, "ReportId", "Name"),
                                new { @class = "form-control input-sm-select" })
                        </div>
                    </div>
                </div>
                <div class="panel panel-default equal">
                    <div class="panel-heading">Report Parameters</div>
                    <div class="panel-body">
                        @Html.Partial("_ReportParameters")
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="panel panel-default equal">
                    <div class="panel-heading">Selected Report</div>
                    <div class="panel-body">
                        @Html.Partial("_ReportsViewer")
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 nopadright">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <a href="" id="viewbutton" type="button" class="btn btn-info" style="width:100%">Update Report</a>
                </div>
            </div>
        </div>
    </form>
</div>

It seems to have a problem with stored procedures with parameters.  If I leave the parameters blank or null, I should get all the records, but instead I get a empty row set.

 

[Stef]

Hi Craig,

Missing export options:

Please test if the Reporting REST service is configured correctly and it responds at the set viewer's serviceUrl (use the test suggested at step 8 in How To: Add Telerik Reporting REST Web API to Web Application).

• If the service responds correctly, then the reason might be in mixed Javascript files' versions - on one page there must be loaded only one jQuery and the corresponding kendo JS files' version, where the JS files must meet the minimum system requirements.
• If the service does not respond double-check its settings. If the service is hosted separately, you may need to enable CORS. Also check if all HTTP methods are enabled in the hosting environment.

Render the viewer from a partial view:

The attached files (Views.zip) are a layout, parent and partial views, where the report is displayed correctly in browser (result.png).
The important part is the CSS rules for sizing the DIV element in which is contained the viewer (in the partial view) and for the container elements. You should also check if any bootstrap CSS rules are not messing with the rendered HTML for the viewer and its content by checking the elements computed styles via Firebug, F12 Developer tools or other per browser.

Also keep in mind viewers must have unique ID per page.


Using parameterized queries to provide data in the report:

In the report you must configure the data source component to map the SQL parameters to report parameters e.g., as in the SqlDataSource Wizard article. Then you can decide whether to set default values for the report parameters, or make them visible and allow the user to select values.
You can also pass parameters values through the viewer - How To: Pass values to report parameters. The viewer's reportSource.parameters collection is mapped to the report's ReportParameters collection by key.

Keep in mind parameters' names (keys) are case sensitive. Also the format of the sent request depends on Newtonsoft.Json.dll, which should not be installed on the machine and should be with version greater than 4.5.1.0 - Reporting REST service system requirements.

To test how the report behaves with different sets of parameters values, make report parameters visible and use the Report Designer to preview the report.


Let us know how it goes and if you need any further help.

Regards,
Stef
Telerik