Modify the RibbonBar

API Reference

Web.TextControl comes with a ready-to-use RibbonBar interface that can be completely customized by manipulating the HTML DOM. The following samples show how to remove ribbon tabs, groups and buttons.

This demo uses the MVC version of TXTextControl.Web included in TX Text Control .NET Server for ASP.NET. The functionality is compatible across all supported platforms.

Version 33.0

Hide Reporting tab

Hide Permissions tab

Hide Proofing tab

Hide Illustrations group

Hide Margins button

Hide complete RibbonBar

Sample Source Code

	@Html.TXTextControl().TextControl(settings =>
	{
	settings.Dock = DockStyle.Fill;
	}).Render()

	<div class="form-group mt-3">
	<div class="form-check">
	<label class="form-check-label">
	<input autocomplete="off"
	onchange="toggleRibbonElement('tabReports', 'tabDefault', false)"
	class="form-check-input"
	type="checkbox"> Hide <strong>Reporting</strong> tab
	</label>
	</div>
	<div class="form-check">
	<label class="form-check-label">
	<input autocomplete="off"
	onchange="toggleRibbonElement('tabPermissions', 'tabDefault', false)"
	class="form-check-input"
	type="checkbox"> Hide <strong>Permissions</strong> tab
	</label>
	</div>
	<div class="form-check">
	<label class="form-check-label">
	<input autocomplete="off"
	onchange="toggleRibbonElement('tabProofing', 'tabDefault', false)"
	class="form-check-input"
	type="checkbox"> Hide <strong>Proofing</strong> tab
	</label>
	</div>
	</div>
	<div class="form-group mt-3">
	<div class="form-check">
	<label class="form-check-label">
	<input autocomplete="off"
	onchange="toggleRibbonElement('ribbonGroupIllustrations', 'tabInsert', true)"
	class="form-check-input"
	type="checkbox"> Hide <strong>Illustrations</strong> group
	</label>
	</div>
	</div>
	<div class="form-group mt-3">
	<div class="form-check">
	<label class="form-check-label">
	<input autocomplete="off"
	onchange="toggleRibbonElement('btnPageSetup', 'tabPageLayout', true)"
	class="form-check-input"
	type="checkbox"> Hide <strong>Margins</strong> button
	</label>
	</div>
	</div>
	<div class="form-group mt-3">
	<div class="form-check">
	<label class="form-check-label">
	<input autocomplete="off"
	onchange="toggleRibbonElement('ribbonbar', null, false)"
	class="form-check-input"
	type="checkbox"> Hide complete RibbonBar
	</label>
	</div>
	</div>

	<button onclick="minimizeRibbonBar(true)" class="btn mt-3 btn-success">Minimize RibbonBar</button>
	<button onclick="minimizeRibbonBar(false)" class="btn mt-3 ml-2 btn-success">Expand RibbonBar</button>

view raw demoexplorer1.cshtml hosted with ❤ by GitHub

No code required.

	function toggleRibbonElement(group, tab, highlight)
	{
	if(tab != null)
	TXTextControl.ribbon.selectedTab = tab;

	if (highlight == true)
	highlightRibbonElement(group);

	setTimeout(function () {
	var ribbonGroup = $("#" + group);

	if (ribbonGroup.css("display") == "none")
	ribbonGroup.css("display", "block");
	else
	ribbonGroup.css("display", "none");
	}, 500)
	}

	function minimizeRibbonBar(state) {
	if (state == true)
	TXTextControl.ribbon.minimize();
	else
	TXTextControl.ribbon.expand();
	}

	function highlightRibbonElement(id) {
	var element = $("#" + id);

	element.css("transition", "background-color 1s");
	element.css("background-color", "red");

	setTimeout(function () {
	element.css("background-color", "transparent");
	}, 5000);
	}

view raw load.js hosted with ❤ by GitHub

No code required.

Next Sample