TX Text Control .NET for ASP.NET is shipped with a fully-featured Ribbon control and ready-to-use Ribbon tabs for all typical tasks of TX Text Control. That allows a rapid application building within seconds without writing a single line of code.
The ribbon bar is completely built in pure HTML and CSS and can be therefore easily manipulated. Elements can be added, removed and rearranged.
This article explains the easiest way of adding new content to the existing ribbon bar by loading pre-designed HTML using jQuery into the ribbon DOM.
First of all, create a new folder in your project that contains the HTML and resources for your custom ribbon content. In this sample, the folder is named RibbonExtensions:
For each new ribbon tab, a new folder has been created. This whole folder and file structure is just a sample and can be structured based on your actual requirements and preferences.
The HTML of a new ribbon tab container looks like this:
The HTML representation of new ribbon tab content is shown in the following GitHub gist:
After that, the tab content is loaded and dynamically added to the last content container item.
Additionally, a click event is attached to the ribbon tab menu item to switch the tabs programmatically when a user clicks on the menu item title. The function switchTabs hides the current content in order to display our new content.
In the next step, a new ribbon group with a button should be added to the Reporting ribbon tab after the Merge Fields group. The following HTML is the group representation including the custom button:
In the ribbonTabsLoaded event, this HTML gets loaded and added after the existing ribbon group:
Test this on your own by downloading this sample project from our GitHub repository.
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 2015 or better
- TX Text Control .NET Server for ASP.NET (trial sufficient)