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

8 posts, 0 answers
  1. Chris
    Chris avatar
    3 posts
    Member since:
    Apr 2013

    Posted 01 Apr 2013 Link to this post

    Can you create a custom Report Viewer toolbar? Specifically can certain options be hidden and can you style the toolbar?
  2. IvanY
    Admin
    IvanY avatar
    417 posts

    Posted 04 Apr 2013 Link to this post

    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.

  3. Mircea
    Mircea avatar
    2 posts
    Member since:
    Mar 2015

    Posted 17 Nov 2015 Link to this post

    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

  4. Stef
    Admin
    Stef avatar
    3610 posts

    Posted 19 Nov 2015 Link to this post

    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
  5. Mircea
    Mircea avatar
    2 posts
    Member since:
    Mar 2015

    Posted 19 Nov 2015 in reply to Stef Link to this post

    Hi Stef,

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

     

    Regards,

    Mircea

  6. Neil N
    Neil N avatar
    89 posts
    Member since:
    Aug 2012

    Posted 12 Jan in reply to Stef Link to this post

    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?

  7. Silviya
    Admin
    Silviya avatar
    262 posts

    Posted 16 Jan Link to this post

    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
  8. Neil N
    Neil N avatar
    89 posts
    Member since:
    Aug 2012

    Posted 22 Jan in reply to Silviya Link to this post

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