Can the toolbar for the Report View be customized or replaced?

[Chris]

Can you create a custom Report Viewer toolbar? Specifically can certain options be hidden and can you style the toolbar?

[IvanY]

Hello Chris,

You can easily change and customize the toolbar of the Report Viewer (assuming from your other question that you will be using the ASP.NET Report Viewer). For more information about the possibilities and how to do that please check this Custom Toolbar for the Web Report Viewer.

All the best,
IvanY
the Telerik team

[Mircea]

Hi,

What about customizing the HTML5 Report Viewer? I want to be able to:

- hide some of the buttons

- change implementation of existing button -> i.e. custom "Export to CSV"

- add new buttons with custom implementation

 I see it's using an html template, but I haven't figured out how can I do the above (beside removing buttons and changing order on the toolbar).

 

Regards,

Mircea

[Stef]

Hello Mircea,

If you are using the HTML5 Viewer, you can make a copy of the viewer's HTML template file and modify it. Then set the viewer's TemplateUrl to point to the modified HTML file.
Other approach is to use standard CSS and Javascript methods to show/hide/add HTML elements in the viewer's toolbar.

If you need to add custom export options, hide the default export buttons and use your own UI. To handle the default export options, you can use the HTML5 Viewer's API:

• data attributes
• commands

I hope this information is helpful.

Regards,
Stef
Telerik

[Mircea]

Hi Stef,

Thanks for your help! I will give it a try :).

 

Regards,

Mircea

[Neil N]

I'm using the HTML5 Webform ReportViewer in a webforms app and trying to remove some buttons.I have:

<telerik:ReportViewer
       ID="rvInvoice"
       Height="900px"
       Width="600px"
       runat="server" DocumentMapVisible="False" ParametersAreaVisible="False" ScaleMode="FitPageWidth" TemplateUrl="~/ReportViewer/templates/telerikReportViewerTemplate.html">
       <ReportSource IdentifierType="UriReportSource" Identifier="Invoice.trdp">
           <Parameters>
               <telerik:Parameter Name="InvoiceID"/>
           </Parameters>
       </ReportSource>
       <SendEmail Enabled = "false" />
   </telerik:ReportViewer>

 

In ~/ReportViewer/templates/telerikReportViewerTemplate.html (which I've confirmed is loading) I've removed:

<li aria-label="ariaLabelMenuNavigateBackward"><a data-command="telerik_ReportViewer_historyBack" title="menuNavigateBackwardTitle" href="#"><i class="t-font-icon k-icon t-i-undo"></i><span>menuNavigateBackwardText</span></a></li>
<li aria-label="ariaLabelMenuNavigateForward"><a data-command="telerik_ReportViewer_historyForward" title="menuNavigateForwardTitle" href="#"><i class="t-font-icon k-icon t-i-redo"></i><span>menuNavigateForwardText</span></a></li>
<li aria-label="ariaLabelMenuRefresh"><a data-command="telerik_ReportViewer_refresh" href="#" title="menuRefreshTitle"><i class="t-font-icon k-icon t-i-refresh-a"></i><span>menuRefreshText</span></a></li>
<li aria-label="ariaLabelMenuFirstPage"><a data-command="telerik_ReportViewer_goToFirstPage" title="menuFirstPageTitle" href="#"><i class="t-font-icon k-icon t-i-arrow-double-60-w"></i><span>menuFirstPageText</span></a></li>
<li aria-label="ariaLabelMenuLastPage"><a data-command="telerik_ReportViewer_goToLastPage" title="menuLastPageTitle" href="#"><i class="t-font-icon k-icon t-i-arrow-double-60-e"></i><span>menuLastPageText</span></a></li>

 

from the trv-report-viewer and trv-content-wrapper k-content classes but the buttons still appear. I've also tried something like:

<li aria-label="ariaLabelMenuRefresh" style="visibility: hidden"><a data-command="telerik_ReportViewer_refresh" href="#" title="menuRefreshTitle" style="visibility: hidden"><i class="t-font-icon k-icon t-i-refresh-a"></i><span>menuRefreshText</span></a></li>

 

What am I missing?

[Silviya]

Hello Neil,

I can confirm that by modifying the template, the buttons should be removed. In the viewer's template double-check once again that you are removing the <li> elements of the <ul id="trv-main-menu-ul"> like the following:

<div class="trv-content-wrapper k-content">
    <div class="trv-nav k-widget">
        <ul tabindex="1" id="trv-main-menu-ul" aria-label="ariaLabelMainMenu" class="trv-menu-large" data-role="telerik_ReportViewer_MainMenu">
            <!--Comment/remove these lines of code -->
            <li aria-label="ariaLabelMenuNavigateBackward"><a data-command="telerik_ReportViewer_historyBack" title="menuNavigateBackwardTitle" href="#"><i class="t-font-icon k-icon t-i-undo"></i></a></li>
            <li aria-label="ariaLabelMenuNavigateForward"><a data-command="telerik_ReportViewer_historyForward" title="menuNavigateForwardTitle" href="#"><i class="t-font-icon k-icon t-i-redo"></i></a></li>

            <li aria-label="ariaLabelMenuRefresh"><a data-command="telerik_ReportViewer_refresh" href="#" title="menuRefreshTitle"><i class="t-font-icon k-icon t-i-refresh-a"></i></a></li>

            <li aria-label="ariaLabelMenuFirstPage"><a data-command="telerik_ReportViewer_goToFirstPage" title="menuFirstPageTitle" href="#"><i class="t-font-icon k-icon t-i-arrow-double-60-w"></i></a></li>
            <li aria-label="ariaLabelMenuPreviousPage"><a data-command="telerik_ReportViewer_goToPrevPage" title="menuPreviousPageTitle" href="#"><i class="t-font-icon k-icon t-i-seek-w"></i></a></li>
...

I noticed that the second code snippet contains the html of the side menu, not the main menu, as it has <span> elements before the closing </a> and </li> tags. For example:

<li aria-label="ariaLabelMenuNavigateBackward"><a data-command="telerik_ReportViewer_historyBack" title="menuNavigateBackwardTitle" href="#"><i class="t-font-icon k-icon t-i-undo"></i><span>menuNavigateBackwardText</span></a></li>

Please remove the corresponding elements from the main menu and start the application once again with browser cache cleared.

Regards,
Silviya
Progress Telerik

[Neil N]

That worked, thank you.  Clearing the cache was the key (even after restarting debugging sessions).