Html5 Report Viewer in MVC w/ Layout Page

[Matt Miller]

I have been trying to incorporate the html5 report viewer in mvc 4 app by following this tutorial :  HTML5 Report Viewer Tutorial

My reports are rendering in the report viewer fine , except the report viewer seems to override the menu/login/etc content of my layout page.

When i view source of the rendered page, these elements are defined, but not visible because of the report viewer.

Here are my controller definitions: 

using Telerik.Reporting.Cache.Interfaces;
using Telerik.Reporting.Services.Engine;
using Telerik.Reporting.Services.WebApi;


namespace CNX.WebUI.Controllers
{
    public class MenuReportController : Controller
    {

        public ViewResult ReportMenuAction(string FileName)
        {
            TempData["fileName"] = FileName;
            return View();
        }
    }
}

and 

using Telerik.Reporting;
using Telerik.Reporting.Cache.Interfaces;
using Telerik.Reporting.Services.Engine;
using Telerik.Reporting.Services.WebApi;
using System.Web;

namespace CNX.WebUI.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 CacheFactory.CreateFileCache();
        }

    }
}

I have attached my layout view , the view where my report viewer is defined , and the view source text file.

This may be obvious to someone else, but i have been struggling to get the report to render properly for days now.

Should i be defining a custom report viewer template for use with a layout page? Are there settings in the report viewer definition i have incorrect for 
use with a layout view?

Any help would be most appreciated.

[Stef]

Hello Matt,

The reason the HTML5 Report Viewer is displayed in the whole browser is the style applied at step 6 in the How-to: Using HTML5 Report Viewer extension in an ASP.NET MVC4 application help article. You can adjust the viewer position by changing the CSS e.g.:

<style>
        #reportViewer1 {
            position: relative;
            width:100%;
            height:500px;
        }
</style>

I hope this information helps you.

Regards,
Stef
Telerik