Can't Update Report Parameters Using Jquery

[Daniel]

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>

 

 

 

[Neli]

Hi Daniel,

I am sorry to hear that you are experiencing issues with our product. 

I would recommend going through the How to Pass Values to Report Parameters article for the MVC wrapper. Please, test the approach from the article and let us know if the problem is resolved.

If you still experiencing issues, please, send us a sample project that reproduces the problem, so we can test it on our end.

Regards,
Neli
Progress Telerik