# Web.TextControl: Adding Buttons to the Ribbon Bar
> The HTML5 ribbon bar in Web.TextControl is built with pure HTML and CSS, making it open to customization via DOM manipulation. Using JavaScript and insertAdjacentHTML, developers can inject new ribbon groups and buttons, wiring click events through ASP.NET async postbacks.
- **Author:** Bjoern Meyer
- **Published:** 2015-01-23
- **Modified:** 2026-03-05
- **Description:** The HTML5 ribbon bar in Web.TextControl is built with pure HTML and CSS, making it open to customization via DOM manipulation. Using JavaScript and insertAdjacentHTML, developers can inject new ribbon groups and buttons, wiring click events through ASP.NET async postbacks.
- **2 min read** (357 words)
- **Tags:**
- HTML5
- Tutorial
- **Web URL:** https://www.textcontrol.com/blog/2015/01/23/webtextcontrol-adding-buttons-to-the-ribbon-bar/
- **LLMs URL:** https://www.textcontrol.com/blog/2015/01/23/webtextcontrol-adding-buttons-to-the-ribbon-bar/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2015/01/23/webtextcontrol-adding-buttons-to-the-ribbon-bar/llms-full.txt
---
The ribbon bar of the HTML5 based rich text editor [Web.TextControl](https://docs.textcontrol.com/textcontrol/asp-dotnet/ref.txtextcontrol.web.textcontrol.class.htm) is pure HTML and CSS. That implies that it can be customized by [manipulating the CSS](https://www.textcontrol.com/blog/2014/10/03/tx-text-control-web-customize-the-ribbon-bar/llms-full.txt). Additionally, the HTML DOM can be used to add elements to the ribbon bar using Javascript.
The following sample shows how to add a new ribbon group to the first *HOME* tab right before the first *Clipboard* ribbon group.
The following Javascript code checks whether the complete ribbon bar has been loaded which is required to manipulate the DOM:
```
var checkExist = setInterval(function () {
if (document.getElementById(\'ribbonGroupClipboard\') != null) {
addButton();
clearInterval(checkExist);
}
}, 100);
```
If loaded, the required code to add a button is called:
```
function addButton() {
sSaveBtn = \'\';
// add the new button and ribbon group using HTML
document.getElementById(\'ribbonGroupClipboard\').insertAdjacentHTML(
\'beforebegin\', sSaveBtn);
// force a post back on the invisible button
document.getElementById("saveButton").addEventListener(
"click",
function () { __doPostBack(\'<%= dummyButton.ClientID %>\', \'\'); });
}
```
This code basically inserts HTML at a specific position using the *insertAdjacentHTML* method. Additionally, a *Click* event is attached to the new inserted button. In this event, an AJAX PostBack of a registered dummy button is submitted. This invisible dummy button is inserted above an UpdatePanel in the ASPX page. Additionally, the button is registered in the *Triggers* section as an *AsyncPostBackTrigger*:
```
```
After clicking the newly inserted button, the following code-behind code is used to save the document:
```
protected void dummyButton_Click(object sender, EventArgs e)
{
byte[] data;
TextControl1.SaveText(out data,
TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);
ScriptManager.RegisterClientScriptBlock(
this.Page,
this.Page.GetType(),
"alert",
"alert(\'Successfully saved.\');",
true);
}
```
You can [download](https://s1-www.textcontrol.com/assets/dist/blog/2015/01/23/a/assets/tx_addbuttons.zip) the Visual Studio sample to test this on your own. At least a [trial version](https://www.textcontrol.com/product/tx-text-control-dotnet-server/download/) of TX Text Control .NET Server is required.
---
## About Bjoern Meyer
As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.
- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)
---
## Related Posts
- [Creating an ASP.NET MVC DocumentViewer Application With Razor](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-mvc-documentviewer-application-with-razor/llms.txt)
- [Creating an ASP.NET MVC Application With Razor](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-mvc-application-with-razor/llms.txt)
- [Creating Your First ASP.NET Reporting Application](https://www.textcontrol.com/blog/2020/01/01/creating-your-first-aspnet-reporting-application/llms.txt)
- [Creating an ASP.NET Web Forms AJAX Application](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-web-forms-ajax-application/llms.txt)
- [Using an Azure Load Balancer with Web.TextControl](https://www.textcontrol.com/blog/2016/03/22/using-an-azure-load-balancer-with-webtextcontrol/llms.txt)
- [TextControl.Web: Creating an MVC Application with Razor](https://www.textcontrol.com/blog/2015/05/12/textcontrolweb-creating-an-mvc-application-with-razor/llms.txt)
- [Web.TextControl in MVC with MVC View Pages](https://www.textcontrol.com/blog/2015/03/23/webtextcontrol-in-mvc-with-mvc-view-pages/llms.txt)
- [Web.TextControl and Spell Checking](https://www.textcontrol.com/blog/2015/02/09/webtextcontrol-and-spell-checking/llms.txt)
- [Reporting Best Practices and How-To Guides](https://www.textcontrol.com/blog/2015/02/05/reporting-best-practices-and-how-to-guides/llms.txt)
- [HTML5 Web Editor: Loading and Saving Documents](https://www.textcontrol.com/blog/2014/11/07/html5-web-editor-loading-and-saving-documents/llms.txt)
- [Removing Complete Ribbon Tabs from the HTML5 Web Editor](https://www.textcontrol.com/blog/2014/11/06/removing-complete-ribbon-tabs-from-the-html5-web-editor/llms.txt)
- [HTML5 Technical Considerations - The Concept Explained](https://www.textcontrol.com/blog/2014/10/16/html5-technical-considerations-the-concept-explained/llms.txt)
- [TX Text Control Web: Attaching Events to Ribbon Elements](https://www.textcontrol.com/blog/2014/10/07/tx-text-control-web-attaching-events-to-ribbon-elements/llms.txt)
- [TX Text Control Web: Customize the Ribbon Bar](https://www.textcontrol.com/blog/2014/10/03/tx-text-control-web-customize-the-ribbon-bar/llms.txt)
- [Securing WebSocket Connections in ASP.NET Core using Sec WebSocket Protocol Header](https://www.textcontrol.com/blog/2025/11/20/securing-websocket-connections-in-aspnet-core-using-sec-websocket-protocol-header/llms.txt)
- [Windows Forms Tutorial: Create Your First Windows Forms C# Application](https://www.textcontrol.com/blog/2024/08/26/windows-forms-tutorial-create-your-first-windows-forms-csharp-application/llms.txt)
- [How to Mail Merge MS Word DOCX Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/16/how-to-mail-merge-ms-word-docx-documents-in-aspnet-core-csharp/llms.txt)
- [Creating an Angular Document Editor Application with a Node.js WebSocket Server](https://www.textcontrol.com/blog/2023/08/24/creating-an-angular-document-editor-application-with-a-nodejs-websocket-server/llms.txt)
- [Adding SVG Watermarks to Documents](https://www.textcontrol.com/blog/2022/01/28/adding-svg-watermarks-to-documents/llms.txt)
- [Using MailMerge in ASP.NET Core 6 Web Applications](https://www.textcontrol.com/blog/2022/01/27/using-mailmerge-in-aspnet-core-6-web-applications/llms.txt)
- [Detect Toggle Button Changes Using a MutationObserver](https://www.textcontrol.com/blog/2021/11/11/detect-toggle-button-changes-using-a-mutationobserver/llms.txt)
- [DocumentViewer for React Prerelease](https://www.textcontrol.com/blog/2020/10/27/document-viewer-for-react-prerelease/llms.txt)
- [Angular: Deploying the Backend TCP Service Separately](https://www.textcontrol.com/blog/2020/10/09/angular-deploying-the-backend-tcp-service-separately/llms.txt)
- [Implementing Conditional Table Cell Colors with MailMerge](https://www.textcontrol.com/blog/2020/10/08/implementing-conditional-table-cell-colors-with-mailmerge/llms.txt)
- [New DocumentViewer Signature Tutorial Sample](https://www.textcontrol.com/blog/2020/08/18/new-documentviewer-signature-tutorial-sample/llms.txt)
\