New to Telerik Reporting? Download free 30-day trial

Switch Reports Displayed in Kendo 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 a button clicked by the user. In this article, we will demonstrate how this may be achieved effectively with Telerik Reporting and the Kendo UI for jQuery Window widget.

In this example, the button for switching the report will be a custom action on the Kendo Window itself - Customizing Actions.


  1. Create the element that is to be used for the initialization of the window, and insert in it the element that will be used for initializing the HTML5 Report Viewer.

     <div id="winReports">
        <div id="reportViewer1">
  2. Create the function for switching the reports - switchReport and the function that will initialize the Kendo Window widget - showWindow:

     function switchReport() {
            var viewer = $("#reportViewer1").data("telerik_ReportViewer");
                showFirst = !showFirst;
                    report: showFirst ? FirstReport : SecondReport,
                    parameters: {}
        function showWindow() {
            var windowOptions = {
                actions: [ "Custom", "Close"],
                title: {
                    text: "Reports",
                modal: true,
                draggable: true,
                visible: false,
                width: "1200px",
                open: switchReport
            const kendoWindow = $("#winReports").kendoWindow(windowOptions).data("kendoWindow");
            // custom action for report switching
            var customAction = kendoWindow.wrapper.find(".k-window-actions [aria-label='Custom']");
            // edit custom button look
            customAction.find("span").removeClass().text("Switch Report");
   (e) {
  3. When the document is ready - $( document ).ready(), initialize an empty report viewer and the Kendo Window, as well as some globally scope variables to keep the state of the report viewer(which report is currently loaded):

     <script type="text/javascript">
        const FirstReport = "Barcodes Report.trdx";
        const SecondReport = "Dashboard.trdx";
        var showFirst = true;
        $(document).ready(function () {
            // init empty report viewer
                    serviceUrl: "",
            // init and open kendo window

Sample Project

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

In this article