# 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, routes it through a hidden UpdatePanel button, and executes custom code-behind logic.

- **Author:** Bjoern Meyer
- **Published:** 2014-10-07
- **Modified:** 2026-07-17
- **Description:** 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, routes it through a hidden UpdatePanel button, and executes custom code-behind logic.
- **3 min read** (427 words)
- **Tags:**
  - HTML5
  - Reporting
  - Tutorial
- **Web URL:** https://www.textcontrol.com/blog/2014/10/07/tx-text-control-web-attaching-events-to-ribbon-elements/
- **LLMs URL:** https://www.textcontrol.com/blog/2014/10/07/tx-text-control-web-attaching-events-to-ribbon-elements/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2014/10/07/tx-text-control-web-attaching-events-to-ribbon-elements/llms-full.txt
- **GitHub Repository:** https://github.com/TextControl/TextControl.Web.MVC.AttachingEvents

---

The HTML5 Web editor and template designer that is part of [TX Text Control .NET Server](https://www.textcontrol.com/product/tx-text-control-dotnet-server/) comes with a ready-to-use ribbon bar implementation. Thanks to the fact that this ribbon bar is completely designed with HTML and CSS, all [elements can be styled](https://www.textcontrol.com/blog/2014/10/03/tx-text-control-web-customize-the-ribbon-bar/llms-full.txt) and modified using CSS, if required.

The pre-configured *File* ribbon menu can be also modified and customized. Below is a screenshot that shows the typical file menu:

![TX Text Control Web: Attaching events to ribbon elements](https://s1-www.textcontrol.com/assets/dist/blog/2014/10/07/a/assets/ribbon_file_1.webp "TX Text Control Web: Attaching events to ribbon elements")The *Save* menu item is disabled and will be enabled automatically after a document has been loaded using the *Load* item or by loading a document using the server-side API.

**But what if you only want to provide a *Save* menu item to the end user with your own custom, code-behind save code?**

In this case, you can attach a Javascript event to the ribbon element using jQuery that does a post-back targeting a hidden button in an *UpdatePanel*. This is less complex than it sounds. This article describes this concept in detail.

Using jQuery, an event is attached to the first <a> element of the *Save* menu item with the client ID *\#fileMnuItemSave*:

```
$("#fileMnuItemSave a:first").click(function () {
    __doPostBack(\'<% Response.Write(Button1.ClientID); %>\', \'\');
    return false;
            });
```

The *\_\_doPostBack* function does a post-back for the complete page or only parts of it when the target object is placed in an *UpdatePanel*. For this reason, we will place a dummy *Button* control in an *UpdatePanel* of the ASPX page and set the *display* CSS property to *hidden*:

```
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button
            style="display: none;"
            ID="Button1"
            runat="server"
            OnClick="Button1_Click" />
    </ContentTemplate>
</asp:UpdatePanel>
```

When the user clicks the ribbon menu item *Save*, a post-back triggers the *OnClick* event of the button:

```
protected void Button1_Click(object sender, EventArgs e)
{
    string data;

    TextControl1.SaveText(out data,
        TXTextControl.Web.StringStreamType.RichTextFormat);

    System.Web.UI.ScriptManager.RegisterClientScriptBlock(this,
        this.GetType(),
        "AlertBox",
        "alert(\'Your document has been saved.\');",
        true);
}
```

In this event, you can save the document using the API call *SaveText* or do additional logic such as storing the document in a database. In the above code, a client-side message box informs the user that the document has been saved properly.

![TX Text Control Web: Attaching events to ribbon elements](https://s1-www.textcontrol.com/assets/dist/blog/2014/10/07/a/assets/ribbon_file_2.webp "TX Text Control Web: Attaching events to ribbon elements")Download the sample from GitHub and test it on your own.

---

## 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 Your First ASP.NET Reporting Application](https://www.textcontrol.com/blog/2020/01/01/creating-your-first-aspnet-reporting-application/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 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: Customize the Ribbon Bar](https://www.textcontrol.com/blog/2014/10/03/tx-text-control-web-customize-the-ribbon-bar/llms.txt)
- [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 an ASP.NET Web Forms AJAX Application](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-web-forms-ajax-application/llms.txt)
- [Automatically Reconnect to the Server and Recover the Document](https://www.textcontrol.com/blog/2019/09/05/automatically-reconnect-to-the-server-and-recover-the-document/llms.txt)
- [New Online Sample: Build your First Report](https://www.textcontrol.com/blog/2019/07/03/build-your-first-report/llms.txt)
- [Create your First Document with ReportingCloud](https://www.textcontrol.com/blog/2019/02/19/create-your-first-document-with-reportingcloud/llms.txt)
- [JavaScript API: Working with Merge Fields](https://www.textcontrol.com/blog/2018/03/05/javascript-api-working-with-merge-fields/llms.txt)
- [Technology Preview: Embeddable HTML Widget to integrate Document Editing to Angular, React and other Frameworks](https://www.textcontrol.com/blog/2018/03/01/embeddable-html-widget-for-all-frameworks/llms.txt)
- [Embedding TXTextControl.Web in non-.NET Framework applications like .NET Core and AngularJS](https://www.textcontrol.com/blog/2017/10/23/embedding-txtextcontrol/llms.txt)
- [Sneak Peek X15: Custom Field Overlays in HTML5-based Text Control](https://www.textcontrol.com/blog/2017/06/21/sneak-peek-x15-custom-field-overlays-in-html5-based-text-control/llms.txt)
- [New ASP.NET MVC DocumentViewer Rolled out to the ReportingCloud Portal](https://www.textcontrol.com/blog/2017/04/22/new-aspnet-mvc-documentviewer-rolled-out-to-the-reportingcloud-portal/llms.txt)
- [Updated MVC Sample: Loading Files from the Backstage Menu](https://www.textcontrol.com/blog/2017/04/20/updated-mvc-sample-loading-files-from-the-backstage-menu/llms.txt)
- [ASP.NET MVC: Implementing a Simplistic, Custom Button Bar](https://www.textcontrol.com/blog/2017/03/13/aspnet-mvc-implementing-a-simplistic-custom-button-bar/llms.txt)
- [ASP.NET MVC: Adding Protected Sections to Documents](https://www.textcontrol.com/blog/2017/03/01/aspnet-mvc-adding-protected-sections-to-documents/llms.txt)
- [ASP.NET: Adding Electronic Signatures to Documents](https://www.textcontrol.com/blog/2016/10/12/aspnet-adding-electronic-signatures-to-documents/llms.txt)
- [MailMerge: Starting Each Merge Block on a New Page](https://www.textcontrol.com/blog/2016/09/09/mailmerge-starting-each-merge-block-on-a-new-page/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)
- [Setting the Interface and Control's Culture of Web.TextControl](https://www.textcontrol.com/blog/2015/12/16/setting-the-interface-and-controls-culture-of-webtextcontrol/llms.txt)
- [X13: Using IMEs and Localization in Web.TextControl](https://www.textcontrol.com/blog/2015/11/20/x13-using-imes-and-localization-in-webtextcontrol/llms.txt)
- [X13: New Web Forms DocumentViewer Style](https://www.textcontrol.com/blog/2015/11/19/x13-new-web-forms-documentviewer-style/llms.txt)
- [Sneak Peek X13: New Features in Web.TextControl](https://www.textcontrol.com/blog/2015/11/18/sneak-peek-x13-new-features-in-webtextcontrol/llms.txt)
