Example - Customize Toolbars

Web.TextControl provides client-side methods to show and hide the various toolbars including the vertical and horizontal ruler bars, the status bar and the ribbon bar.

This example is part of the Sample Explorer project which includes all samples in one. The sources for this sample project can be found here:

Language Project Location
C# %USERPROFILE%\Documents\TX Text Control 25.0.NET Server for ASP.NET\Samples\ASP.NET\CSharp\Sample Explorer\
VB.NET %USERPROFILE%\Documents\TX Text Control 25.0.NET Server for ASP.NET\Samples\ASP.NET\VB.NET\Sample Explorer\

You will find the source code and the ASPX page of this sample in the Solution structure tree under: HTML5\toolbars.aspx

Example description

To provide client-side, Javascript applications, those methods are available as Javascript methods and can be adjusted without any server requests. Additionally, the ribbon bar can be collapsed and expanded programmatically.

In order show or hide the different toolbars, Web.TextControl provides methods that can be called at run-time using client-side Javascript. In order to hide all toobars on creating the control, the event ribbonTabsLoaded can be used.

The demo consists of a Web.TextControl and 4 check boxes that can be used to show and hide the toolbars. On creating the Web.TextControl, all toolbars are hidden by default.

[JavaScript]
<script type="text/javascript">

    // client-side Javascript events

    TX.addEventListener('ribbonTabsLoaded', function (e) {
        TX.showRibbonBar(false);
        TX.showStatusBar(false);
        TX.showVerticalRuler(false);
        TX.showHorizontalRuler(false);

        document.getElementById('verticalRuler').checked = false;
        document.getElementById('horizontalRuler').checked = false;
        document.getElementById('statusBar').checked = false;
        document.getElementById('ribbonBar').checked = false;
    });

    function toggleVerticalRuler() {
        TX.showVerticalRuler(document.getElementById('verticalRuler').checked);
    }

    function toggleHorizontalRuler() {
        TX.showHorizontalRuler(document.getElementById('horizontalRuler').checked);
    }

    function toggleStatusBar() {
        TX.showStatusBar(document.getElementById('statusBar').checked);
    }

    function toggleRibbonBar() {
        TX.showRibbonBar(document.getElementById('ribbonBar').checked);
    }

</script>

<< Previous Next >>