How do you configure Telerik's ReportViewer in MVC? - asp.net-mvc-4

Question

I have a MVC project that I'm trying to add a Telerik report to. I was able to set up a report and design it, but when I created a report viewer I get an error. I've tried adding references to Telerik dll's, adding dll's to the bin, adding various options to the web.conifg, but nothing has worked. Can you help me get this configured?
After creating my report, I used the report viewer wizard to add a view with a report viewer. I added a new item of the type "Telerik MVC Report Viewer Page Q2 2015" as described here: http://www.telerik.com/help/reporting/mvc-report-viewer-extension-embedding.html
This created a view called ReportViewerView1.cshtml. The problem is when I run the site, I get an error on the line #(Html.TelerikReporting().ReportViewer() that says
CS1061: 'System.Web.Mvc.HtmlHelper' does not contain a
definition for 'TelerikReporting' and no extension method
'TelerikReporting' accepting a first argument of type
'System.Web.Mvc.HtmlHelper' could be found (are you missing a
using directive or an assembly reference?)
I tried adding references to various dll's without success. I found http://www.telerik.com/blogs/using-the-telerik-extensions-in-asp-net-mvc4-today---a-first-look and http://www.telerik.com/blogs/telerik-reporting-in-mvc-sure-it-takes-8-quick-steps- but following their steps didn't work either. I had a coworker with an older asp.net (not MVC) that used report viewer and I copied elements of his web.config, but that didn't help either.
Here's the view with the report viewer:
#using ProjectName.Views
#{
ViewBag.Title = "Telerik MVC HTML5 Report Viewer";
}
#section styles
{
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css" rel="stylesheet" />
<style>
#reportViewer1 {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
overflow: hidden;
font-family: Verdana, Arial;
}
</style>
<link href="#Url.Content("~/ReportViewer/styles/telerikReportViewer-9.1.15.731.css")" rel="stylesheet" />
}
#(Html.TelerikReporting().ReportViewer()
// Each report viewer must have an id - it will be used by the initialization script
// to find the element and initialize the report viewer.
.Id("reportViewer1")
// The URL of the service which will serve reports.
// The URL corresponds to the name of the controller class (ReportsController).
// For more information on how to configure the service please check http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.
.ServiceUrl(Url.Content("~/api/reports/"))
// The URL for the report viewer template. The template can be edited -
// new functionalities can be added and unneeded ones can be removed.
// For more information please check http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.
.TemplateUrl(Url.Content("~/ReportViewer/templates/telerikReportViewerTemplate-9.1.15.731.html"))
// Strongly typed ReportSource - TypeReportSource or UriReportSource.
.ReportSource(new TypeReportSource() { TypeName = "ProjectName.Reports.ShippingLabel, ProjectName, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" })
// Specifies whether the viewer is in interactive or print preview mode.
// PrintPreview - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
// Interactive - Displays the report in its original width and height with no paging. Additionally interactivity is enabled.
.ViewMode(ViewMode.Interactive)
// Sets the scale mode of the viewer.
// Three modes exist currently:
// FitPage - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
// FitPageWidth - The report will be zoomed in or out so that the width of the screen and the width of the report match.
// Specific - Uses the scale to zoom in and out the report.
.ScaleMode(ScaleMode.Specific)
// Zoom in and out the report using the scale
// 1.0 is equal to 100%, i.e. the original size of the report
.Scale(1.0)
// Sets whether the viewer’s client session to be persisted between the page’s refreshes(ex. postback).
// The session is stored in the browser’s sessionStorage and is available for the duration of the page session.
.PersistSession(false)
// Sets the print mode of the viewer.
.PrintMode(PrintMode.AutoSelect)
// Defers the script initialization statement. Check the scripts section below -
// each deferred script will be rendered at the place of TelerikReporting().DeferredScripts().
.Deferred()
.ClientEvents(
events => events
.RenderingBegin("onRenderingBegin")
.RenderingEnd("onRenderingEnd")
.PrintBegin("onPrintBegin")
.PrintEnd("onPrintEnd")
.ExportBegin("onExportBegin")
.ExportEnd("onExportBegin")
.UpdateUi("onUpdateUi")
.PageReady("onPageReady")
.Error("onError")
)
// Uncomment the code below to see the custom parameter editors in action
//.ParameterEditors(
// editors => editors
// .SingleSelectEditor("createSingleSelectEditor")
// .CustomEditors(new CustomParameterEditor
// {
// MatchFunction = "customMatch",
// CreateEditorFunction = "createCustomEditor"
// })
//)
)
#section scripts
{
<script src="#Url.Content("~/ReportViewer/js/telerikReportViewer-9.1.15.731.min.js")"></script>
<!--kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js-->
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.web.min.js"></script>
<!--kendo.mobile.min.js - optional, if gestures/touch support is required-->
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.mobile.min.js"></script>
<script>
function onRenderingBegin() {
console.log("rendering begin!");
}
function onRenderingEnd() {
console.log("rendering end!");
}
function onPrintBegin() {
console.log("print begin!");
}
function onPrintEnd() {
console.log("print end!");
}
function onExportBegin() {
console.log("export begin!");
}
function onExportEnd() {
console.log("export end!");
}
function onUpdateUi() {
console.log("update ui!");
}
function onError() {
console.log("error!");
}
function onPageReady() {
console.log("page ready!");
}
function createSingleSelectEditor(placeholder, options) {
var dropDownElement = $(placeholder).html('<div></div>');
var parameter,
valueChangedCallback = options.parameterChanged,
dropDownList;
function onChange() {
var val = dropDownList.value();
valueChangedCallback(parameter, val);
}
return {
beginEdit: function (param) {
parameter = param;
$(dropDownElement).kendoDropDownList({
dataTextField: "name",
dataValueField: "value",
value: parameter.value,
dataSource: parameter.availableValues,
change: onChange
});
dropDownList = $(dropDownElement).data("kendoDropDownList");
}
};
}
function customMatch(parameter) {
return Boolean(parameter.availableValues)
&& !parameter.multivalue
&& parameter.type === telerikReportViewer.ParameterTypes.BOOLEAN;
}
function createCustomEditor(placeholder, options) {
var dropDownElement = $(placeholder).html('<div></div>');
var parameter,
valueChangedCallback = options.parameterChanged,
dropDownList;
function onChange() {
var val = dropDownList.value();
valueChangedCallback(parameter, val);
}
return {
beginEdit: function (param) {
parameter = param;
$(dropDownElement).kendoDropDownList({
dataTextField: "name",
dataValueField: "value",
value: parameter.value,
dataSource: parameter.availableValues,
change: onChange
});
dropDownList = $(dropDownElement).data("kendoDropDownList");
}
};
}
</script>
#(
// All deferred initialization statements will be rendered here
Html.TelerikReporting().DeferredScripts()
)
}
There are references set up for the following files; all of them have copy local set to true:
Telerik.Reporting
Telerik.Reporting.Services.WebApi
Telerik.Reporting.XpsRendering
Telerik.ReportViewer.Mvc
Telerik.ReportViewer.WebForms
My bin folder has the following files:
Telerik.Reporting.Adomd.dll
Telerik.Reporting.Adomd.pdb
Telerik.Reporting.Adomd.xml
Telerik.Reporting.Cache.Database.dll
Telerik.Reporting.Cache.Database.pdb
Telerik.Reporting.Cache.Database.xml
Telerik.Reporting.Cache.StackExchangeRedis.dll
Telerik.Reporting.Cache.StackExchangeRedis.pdb
Telerik.Reporting.Cache.StackExchangeRedis.xml
Telerik.Reporting.dll
Telerik.Reporting.OpenXmlRendering.dll
Telerik.Reporting.OpenXmlRendering.pdb
Telerik.Reporting.OpenXmlRendering.xml
Telerik.Reporting.pdb
Telerik.Reporting.Service.dll
Telerik.Reporting.Service.pdb
Telerik.Reporting.Service.xml
Telerik.Reporting.Services.ServiceStack.dll
Telerik.Reporting.Services.ServiceStack.pdb
Telerik.Reporting.Services.ServiceStack.xml
Telerik.Reporting.Services.WebApi.dll
Telerik.Reporting.Services.WebApi.pdb
Telerik.Reporting.Services.WebApi.xml
Telerik.Reporting.xml
Telerik.Reporting.XpsRendering.dll
Telerik.Reporting.XpsRendering.pdb
Telerik.Reporting.XpsRendering.xml
Telerik.ReportViewer.Html5.WebForms.dll
Telerik.ReportViewer.Html5.WebForms.pdb
Telerik.ReportViewer.Html5.WebForms.xml
Telerik.ReportViewer.Mvc.dll
Telerik.ReportViewer.Mvc.pdb
Telerik.ReportViewer.Mvc.xml
Telerik.ReportViewer.Silverlight.dll
Telerik.ReportViewer.Silverlight.pdb
Telerik.ReportViewer.Silverlight.TextResources.resx
Telerik.ReportViewer.Silverlight.xml
Telerik.ReportViewer.WebForms.dll
Telerik.ReportViewer.WebForms.pdb
Telerik.ReportViewer.WebForms.Resources.resx
Telerik.ReportViewer.WebForms.xml
Telerik.ReportViewer.WinForms.dll
Telerik.ReportViewer.WinForms.pdb
Telerik.ReportViewer.WinForms.Resources.resx
Telerik.ReportViewer.WinForms.xml
Telerik.ReportViewer.Wpf.dll
Telerik.ReportViewer.Wpf.pdb
Telerik.ReportViewer.Wpf.TextResources.resx
Telerik.ReportViewer.Wpf.xml
My web.config looks like this
<?xml version="1.0" encoding="utf-8"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=152368
-->
<configuration>
<configSections>
<!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=4.4.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
<sectionGroup name="telerik">
<section name="webAssets" type="Telerik.Web.Mvc.Configuration.WebAssetConfigurationSection, Telerik.Web.Mvc" requirePermission="false"/>
</sectionGroup>
</configSections>
<connectionStrings>
*** Commented out ***
</connectionStrings>
<appSettings>
<add key="webpages:Version" value="2.0.0.0" />
<add key="webpages:Enabled" value="true" />
<add key="PreserveLoginUrl" value="true" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
<add key="UploadLocation" value="/Attachments/"/>
</appSettings>
<system.web>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="Telerik.ReportViewer.WebForms, Version=9.1.15.731, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" />
<add assembly="Telerik.Reporting, Version=9.1.15.731, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" />
</assemblies>
</compilation>
<pages>
<controls>
<add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" />
</controls>
<namespaces>
<add namespace="System.Web.Helpers" />
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="System.Web.WebPages" />
<add namespace="Kendo.Mvc.UI" />
<add namespace="Telerik.Reporting" />
<add namespace="Telerik.ReportViewer" />
</namespaces>
</pages>
<httpHandlers>
<add type="Telerik.ReportViewer.WebForms.HttpHandler, Telerik.ReportViewer.WebForms, Version=9.1.15.731, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" path="Telerik.ReportViewer.axd" verb="*" validate="true" />
</httpHandlers>
</system.web>
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<modules runAllManagedModulesForAllRequests="true" />
<handlers>
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
<add name="Telerik.ReportViewer.axd_*" type="Telerik.ReportViewer.WebForms.HttpHandler, Telerik.ReportViewer.WebForms, Version=8.1.14.618, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" path="Telerik.ReportViewer.axd" verb="*" preCondition="integratedMode" />
</handlers>
</system.webServer>
<entityFramework>
<defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
<parameters>
<parameter value="v11.0" />
</parameters>
</defaultConnectionFactory>
</entityFramework>
<runtime>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<dependentAssembly>
<assemblyIdentity name="DotNetOpenAuth.AspNet" publicKeyToken="2780ccd10d57b246" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-4.1.0.0" newVersion="4.1.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="DotNetOpenAuth.Core" publicKeyToken="2780ccd10d57b246" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-4.1.0.0" newVersion="4.1.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-4.0.0.0" newVersion="4.0.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-1.3.0.0" newVersion="1.3.0.0" />
</dependentAssembly>
</assemblyBinding>
</runtime>
</configuration>

Answer 1

Had the same trouble, I had to add the following to the top of the razor page:
#using Telerik.ReportViewer.Mvc
#using Telerik.Reporting
I also moved the report from the root of the MVC project into the views folder - not sure if that helped at all.

Answer 2

If you want Razor to recognise the Telerik commands then you should add the library references to the Web.config file located in your Views directory (NOT the main Web.config file!).
In this file there will be a <system.web.webPages.razor> section - the namespaces need to be added here so that Razor can use them:
<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Optimization"/>
<add namespace="System.Web.Routing" />
<add namespace="Telerik.Reporting" />
<add namespace="Telerik.ReportViewer.Mvc" />
</namespaces>
</pages>

Answer 3

The extension method you are looking for is at the Telerik.ReportViewer.Mvc.dll lib. Add a reference to it and do not forget usings:
#using Telerik.ReportViewer.Mvc

Answer 4

I also had a similar problem but mine was more to do with #RenderSections. If you have the telerikReportViewer control on a partial make sure you put the #section styles and #section scripts on the parent page that calls the partial.