Ok - pulled my hair out for a couple of days testing out the telerik reporting - the report works as expected, but I am trying to get report viewer object and update the parameters from some bootstrap controls, but just get the following:
Uncaught TypeError: viewer.reportSource is not a function
at HTMLButtonElement.<anonymous> (ReportViewer?type=4:37)
at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2)
at HTMLButtonElement.v.handle (jquery-3.6.0.min.js:2)
I have hardcoded the parameters to try and test - what I have in the page so far is as follows (using MVC).
It looks like jQuery cant find the report viewer by its id - some help would be appreciated here please and yes the code is quick and dirty :)
@model Platform.Code.ReportParamters
@{
Layout = null;
}
@{
TypeReportSource typeReportSource = Model.ParamReportSource;
typeReportSource.Parameters.Add(new Telerik.Reporting.Parameter("YardID", Model.ParamYardID));
typeReportSource.Parameters.Add(new Telerik.Reporting.Parameter("StartDate", Model.ParamStartDate));
typeReportSource.Parameters.Add(new Telerik.Reporting.Parameter("EndDate", Model.ParamEndDate));
typeReportSource.Parameters.Add(new Telerik.Reporting.Parameter("MovementCategoryID", Model.ParamMovementCategory));
typeReportSource.Parameters.Add(new Telerik.Reporting.Parameter("Username", Model.ParamUsername));
}
<link href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.blueopal.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="@Url.Content("~/api/reports/resources/js/telerikReportViewer")"></script>
<div class="row">
<button type="button" id="updateReport" class="btn btn-primary">Primary</button>
</div>
@(
Html.TelerikReporting().ReportViewer()
.Id("reportViewer")
.ServiceUrl("/api/reports/")
.ReportSource(typeReportSource)
.ViewMode(ViewMode.Interactive)
.ScaleMode(ScaleMode.Specific)
.Scale(1.0)
)
<script>
$(document).ready(function () {
$('#updateReport').on('click', function () {
var viewer = $('#reportViewer').data('telerik_ReportViewer');
viewer.reportSource({
report: viewer.reportSource().report,
parameters: {
YardID: 1,
StartDate: '2020-06-21T00:00:01',
EndDate: '2021-06-21T23:59:59',
MovementCategoryID: 3,
Username: 'David Smith'
}
});
//setting the HTML5 Viewer's reportSource, causes a refresh automatically
//if you need to force a refresh for other case, use:
//viewer.refreshReport();
});
});
</script>