New to Telerik Reporting? Download free 30-day trial

Switch Reports Displayed in Kendo MVC Modal Window


Product Progress® Telerik® Reporting


In many scenarios, it is necessary to display different reports in modal windows. For example, a different report should pop-up depending on the button clicked by the user. Here we explain how this may be achieved effectively with Telerik Reporting and Kendo MVC modal window.


Our recommendation is to create the Html5 MVC Viewer once, for example, through a call to the corresponding MVC action, and then replace only the viewer's reportSource. You may use the 'open' event of the Kendo modal window. This way the action will be hit only once, upon initializing the Kendo window. Here is sample code for the 'open' event of the modal window:

<script type="text/javascript">
    const FirstReport = "FirstReport.trdp";
    const SecondReport = "SecondReport.trdp";

    var showFirst = false;

    function Reports_onWindowOpenNew(e) {
        var viewer = $("#reportViewer1").data("telerik_ReportViewer");
        if (viewer) {
            var reportname = SecondReport;
            if (showFirst) {
                reportname = FirstReport;

            showFirst = !showFirst;
                report: reportname,
                parameters: {}

This code will switch between two reports on each opening of the Kendo modal window.

The set-up of the modal window may look like (note the LoadContentFrom option) :

            .Actions(actions => actions.Close())
            .Events(e => e.Open("Reports_onWindowOpenNew"))
            .LoadContentFrom("DisplayReportViewer", "Home")
            .HtmlAttributes(new { style = "margin: 3px" })

'DisplayReportViewer' is the action from the 'Home' controller that initializes the viewer upon Kendo modal window creation. This is done only once, on the load of the page.

The sample project can be found in our GitHub demos repository.

In this article