This blog post contains outdated information.
The cited code snippets may be workarounds, and be part of the official API in the meantime.
Reporting: Styling the DocumentViewer for ASP.NET
The DocumentViewer component in TX Text Control .NET Server displays merged reports in a cross-browser viewer. Its appearance is fully customizable through CSS, including button backgrounds, toolbar styles, page backgrounds, rounded document corners, and page navigation animations.
TX Text Control .NET Server comes with the HTML5 based editor Web.TextControl and the cross-browser, cross-platform DocumentViewer component to view reports and documents.
The DocumentViewer can be used when pure document viewing is required in web-based applications. Typically, templates are merged server-side with data using the MailMerge class and loaded into the DocumentViewer in ASP.NET applications. The user can navigate through the document in various zoom levels.
Thanks to pure HTML and CSS, the DocumentViewer can be easily styled and customized. This sample replaces the button background images, the overall button style and the background of the view itself. Additionally, the document is getting rounded corners and receives an animation when the user navigates through pages.
In order to apply the styles, simply add the DocumentViewer.css (download the project from our GitHub repository) to the head element of your ASPX page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs"
Inherits="tx_documentviewer_style.index" %>
<%@ Register assembly="TXDocumentServer, Version=22.0.800.500,
Culture=neutral, PublicKeyToken=6b83fe9a75cfb638"
namespace="TXTextControl.DocumentServer.Web" tagprefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DocumentViewer Style Sample</title>
<link href="DocumentViewer.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:DocumentViewer ID="DocumentViewer1"
runat="server" Height="400px" Width="795px" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>Download the sample from GitHub and test it on your own.
Download and Fork This Sample on GitHub
We proudly host our sample code on github.com/TextControl.
Please fork and contribute.
Requirements for this sample
- Visual Studio 2012 or better
- TX Text Control .NET Server (trial sufficient)
ASP.NET
Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.
- Angular
- Blazor
- React
- JavaScript
- ASP.NET MVC, ASP.NET Core, and WebForms
Related Posts
Official TX Text Control .NET Sample Applications Are Now Hosted on GitHub
This article gives a quick overview of the new repositories, their structure and our plans for the future.
Building a Touch-enabled Button Bar with Javascript
This sample builds a custom touch-friendly button bar for Web.TextControl using its JavaScript API. HTML input elements styled with CSS replace the desktop ribbon bar. Click events call…
MailMerge: Merge Hyperlinks into Merge Fields
The MailMerge FieldMerged event allows replacing standard merge fields with hyperlinks during the merge process. A unique identifier in the XML data source marks fields for conversion. A temporary…
ASP.NETDocument Viewer.NET Server
ASP.NET DocumentViewer Sample Online
TX Text Control Server for ASP.NET 15.0 introduces the ASP.NET DocumentViewer with ReadOnly and Edit modes. The Edit mode supports MS Word form fields including FormText, FormDropDown, and…
Building a TX Text Control Project with GitHub Actions and the Text Control…
This tutorial provides a step-by-step guide to setting up a clean, reproducible environment using GitHub Actions. It starts with a brand-new project and ends with a fully automated build and test…