Export to excel and pdf icons in htmlviewer

2 posts, 0 answers
  1. V
    V avatar
    8 posts
    Member since:
    Sep 2014

    Posted 08 Oct 2015 Link to this post

     Our requirement is to show excel icon and pdf icon for easy access, ability to pass parameter directly instead of dropdown similar to print icon

     <li><a data-command="telerik_ReportViewer_print" title="Print" href="#"><i class="fa fa-print icon-print"></i></a></li>

    we need to show excel and pdf similar to print icon in template.​

    what data-command do we use, i dont see one.

    http://www.telerik.com/help/reporting/html5-report-viewer-data-attributes.html

     also if we have export in dropdown list how do we control the styles..need to update z-index and its not working for us. 

    <div class="k-animation-container" style="width: 82px; height: 27px; margin-left: -2px; padding-left: 2px; padding-right: 2px; padding-bottom: 4px; overflow: visible; display: block; position: absolute; z-index: 10002; top: 29px; left: 0px;"><ul data-command-list="export-format-list" class="k-group k-menu-group k-popup k-reset k-state-border-up" role="menu" data-role="popup" style="display: block; position: absolute; font-size: 12px; font-family: abc-regular; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 15px;"><li class="k-item k-state-default" role="menuitem"><a data-command-parameter="PDF" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>Acrobat (PDF) file</span></a></li><li class="k-item k-state-default" role="menuitem"><a data-command-parameter="CSV" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>CSV (comma delimited)</span></a></li><li class="k-item k-state-default" role="menuitem"><a data-command-parameter="XLS" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>Excel 97-2003</span></a></li><li class="k-item k-state-default" role="menuitem"><a data-command-parameter="XLSX" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>Excel Worksheet</span></a></li><li class="k-item k-state-default" role="menuitem"><a data-command-parameter="PPTX" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>PowerPoint Presentation</span></a></li><li class="k-item k-state-default" role="menuitem"><a data-command-parameter="RTF" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>Rich Text Format</span></a></li><li class="k-item k-state-default" role="menuitem"><a data-command-parameter="IMAGE" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>TIFF file</span></a></li><li class="k-item k-state-default" role="menuitem"><a data-command-parameter="MHTML" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>Web Archive</span></a></li><li class="k-item k-state-default" role="menuitem"><a data-command-parameter="DOCX" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>Word Document</span></a></li><li class="k-item k-state-default k-last" role="menuitem"><a data-command-parameter="XPS" data-command="telerik_ReportViewer_export" href="#" class="k-link"><span>XPS Document</span></a></li></ul></div>​

  2. Nasko
    Admin
    Nasko avatar
    1086 posts

    Posted 13 Oct 2015 Link to this post

    Hello V,

    The HTML5 Report Viewer is built with customization in mind. This means that the JavaScript client library provides the default viewer behavior and operations while the entire layout/markup is provided through HTML5 templates. The styling is based on CSS3 styles including the Kendo UI themes (again CSS styles). To add custom buttons to the viewer you need to modify the template file (e.g. telerikReportViewerTemplate-9.2.15.930.html).
    The data-command value that should be used is described in the Data Attributes help article:

    telerik_ReportViewer_export
    Export the report, using the respective data-command-parameter *

    * The export command requires one additional parameter, data-command-parameter, which will specify the export format.

    More information can be found in the HTML5 Report Viewer Customization help article.

    Regards,
    Nasko
    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
Back to Top