TX Text Control Web: Customize the Ribbon Bar
The new HTML5 based editor requires no plug-ins, but pure HTML5 and CSS. Therefore, each element of the 'out-of-the-box' usable ribbon bar can be customized and removed, if required. This enables developers to provide a slimmed down version with a selected feature set. In the following screenshot, the groups Clipboard, Styles and Editing have been removed: Each ribbon tab, group or button is defined with a unique ID and can be removed using CSS. We prepared a CSS file that can be easily…
The new HTML5 based editor requires no plug-ins, but pure HTML5 and CSS. Therefore, each element of the 'out-of-the-box' usable ribbon bar can be customized and removed, if required. This enables developers to provide a slimmed down version with a selected feature set. In the following screenshot, the groups Clipboard, Styles and Editing have been removed:
Each ribbon tab, group or button is defined with a unique ID and can be removed using CSS. We prepared a CSS file that can be easily added to your ASP.NET project that helps you to remove elements from the ribbon bar. The following tutorial shows how to add the CSS file and how to remove the Save and Save As file menu options:
- Create a simple ASP.NET Web application based on our tutorial.
- Download the CSS file: textcontrol_styles.css
-
In Visual Studio, select your created project in the Solution Explorer and choose Add Existing Item... from the Project main menu.
In the opened dialog Add Existing Item, browse for the downloaded CSS file textcontrol_styles.css and confirm with Add.
-
Add a reference to the CSS file to the HEAD of your ASPX page. The HEAD should look like this:
<head runat="server"> <title></title> <link href="textcontrol_styles.css" rel="stylesheet" /> </head> -
Open the textcontrol_styles.css from the Solution Explorer. All ribbon tabs, groups and buttons are listed in the CSS file. Find the entries #fileMnuItemSave and #fileMnuItemSaveAs.
Each element has an commented display property. Uncomment the property, so that the CSS entries for #fileMnuItemSave and #fileMnuItemSaveAs look like this:
#fileMnuItemSave { display: none !important; } #fileMnuItemSaveAs { display: none !important; } - Compile and start your Web application.
When opening the File menu, the options Save and Save As are not visible:
The CSS cannot be only used to remove elements from the ribbon bar. You can use all CSS properties to style various elements of the ribbon bar.
Reporting
The Text Control Reporting Framework combines powerful reporting features with an easy-to-use, MS Word compatible word processor. Users can create documents and templates using ordinary Microsoft Word skills. The Reporting Framework is included in all .NET based TX Text Control products including ASP.NET, Windows Forms and WPF.
Related Posts
Creating Your First ASP.NET Reporting Application
This tutorial shows how to use the MailMerge component in an ASP.NET Web application to merge a template with data to create an Adobe PDF document.
Reporting Best Practices and How-To Guides
This article collection contains best practices and how-to guides for Text Control Reporting (MailMerge) and the HTML5 based rich text editor (Web.TextControl). Getting-Started and Basic Concepts…
HTML5 Technical Considerations - The Concept Explained
The HTML5 Web Editor consists of two parts: The ASP.NET server control Web.TextControl that provides the client-interface and user experience and the TX Text Control Web Server running as a…
TX Text Control Web: Attaching Events to Ribbon Elements
The HTML5 Web editor and template designer that is part of TX Text Control .NET Server comes with a ready-to-use ribbon bar implementation. Thanks to the fact that this ribbon bar is completely…
Creating an ASP.NET MVC DocumentViewer Application With Razor
Create a simple ASP.NET (MVC) application that uses the HTML5 document viewer.