Can't Update Report Parameters Using Jquery

1 Answer 326 Views

Report Viewer - MVC

Daniel asked on 21 Jun 2021, 04:00 PM

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>

Can't Update Report Parameters Using Jquery

1 Answer, 1 is accepted