# Ribbon > Work with the ribbon of the Document Editor: its tabs and events, selecting, minimizing and expanding it, removing tabs, groups and buttons, the sidebar button. - **Product:** TX Text Control .NET Server - **Section:** Documentation - **Kind:** Topic - **Path:** TX Text Control .NET Server > Document Editor > Ribbon and UI > Ribbon - **4281 words** - **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/ribbon/ - **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/ribbon/llms.txt - **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/ribbon/llms-full.txt --- Hiding functions that users don't need is easier once you know how the ribbon of the Document Editor is built. Your code then selects a tab, minimizes and expands the ribbon, removes tabs, groups and buttons and chooses the sidebars of the sidebar toggle button. Adding tabs and buttons of your own is described in [Custom Tabs](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/custom-tabs/llms-full.txt). The examples change the view of the [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt) tutorial. ### How the Ribbon Is Built The ribbon bar groups the functions of the editor in tabs, such as **Home**, **Insert**, **Reporting**, **Proofing**, **Form Fields** and **Permissions**. Each tab contains groups of buttons, for example the Clipboard and Font groups of the **Home** tab. Some tabs are contextual: the editor shows them only for a selected object, such as the **Frame Formatting** and **Chart Formatting** tabs for a selected chart, or the **Table Layout** and **Formulas** tabs, colored green and orange, while the input position is in a table: ![Ribbon of the Document Editor with the contextual Table Layout tab active and the Formulas tab next to it, after the tabs Home, Insert, Page Layout, Reporting, View, References, Proofing, Permissions and Form Fields](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/contextual-table-tabs.f6e3ba6a.webp) The ribbon consists of HTML elements and CSS in the page. Your code works with it in two ways: - **The JavaScript API** selects a tab, minimizes and expands the ribbon and configures the sidebar toggle button and the Permissions tab. - **The HTML elements** of the ribbon can be removed, restyled or extended with the methods of the browser's DOM, using the IDs of the elements. The IDs of the ribbon's elements aren't part of the API reference. They come from blog articles and samples, and the ribbon changes between versions: in version 34.0, the ribbons of the editor on the Core engine were changed to offer the same functions as on Windows. Test DOM changes after every upgrade, and find the IDs of your version with the developer tools of the browser. The content of the ribbon is loaded from the server. Since version 32.0, it is loaded at the same time as the other resources of the editor, and users can type and use the first tab as soon as the document has been loaded. The editor raises two events while the ribbon is loaded: | Event | Is raised | Use it to | |---|---|---| | `ribbonTabLoaded` | Each time a tab has been loaded; [RibbonTabLoadedEventArgs](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbontabloadedeventargs/llms-full.txt) contains the name ([tabName](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbontabloadedeventargs/tabname-property/llms-full.txt)) and the HTML element ([elemTab](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbontabloadedeventargs/elemtab-property/llms-full.txt)) of the tab | Change a single tab as soon as it exists | | `ribbonTabsLoaded` | After the complete ribbon has been loaded and the string resources from the server have been applied | Change groups and buttons of any tab | Don't rely on their order relative to `textControlLoaded`: attach their handlers directly, not inside a `textControlLoaded` handler; see [Events](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/events/#events-during-initialization). In version 32.0, `ribbonTabLoaded` passes these tab names: `ribbonTabHome`, `ribbonTabInsert`, `ribbonTabPageLayout`, `ribbonTabReports`, `ribbonTabView`, `ribbonTabReferences`, `ribbonTabProofing`, `ribbonTabPermissions`, `ribbonTabFormFields`, `ribbonTabTableLayout`, `ribbonTabFormula`, `ribbonTabFrameFormatting` and `ribbonTabChartFormatting`. Log `e.tabName` to see the names of your version, as the example on the Events page does. ### Select, Minimize and Expand the Ribbon [TXTextControl.ribbon](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/ribbon-property/llms-full.txt) returns the [Ribbon](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbon/llms-full.txt) object. The following view adds buttons that minimize and expand the ribbon and select two of its tabs. It also logs the tab the user selects. Replace the content of *Views/Home/Index.cshtml*: ```cshtml @using TXTextControl.Web.MVC @{ var sDocument = "

Welcome to Text Control

"; } @Html.TXTextControl().TextControl(settings => { settings.UserNames = new string[] { "Tim Typer" }; }).LoadText(sDocument, TXTextControl.Web.StringStreamType.HTMLFormat).Render() ``` The code works as follows: - [minimize](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbon/minimize-method/llms-full.txt) minimizes the ribbon, so that only the names of the tabs stay visible. [expand](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbon/expand-method/llms-full.txt) expands a minimized ribbon again. - [selectedTab](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbon/selectedtab-property/llms-full.txt) gets or sets the name of the selected tab. - The `ribbonTabIndexChanged` handler receives [RibbonTabIndexChangedEventArgs](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbontabindexchangedeventargs/llms-full.txt), whose [name](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbontabindexchangedeventargs/name-property/llms-full.txt) is the name of the tab that is now active. Click **Insert Tab**: the ribbon shows the **Insert** tab. Click **Minimize Ribbon** and **Expand Ribbon** to collapse and restore the ribbon. The reference lists these values for `selectedTab`: `"tabDefault"` (the **Home** tab), `"tabInsert"`, `"tabPageLayout"`, `"tabMailings"`, `"tabView"`, `"tabTableLayout"`, `"tabObjectFormat"`, `"tabShapeFormat"`, `"tabPermissions"`, `"tabFormula"` and `"tabChartFormatting"`. They are the IDs of the tab headers, the `a` elements in `#ribbonbar ul.tabs`, which differ from the names `ribbonTabLoaded` passes. In the Document Editor of `TXTextControl.Web` 34.5.0, the headers have the IDs `tabDefault` (**Home**), `tabInsert`, `tabPageLayout`, `tabReports` (**Reporting**), `tabView`, `tabReferences`, `tabProofing`, `tabPermissions` and `tabFormFields`, and the contextual tabs `tabTableLayout`, `tabFormula` (**Formulas**) and `tabFrameFormatting`; setting `selectedTab` to one of them selects the tab. As with the other element IDs, check the IDs of your version in the developer tools of the browser. To show or hide the complete ribbon bar, use `showRibbonBar`, described in [Viewing and Printing](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/viewing-printing/#ribbon-bar-rulers-and-status-bar). ### Remove Tabs, Groups and Buttons To remove built-in functions, remove their HTML elements when they have been loaded. A tab consists of two elements: its content, a `div` element whose ID is the tab name, and its header, a link in a list item whose `rel` attribute contains the same name. Groups and buttons have IDs such as `ribbonGroupClipboard` or `ribbonTabHome_btnItalic`. The following code removes the **Reporting** tab, the Clipboard group of the **Home** tab and its Italic button. Add it to the `script` element of the view above: ```javascript // Remove the Reporting tab as soon as it has been loaded TXTextControl.addEventListener("ribbonTabLoaded", function (e) { if (e.tabName === "ribbonTabReports") { // The content of the tab e.elemTab.remove(); // The header: the list item whose link points to the content var header = document.querySelector("[rel='" + e.tabName + "']"); if (header) { header.parentNode.remove(); } } }); // Remove groups and buttons after the complete ribbon has been loaded TXTextControl.addEventListener("ribbonTabsLoaded", function () { var clipboardGroup = document.getElementById("ribbonGroupClipboard"); if (clipboardGroup) { clipboardGroup.remove(); } var italicButton = document.getElementById("ribbonTabHome_btnItalic"); if (italicButton) { italicButton.remove(); } }); ``` - The `ribbonTabLoaded` handler compares [tabName](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbontabloadedeventargs/tabname-property/llms-full.txt) with the tab to remove, removes the content element [elemTab](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/ribbontabloadedeventargs/elemtab-property/llms-full.txt) and finds the header by its `rel` attribute. - The `ribbonTabsLoaded` handler removes elements by their IDs. Each removal checks first whether the element exists, because IDs can differ between versions. The elements can be restyled with CSS in the same way, for example `#ribbonTabHome { background-color: lightskyblue; }`. The blog article [Customizing the Ribbon in TX Text Control for Angular](https://www.textcontrol.com/blog/2024/09/11/customizing-the-ribbon-in-tx-text-control-for-angular/) removes and restyles ribbon elements in an Angular application, where the handlers are attached when the `txDocumentEditorLoaded` event of the component has been raised. The ribbon raises no event when a toggle button, such as **Bold**, changes its state. The blog article [Detect Toggle Button Changes Using a MutationObserver](https://www.textcontrol.com/blog/2021/11/11/detect-toggle-button-changes-using-a-mutationobserver/) observes the CSS class `ribbon-button-selected` of these buttons instead. ### Detect the Mail Merge Preview The **Preview** button of the **Reporting** tab merges the template with the data loaded by `loadJsonData` and shows the result. While the preview is shown, the ribbon offers only **Exit** and the record navigation: ![Mail merge preview in the Document Editor: the ribbon shows only the Reporting tab with the Exit button and the First, Previous, Next and Last Record buttons, and the letter shows the merged values](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/merge-preview-ribbon.8be77ec6.webp) An application whose own buttons save the document should disable them while users look at merged data. The JavaScript API raises no event for the preview, but the ribbon group of the preview, `ribbonGroupMailMergePreview`, is hidden while the template is edited and visible while the preview is shown. A `MutationObserver` watches it: ```javascript function isVisible(element) { var style = window.getComputedStyle(element); return style.display !== "none" && style.visibility !== "hidden"; } TXTextControl.addEventListener("ribbonTabsLoaded", function () { var previewGroup = document.getElementById("ribbonGroupMailMergePreview"); if (!previewGroup) { console.error("Preview group not found"); return; } function update() { // Disable the page's own Save button while the preview is shown document.getElementById("saveButton").disabled = isVisible(previewGroup); } new MutationObserver(update).observe(previewGroup, { attributes: true, childList: true, subtree: true }); update(); }); ``` - The handler of `ribbonTabsLoaded` looks up the group, because it exists only after the ribbon has been loaded. - `isVisible` reads the computed style: the group has `display: none` while the template is edited. - The `MutationObserver` calls `update` whenever the attributes of the group or its content change, for example when the preview starts or ends. `saveButton` is the ID of a button on your page. In the Document Editor of `TXTextControl.Web` 34.5.0, the group became visible when the preview started and was hidden again after **Exit**. The blog article [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/) shows a complete page. ### Configure the Sidebar Toggle Button The sidebar toggle button in the top right corner of the ribbon opens the sidebars of the editor: the Track Changes sidebar, the Field Navigator and the Comments sidebar. Its label shows the current sidebar, and its arrow opens a menu with the others: ![Sidebar toggle button of the Document Editor with its menu open, listing Tracked Changes, Field Navigation and Comments](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/sidebar-toggle-menu.9d03c718.webp) [TXTextControl.sideBarToggleButton](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/sidebartogglebutton-property/llms-full.txt) returns the [SideBarToggleButton](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/sidebartogglebutton/llms-full.txt), which decides which sidebars the button offers: ```javascript TXTextControl.addEventListener("textControlLoaded", function () { // Offer only the Track Changes and Comments sidebars TXTextControl.sideBarToggleButton.setAllowedSideBars( TXTextControl.SideBarType.TrackChanges | TXTextControl.SideBarType.Comments); }); ``` - [setAllowedSideBars](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/sidebartogglebutton/setallowedsidebars-method/llms-full.txt) takes a bitwise combination of [SideBarType](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/sidebartype-enumeration/llms-full.txt) values: `TrackChanges`, `FieldNavigator`, `Comments` or `All`. With `None`, the button is removed from the ribbon. - [getAllowedSideBars](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/sidebartogglebutton/getallowedsidebars-method/llms-full.txt) passes the current combination. [setCurrentSideBar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/sidebartogglebutton/setcurrentsidebar-method/llms-full.txt) and [getCurrentSideBar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/sidebartogglebutton/getcurrentsidebar-method/llms-full.txt) set and get the current sidebar of the button. The sidebars themselves are described in [Track Changes](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/track-changes/llms-full.txt), [Comments](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/comments/llms-full.txt) and [Fields](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/fields/llms-full.txt). ### Other Settings of the Ribbon - **View settings.** `TextControlSettings` and the settings of `TXTextControl.init` have no ribbon properties. Changes to the ribbon are made with JavaScript. - **Permissions tab.** [TXTextControl.ribbonPermissionsTab](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/ribbonpermissionstab-property/llms-full.txt) sets the user names the tab offers, as described in [Document Protection](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/protection/llms-full.txt). - **Reporting tab.** The lists of field and table names on this tab come from data that your code loads with [loadJsonData](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/loadjsondata-method/llms-full.txt); see [Fields](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/fields/#merge-fields-in-templates). - **File menu.** The ribbon of the ASP.NET Core Document Editor has no File menu. [Custom Tabs](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/custom-tabs/llms-full.txt) shows how to add a tab of your own for such functions. - **Accessibility.** Since version 32.0, the HTML elements of the ribbon have ARIA attributes and roles, and in some cases `alt` and `title` attributes, so that screen readers can read the ribbon. ### Next Steps - [Custom Tabs](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/custom-tabs/llms-full.txt): add tabs, groups and buttons of your own. - [Context Menus](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/context-menus/llms-full.txt): change the menus that open on a right-click. - [Localization](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/localization/llms-full.txt): set the language of the ribbon. --- ## Nearby - **Previous:** [Ribbon and UI](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/llms-full.txt) - **Next:** [Context Menus](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/ribbon-ui/context-menus/llms-full.txt)