Can't Update Report Parameters Using Jquery

1 Answer 76 Views
Report Viewer - MVC
Daniel
Top achievements
Rank 1
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>

 

 

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 23 Jun 2021, 07:01 AM

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

Brand new Telerik Reporting course in Virtual Classroom - the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products. Check it out at https://learn.telerik.com/.
Tags
Report Viewer - MVC
Asked by
Daniel
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or