This is a migrated thread and some comments may be shown as answers.

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

7 Answers 431 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 01 Apr 2013, 11:49 PM
Can you create a custom Report Viewer toolbar? Specifically can certain options be hidden and can you style the toolbar?

7 Answers, 1 is accepted

Sort by
0
IvanY
Telerik team
answered on 04 Apr 2013, 10:25 AM
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

Have you tried the new visualization options in Telerik Reporting Q1 2013? You can get them from your account.

0
Mircea
Top achievements
Rank 1
answered on 17 Nov 2015, 01:25 PM

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

0
Stef
Telerik team
answered on 19 Nov 2015, 02:07 PM
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:
I hope this information is helpful.

Regards,
Stef
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Mircea
Top achievements
Rank 1
answered on 19 Nov 2015, 03:05 PM

Hi Stef,

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

 

Regards,

Mircea

0
Neil N
Top achievements
Rank 1
Veteran
Iron
answered on 12 Jan 2019, 04:07 PM

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?

0
Silviya
Telerik team
answered on 16 Jan 2019, 02:50 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Neil N
Top achievements
Rank 1
Veteran
Iron
answered on 22 Jan 2019, 05:08 PM
That worked, thank you.  Clearing the cache was the key (even after restarting debugging sessions).
Tags
General Discussions
Asked by
Chris
Top achievements
Rank 1
Answers by
IvanY
Telerik team
Mircea
Top achievements
Rank 1
Stef
Telerik team
Neil N
Top achievements
Rank 1
Veteran
Iron
Silviya
Telerik team
Share this question
or