TX Text Control Blog

Web.TextControl: jQueryUI alert boxes and Javascript events

Björn Meyer

Blogged by Björn Meyer on April 20, 2015 and tagged with github, mvc, html5, asp.net.


The online demo Simple implements some features based on the newly available API of Web.TextControl. It shows 3 typical tasks:

  • Remove the Save As... menu item
  • Attach event handlers to ribbon items, stop the event bubbling and show alert boxes
  • Manipulate the out-of-the-box jQueryUI dialog boxes

Removing ribbon items

The first task can be easily realized using CSS:

<style> #fileMnuItemSaveAs { display: none !important; } </style>

Each element including ribbon tabs, groups and items have specific CSS class names which can be customized. In this case, the display property is set to none to hide the element completely.

Attaching events and handle event bubbling

To achieve the second task, we need to trap an event from Web.TextControl that is raised when the ribbon bar is completely loaded. Otherwise, elements of the ribbon bar cannot be manipulated in the DOM.

TXTextControl.addEventListener("ribbonTabsLoaded", function (e) { attachEvents(); });

In the function attachEvents, click events are attached to the menu item Open and Save. When clicking Open, the function waitForFileOpenDialog is called.

function attachEvents() { // attach click event handler to 'load' button document.getElementById("fileMnuItemOpen").addEventListener("click", function (e) { waitForFileOpenDialog(); }); // [...] }

Manipulating jQueryUI dialog boxes

The function waitForFileOpenDialog is a recursive function that is basically waiting (looping) until the DOM element txOFDSelFileType exists. This element is the File Type selection drop down box in the Open File dialog box from Web.TextControl:

File Types

The idea is to wait until the element is available in order to pre-select another file type (All Files (*.*)). The function reorderListView sets the selectedIndex property to 0 in order to raise a change event to update the file list:

// wait until the file open dialog is opened function waitForFileOpenDialog() { var checkExist = setInterval(function () { if (document.getElementById("txOFDSelFileType") != null) { clearInterval(checkExist); reorderListView() } }, 100); } // select 'All Files' and fire the Change event to update the file list function reorderListView() { setTimeout(function () { document.getElementById("txOFDSelFileType").selectedIndex = 0; fireEvent(document.getElementById("txOFDSelFileType"), "change"); }, 300); }
Event bubbling

When clicking Save, a jQueryUI alert message dialog is shown and the event bubbling is canceled.

The newly attached event is raised before it is bubbled to Web.TextControl. This allows you to cancel the default functionality of a ribbon item in order to add your own action such as opening an alert message box:

// this function attaches events after the ribbon has been loaded completely function attachEvents() { // [...] // attach click event handler to 'save' button, show an alert // message box and stop the bubbling of the click event to Web.TextControl document.getElementById("fileMnuItemSave").addEventListener("click", function (e) { jQueryAlert("TX Text Control", "Alert message"); e.cancelBubble = true; }); }

Web.TextControl uses jQueryUI for all dialogs including message boxes. In order to use the above code, jQuery and jQueryUI must be referenced:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script>

If no other jQueryUI CSS is defined, the TX Text Control dialog style will be used automatically:

jQueryUI dialog

Download the sample from GitHub and test it on your own.

Download and fork this sample on GitHub

We proudly host our sample code on github.com/textcontrol. Feel free to fork and contribute!

Download ZIP

Open repository on GitHub

Open in Visual Studio

Requirements for this sample

  • at least Visual Studio 2012
  • At least a trial version of TX Text Control .NET Server for ASP.NET X13 (23.0)
 
 
Call us: +1 704-544-7445 (United States)
 
 

Products

Support

Downloads

Corporate

Buy Now

About Text Control

Founded in 1991, Text Control is an award-winning Visual Studio Industry Partner and leading vendor of word processing and reporting components for Microsoft development technologies. The products help thousands of developers add comprehensive word processing functionality to their applications. Text Control is 100% self-owned and independent of all investor decisions. Customers benefit from these years of experience, large user-base, and at the same time, appreciate developing with a mature, reliable product.

SD Times 100SD Times 100SD Times 100SD Times 100SD Times 100SD Times 100Visual Studio 2015 Launch PartnerVisual Studio 2013 Launch PartnerVisual Studio 2012 Launch PartnerVisual Studio Partner