New to Telerik Reporting? Download free 30-day trial

Filter export options based on the selected report in the Html5 Report Viewer


Product Progress® Telerik® Reporting


The available rendering formats are related to the REST Service and are taken from the configuration file of its project. Setting different rendering extensions in the viewer per report definition is not available out of the box.


You may bind on the renderingEnd event of the viewer and hide the unwanted export options based on the report name (as taken from the property). Here is a sample code for the page with the viewer:


    <script type="text/javascript">
        $(document).ready(function () {
            var reportName = "",
                largeMenuBound = false,
                sideMenuBound = false,

            reportViewer = $("#reportViewer1")
                    serviceUrl: "api/reports/",
                    reportSource: {
                        report: "Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary",
                    renderingEnd: onRenderingEnd

        // get report name from the reportSource
            function onRenderingEnd(e, args) {
                reportName = reportViewer.reportSource().report;

                if (reportName.indexOf("Dashboard") !== -1) {
                    reportName = "Dashboard";

            // bind menus if not already bound
                if (!sideMenuBound || !largeMenuBound) {

            function setBindings() {
                var smallMenu = $(".trv-menu-small"),
                    sideMenu = $(".trv-side-menu").children("ul").data('kendoPanelBar'),
                    largeMenu = $(".trv-menu-large").data("kendoMenu");

            // bind to the 'activate' event of the main menu
        if (!largeMenuBound && largeMenu) {
                    largeMenu.bind("activate", function (e) {

                    largeMenuBound = true;

            // bind to the 'expand' event of the side menu
                if (!sideMenuBound && smallMenu) {
                    sideMenu.bind("expand", function (e) {

                    sideMenuBound = true;

        // get the extensions to hide based on the report name
            function hidingOptions() {
                switch (reportName) {
                    case "Dashboard":
                        hideOptions = ["XLSX", "XLS"];
                        hideOptions = [];

            // show all extensions

            // hide the specified extensions
                $.each(hideOptions, function (index, item) {
                    var hiddenOption = $('[data-command-parameter="' + item + '"]');
                    if (hiddenOption && hiddenOption.length) {


        // bind menus in case of resizing
            $(window).resize(function () {



Briefly, on the renderingEnd event, the code gets the report name and binds event handlers to the 'open' event of the main menu and to the 'expand' event of the side menu of the viewer's toolbar, if not already bound. The event handlers call hidingOptions() function that iterates over the export menu options and hides those that are not necessary - specified in the hideOptions variable which is filled in a switch-case statement depending on the report name.

In this article