Since version X12 (22.0), TextControl.Web provides a fully programmable interface with ASP.NET code-behind, server-side classes and a client-side Javascript interface.

Based on both interfaces, we implemented a sample project (scroll to the bottom for the download) that shows the Block Navigation Panel, that has been introduced in the Windows version of TX Text Control Words - the template designer for TX Text Control Reporting.

This demo shows many important steps to customize the editor:

• Adding a button to the Ribbon bar
• Attaching code-behind code to that button
• Selecting ranges of text in TextControl.Web
• Use a ServerTextControl instance to get all merge blocks and fields
• Use jQuery to add and remove style classes to and from ribbon elements

Download the sample project and open it in Visual Studio 2012 or better. In the following article, the most important parts are explained.

The navigation panel itself is a simple DIV element with an AJAX UpdatePanel, a TreeView and a hidden Button that is used to start the PostBack action on the UpdatePanel.

<div id="navigationBar">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

            <asp:Button ID="hiddenBtnUpdateNavigationPanel"
                runat="server"
                Text="Button"
                OnClick="hiddenBtnUpdateNavigationPanel_Click"
                style="display: none;"/>

            <h3>Block Navigation</h3>
            <img class="close"
                onclick="togglePanel();"
                src="images/cross.png" />

            <asp:TreeView style="clear: both;"
                ID="TreeView1"
                runat="server"
                AutoGenerateDataBindings="False"
                ShowLines="True"
                OnSelectedNodeChanged="TreeView1_SelectedNodeChanged" />

        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger
                ControlID="hiddenBtnUpdateNavigationPanel"
                EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
</div>

Due to the fact that the hidden button's Click event is triggered using Javascript, the event must be registered in the Render method:

protected override void Render(HtmlTextWriter writer)
{
    // register the hidden button event
    Page.ClientScript.RegisterForEventValidation(
        hiddenBtnUpdateNavigationPanel.UniqueID);
    base.Render(writer);
}

The following Javascript adds a new button to the existing Ribbon bar and attaches a Click event to the button. In this event, a PostBack is triggered on the hidden button:

function addButton() {
    sNavigationPanelBtn = \'<div class="ribbon-group" id="newGroup"> \
    <div class="ribbon-group-content"> \
    <div id="navigationPanelButton" class="ribbon-button ribbon-button-big"> \
    <div class="ribbon-button-big-image-container"> \
    <img src="images/mailmergefieldnavigation.png" \
    class="ribbon-button-big-image" /> \
    </div> \
    <div class="ribbon-button-big-label-container"> \
    <p class="ribbon-button-label">Block<br />Navigation</p> \
    </div> \
    </div> \
    </div> \
    <div class="ribbon-group-label-container"> \
    <p class="ribbon-group-label">Navigation</p> \
    </div></div>\';

    // add the new button and ribbon group using HTML
    document.getElementById(\'ribbonGroupView\').insertAdjacentHTML(
        \'beforebegin\', sNavigationPanelBtn);

    // force a post back on the invisible button
    document.getElementById("navigationPanelButton").addEventListener(
        "click",
        function () {
            togglePanel();
            __doPostBack(\'<%= hiddenBtnUpdateNavigationPanel.ClientID %>\', \'\');
        });

The function togglePanel toggles the visibility of the navigation panel, adds the CSS to the ribbon button that indicates that it is selected and sends a command to TextControl.Web to set the EditMode to ReadOnly when the navigation panel is open.

function togglePanel() {
    $("#navigationBar").toggle();

    if ($("#navigationBar").css("display") == "none") {
        $("#navigationPanelButton").removeClass("ribbon-button-selected");
        TXTextControl.sendCommand(TXTextControl.Command.SetEditMode,
            TXTextControl.EditMode.Edit);
    }
    else {
        $("#navigationPanelButton").addClass("ribbon-button-selected");
        TXTextControl.sendCommand(TXTextControl.Command.SetEditMode,
            TXTextControl.EditMode.ReadAndSelect);
    }
}

In code-behind, a ServerTextControl instance is used to get the merge blocks and fields in order to fill the TreeView recursively with an ordered list of all (nested) blocks:

private void updateNavigationPanel()
{
    List<MergeBlock> blocks;

    try
    {
        using (TXTextControl.ServerTextControl tx =
            new TXTextControl.ServerTextControl())
        {
            tx.Create();
            byte[] data = null;

            TextControl1.SaveText(out data,
                TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);
            tx.Load(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);

            blocks = MergeBlock.GetMergeBlocks(
                MergeBlock.GetBlockMarkersOrdered(tx), tx);
        }

        TreeView1.Nodes.Clear();
        fillTreeView(blocks);
        TreeView1.ExpandAll();
    }
    catch { }
}

When a node is selected, the current document is loaded into a temporary ServerTextControl to get the merge blocks. The selected block is then selected using the Selection property of TextControl.Web:

protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
    List<MergeBlock> blocks;

    using (TXTextControl.ServerTextControl tx =
        new TXTextControl.ServerTextControl())
    {
        tx.Create();
        byte[] data = null;

        TextControl1.SaveText(out data,
            TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);
        tx.Load(data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);

        blocks = MergeBlock.GetMergeBlocksFlattened(tx);
    }

    // select the selected block in the TextControl.Web
    foreach (MergeBlock block in blocks)
    {
        if (block.Name == TreeView1.SelectedValue)
        {
            TextControl1.Selection =
                new TXTextControl.Web.Selection(block.StartMarker.Start,
                    block.Length);
            break;
        }
    }
}

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