TX Text Control Web: Customize the Ribbon Bar
The TX Text Control HTML5 Web editor ribbon bar is built entirely with HTML and CSS, assigning unique CSS IDs to every tab, group, and button. Developers hide or restyle ribbon elements by toggling CSS display properties in a provided stylesheet without modifying server-side code.
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
The MailMerge and ServerTextControl components of TX Text Control .NET Server for ASP.NET enable server-side reporting in Web Forms. A template.docx merges with XML data via a button click…
Reporting Best Practices and How-To Guides
A categorized reference of best practices and how-to guides for TX Text Control MailMerge reporting and the HTML5 Web.TextControl editor. Categories cover data sources, merge fields, merge blocks,…
HTML5 Technical Considerations - The Concept Explained
The TX Text Control HTML5 editor uses a client-server architecture where the ASP.NET Web.TextControl renders the UI and a Windows Service synchronizes documents. This zero-footprint approach…
TX Text Control Web: Attaching Events to Ribbon Elements
Ribbon menu items in the TX Text Control HTML5 Web editor can trigger server-side logic through jQuery click handlers and ASP.NET postbacks. This tutorial attaches a handler to the Save item,…
Creating an ASP.NET MVC DocumentViewer Application With Razor
Create a simple ASP.NET (MVC) application that uses the HTML5 document viewer.