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

HTM5 Report Vierwer template for font awesome 4+

2 Answers 260 Views

General Discussions

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

2 Answers, 1 is accepted

Accepted

answered on 11 Dec 2013, 01:11 PM

Hi Marcin,

Only the menu icons depends on Font Awesome as explained in the Styling and Appearance help article. You can customize the Report Viewer template as needed to use other icons or another Font awesome version. You only need to edit the template to reference the icons provided by the font e.g. with Font Awesome 4.0.3 the template should look as follows:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Telerik HTML5 Report Viewer Templates</title>

</head>

<body>

<template id="trv-parameter">

<div class='trv-parameter-container k-content' >

<div class='trv-parameter-header k-header'>

<div class='trv-parameter-title'></div>

</div>

<div class='trv-parameter-error k-tooltip-validation k-widget'>

<span class='k-icon k-warning'></span>

<span class='trv-parameter-error-message'></span>

</div>

<div class='trv-parameter-value'></div>

</div>

</template>

<template id="trv-parameter-editor-available-values-multiselect">

<div class="trv-parameter-editor-available-values-multiselect">

<div class="list"></div>

<div class="footer">

<a class="select-all k-link" href="#">select all</a>

<a class="select-none k-link" href="#">clear selection</a>

</div>

</template>

<template id="trv-parameter-editor-available-values">

<div class="trv-parameter-editor-available-values"></div>

</template>

<template id="trv-parameter-editor-datetime">

<input type="datetime" class="trv-parameter-editor-datetime" />

</template>

<template id="trv-parameter-editor-text">

<input type="text" class="k-textbox trv-parameter-editor-text" />

</template>

<template id="trv-parameter-editor-number">

<input type="number" class="k-textbox trv-parameter-editor-number"/>

</template>

<template id="trv-parameter-editor-boolean">

<input type="checkbox" class="trv-parameter-editor-boolean"/>

</template>

<template id="trv-parameter-editor-multivalue">

<div class="trv-parameter-editor-multivalue">

<textArea class="k-textbox"></textArea>

</div>

</template>

<template id="trv-report-viewer">

<div class="trv-report-viewer" >

<div class="trv-side-menu k-content" data-role="telerik_ReportViewer_SideMenu">

<ul>

<li><a data-command="historyBack" title="Navigate Backward" href="#"><i class="fa fa-mail-reply"></i><span>Navigate Backward</span></a></li>

<li><a data-command="historyForward" title="Navigate Forward" href="#"><i class="fa fa-mail-forward"></i><span>Navigate Forward</span></a></li>

<li><a data-command="refresh" href="#" title="Refresh"><i class="fa fa-refresh"></i><span>Refresh</span></a></li>

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

<li>

<a title="Export" href="#" data-command="export"><i class="fa fa-cloud-download"></i><span>Export</span></a>

<ul data-command-list="export-format-list"></ul>

</li>

<li><a data-command="togglePrintPreview" title="Toggle Print Preview" href="#"><i class="fa fa-file-text"></i><span>Toggle Print Preview</span></a></li>

</ul>

</div>

<div class="trv-content-wrapper k-content">

<div class="trv-content">

<div class="trv-document-map k-widget hidden" data-role="telerik_ReportViewer_DocumentMapArea">

<div class="trv-document-map-overlay"></div>

</div>

<div class="trv-parameters-area k-widget hidden" data-role="telerik_ReportViewer_ParametersArea">

<div class='trv-parameters-area-content'></div>

<div class='trv-parameters-area-footer'>

<button class='k-button trv-parameters-area-preview-button'>Preview</button>

</div>

<div class='trv-error-pane k-tooltip-validation k-widget'>

<div class='trv-error-message'></div>

</div>

<div class="trv-parameters-area-overlay"></div>

</div>

<div class="trv-pages-area k-widget" data-role="telerik_ReportViewer_PagesArea">

<div class='trv-page-container'></div>

<div class='trv-error-pane'>

<div class="centered k-tooltip-validation k-widget">

<div class='trv-error-message'></div>

</div>

<div style="clear: both;"></div>

</div>

<div class="trv-nav">

<ul class="trv-menu-large" data-role="telerik_ReportViewer_MainMenu">

<li><a data-command="historyBack" title="Navigate Backward" href="#"><i class="fa fa-mail-reply"></i></a></li>

<li><a data-command="historyForward" title="Navigate Forward" href="#"><i class="fa fa-mail-forward"></i></a></li>

<li><a data-command="refresh" href="#" title="Refresh"><i class="fa fa-refresh"></i></a></li>

<li><a data-command="goToFirstPage" title="First Page" href="#"><i class="fa fa-fast-backward"></i></a></li>

<li><a data-command="goToPrevPage" title="Previous Page" href="#"><i class="fa fa-step-backward"></i></a></li>

<li>

<input data-role="telerik_ReportViewer_PageNumberInput" type="number" />

<span> / </span>

<span data-role="telerik_ReportViewer_PageCountLabel"></span>

</li>

<li><a data-command="goToNextPage" title="Next Page" href="#"><i class="fa fa-step-forward"></i></a></li>

<li><a data-command="goToLastPage" title="Last Page" href="#"><i class="fa fa-fast-forward"></i></a></li>

<li><a data-command="togglePrintPreview" title="Toggle Print Preview" href="#"><i class="fa fa-file-text"></i></a></li>

<li>

<a title="Export" href="#" data-command="export"><i class="fa fa-cloud-download"></i></a>

<ul data-command-list="export-format-list">

</ul>

</li>

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

<li><a data-command="toggleDocumentMap" title="Toggle Document Map" href="#"><i class="fa fa-book"></i></a></li>

<li><a data-command="toggleParametersArea" title="Toggle Parameters Area" href="#"><i class="fa fa-filter"></i></a></li>

<li><a title="Zoom In" href="#" data-command="zoomIn"><i class="fa fa-zoom-in"></i></a></li>

<li><a title="Zoom Out" href="#" data-command="zoomOut"><i class="fa fa-zoom-out"></i></a></li>

<li><a title="Toggle FullPage/PageWidth" href="#" data-command="toggleZoomMode"><i class="fa fa-search"></i></a></li>

</ul>

<ul class="trv-menu-small" data-role="telerik_ReportViewer_MainMenu">

<li><a data-command="toggleSideMenu" title="Toggle Side Menu" href="#"><i class="fa fa-reorder"></i></a></li>

<li>

<input data-role="telerik_ReportViewer_PageNumberInput" type="number" />

<span> / </span>

<span data-role="telerik_ReportViewer_PageCountLabel"></span>

</li>

<li><a data-command="toggleDocumentMap" title="Toggle Document Map" href="#"><i class="fa fa-book"></i></a></li>

<li><a data-command="toggleParametersArea" title="Toggle Parameters Area" href="#"><i class="fa fa-filter"></i></a></li>

</ul>

</div>

</template>

</body>

</html>

I hope this helps you.

Regards,
Stef
Telerik

New HTML5/JS REPORT VIEWER with MOBILE AND TOUCH SUPPORT available in Telerik Reporting Q3 2013! Get the new Reporting version from your account or download a trial.