diff --git a/knowledge-base/images/ScriptFolderWebForms.png b/knowledge-base/images/ScriptFolderWebForms.png new file mode 100644 index 000000000..6b92d8304 Binary files /dev/null and b/knowledge-base/images/ScriptFolderWebForms.png differ diff --git a/knowledge-base/rename-move-preview-button-html5-asp-net-report-viewer.md b/knowledge-base/rename-move-preview-button-html5-asp-net-report-viewer.md new file mode 100644 index 000000000..60e7a9d30 --- /dev/null +++ b/knowledge-base/rename-move-preview-button-html5-asp-net-report-viewer.md @@ -0,0 +1,71 @@ +--- +title: Renaming and Repositioning Preview Button in HTML5-based Report Viewers +description: "Learn how to rename and move the Preview button in the parameters section of the HTML5-based Report Viewers." +type: how-to +page_title: Changing and Moving the Preview Button in HTML5 Report Viewer +meta_title: Changing and Moving the Preview Button in HTML5 Report Viewer +slug: rename-move-preview-button-html5-asp-net-report-viewer +tags: html5, reportviewer, preview-button, parameters, localization +res_type: kb +ticketid: 1690422 +--- + +## Environment + + + + + + + + + + + + +
Product ProgressĀ® TelerikĀ® Reporting
Viewer HTML5-based Report Viewers
+ +## Description + +I want to rename the **Preview** button in the HTML5 Report Viewer or one of its wrappers to match my custom requirements. Additionally, I want to reposition the **Preview** button to the top of the parameters area instead of its default position at the bottom. + +## Solution + +### Renaming the Preview Button + +1. Locate the `telerikReportViewer.stringResources-{{site.buildversion}}.js` file in the installation folder - `C:\Program Files (x86)\Progress\Telerik Reporting {{site.suiteversion}}\Html5\ReportViewer\js`. +1. Open the file and replace the `parametersAreaPreviewButton: "Preview"` value with your desired button name. +1. Copy the updated `telerikReportViewer.stringResources-{{site.buildversion}}.js` file to your project's `Scripts` folder(*or any folder that you provide local files from such as __wwwroot__*). + + ![The stringResource script file placed in a local directory inside the project](images/ScriptFolderWebForms.png) + +1. Reference the updated script file on the page with the HTML5-based Report Viewer before the `telerikReportViewer` script. For example: + + ````HTML + + +```` + + +1. Compile and run your project to verify the updated button name. + +### Moving the Preview Button to the Top + +Use the followig CSS to move the **Preview** button to the top of the parameters area: + +````CSS + .trv-parameters-area.preview .trv-parameters-area-footer { + top: 0; + } + + .trv-report-viewer .trv-parameters-area.preview .trv-parameters-area-content { + top: 3em; + bottom: 0; + } +```` + + +## See Also + +* [Localization of the HTML5 Report Viewers]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/customizing/localization%}) +* [Move Preview Button at the Top of Parameters Area]({%slug how-to-move-preview-button-at-the-top-of-parameters-area%})