Html5 WebForms Set Report Source Client Side

[Matt]

Hello,

We are trying to generate the report viewer report in javascript but are having a difficult time trying to figure out what the javascript logic should be.

When we set the report source on the control tag it works flawlessly. 

For example 

<telerik:ReportViewer ID="ReportViewer" runat="server" Width="1240" Height="700" ParameterEditors-SingleSelectEditor="createSingleSelectEditor" >
        <ReportSource Identifier="Reports.Organization_Summary, Reports" IdentifierType="TypeReportSource">
            <Parameters>
                <telerik:Parameter Name="userName" Value="matt" />
            </Parameters>
        </ReportSource>
    </telerik:ReportViewer>

 

When we try to set the report source in javascript nothing happens.

Example

<telerik:ReportViewer ID="ReportViewer" runat="server" Width="1240" Height="700" ParameterEditors-SingleSelectEditor="createSingleSelectEditor" />

function displayReport()
        {
            var reportViewer = $("ReportViewer").data("telerik_ReportViewer");
            reportViewer.reportSource({
                report: "Reports.Organization_Summary, Reports",
                parameters: { "userName": "matt" },
            });
            reportViewer.refreshReport();
        }

[Katia]

Hi Matt,

Once the viewer object is created you can get it by the id from the HTML element: 

var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");

To get the element by the id using jQuery it will be necessary to use '#' in the selector, for example $("#reportViewer1").

Setting HTML5 Viewer's reportSource causes a refresh automatically. If you need to force a refresh for other case, use refreshReport() method.

I hope the above information will help.


Regards,
Katia
Progress Telerik

[Matt]

Oh I see, I was missing the # selector. Thank you for pointing that out. I've been stuck on this issue and can finally move forward.