How to: Insert text to the end of the document on the client side

Dec 17, 2020
3 minutes to read

The ASPxRichEdit control is shipped with the client API allowing you to manipulate with document content on the client side. The client API includes document API, selection API and client commands:

The document API provides resources for receiving the current information about document structural elements.
The selection API provides resources for positioning the cursor and select elements within a document.
The client commands provide resources to modify the document content.

This example demonstrates how to insert text to the end of the document on the client side. The ASPxRichEdit includes a custom ribbon button: clicks on this item are processed using the CustomCommandExecuted client event. The event handler identifies the custom item via a command name and includes client commands and the selection API to insert text.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="DevExpress.Web.ASPxRichEdit.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxRichEdit" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function onRichEditCustomCommandExecuted(s, e) {
            if(e.commandName = "AddSignature") {
                RichEdit.selection.goToDocumentEnd();
                RichEdit.commands.insertParagraph.execute();
                RichEdit.commands.insertParagraph.execute();
                RichEdit.commands.insertText.execute(TextBox.GetText());
                RichEdit.commands.insertParagraph.execute();
                RichEdit.commands.createDateField.execute()
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxTextBox ID="TextBox" runat="server" Caption="Name" ClientInstanceName="TextBox" Text="John Smith"></dx:ASPxTextBox>
        <br />
        <dx:ASPxRichEdit ID="RichEdit" runat="server" ClientInstanceName="RichEdit">
            <ClientSideEvents CustomCommandExecuted="onRichEditCustomCommandExecuted" />
            <RibbonTabs>
                <dx:RERHomeTab>
                    <Groups>
                        <dx:RibbonGroup Text="Signature">
                            <Items>
                                <dx:RibbonButtonItem Name="AddSignature" Text="Add Signature" Size="Large" LargeImage-IconID="edit_edit_32x32"></dx:RibbonButtonItem>
                            </Items>
                        </dx:RibbonGroup>
                        <dx:RibbonGroup Text="Printing">
                            <Items>
                                <dx:RERPrintCommand Size="Large"></dx:RERPrintCommand>
                            </Items>
                        </dx:RibbonGroup>
                    </Groups>
                </dx:RERHomeTab>
            </RibbonTabs>
        </dx:ASPxRichEdit>
    </div>
    </form>
</body>
</html>

using DevExpress.Web.Office;
using DevExpress.XtraRichEdit;
using System;
using System.IO;

public partial class _Default : System.Web.UI.Page {
    string documentId = "docId";
    protected void Page_Load(object sender, EventArgs e) {
        if(!IsPostBack) {
            using(MemoryStream stream = new MemoryStream()) {
                RichEditDocumentServer server = new RichEditDocumentServer();
                server.CreateNewDocument();
                for(int i = 0; i < 50; i++)
                    server.Document.AppendText("Some text. ");
                server.SaveDocument(stream, DocumentFormat.OpenXml);
                stream.Position = 0;
                DocumentManager.CloseDocument(documentId);
                RichEdit.Open(documentId, DocumentFormat.OpenXml, () => stream);
            }
            RichEdit.Focus();
        }
    }
}

Imports DevExpress.Web.Office
Imports DevExpress.XtraRichEdit
Imports System
Imports System.IO

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Private documentId As String = "docId"
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
            Using stream As New MemoryStream()

                Dim server_Renamed As New RichEditDocumentServer()
                server_Renamed.CreateNewDocument()
                For i As Integer = 0 To 49
                    server_Renamed.Document.AppendText("Some text. ")
                Next i
                server_Renamed.SaveDocument(stream, DocumentFormat.OpenXml)
                stream.Position = 0
                DocumentManager.CloseDocument(documentId)
                RichEdit.Open(documentId, DocumentFormat.OpenXml, Function() stream)
            End Using
            RichEdit.Focus()
        End If
    End Sub
End Class

<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register assembly="DevExpress.Web.ASPxRichEdit.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxRichEdit" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function onRichEditCustomCommandExecuted(s, e) {
            if(e.commandName = "AddSignature") {
                RichEdit.selection.goToDocumentEnd();
                RichEdit.commands.insertParagraph.execute();
                RichEdit.commands.insertParagraph.execute();
                RichEdit.commands.insertText.execute(TextBox.GetText());
                RichEdit.commands.insertParagraph.execute();
                RichEdit.commands.createDateField.execute()
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxTextBox ID="TextBox" runat="server" Caption="Name" ClientInstanceName="TextBox" Text="John Smith"></dx:ASPxTextBox>
        <br />
        <dx:ASPxRichEdit ID="RichEdit" runat="server" ClientInstanceName="RichEdit">
            <ClientSideEvents CustomCommandExecuted="onRichEditCustomCommandExecuted" />
            <RibbonTabs>
                <dx:RERHomeTab>
                    <Groups>
                        <dx:RibbonGroup Text="Signature">
                            <Items>
                                <dx:RibbonButtonItem Name="AddSignature" Text="Add Signature" Size="Large" LargeImage-IconID="edit_edit_32x32"></dx:RibbonButtonItem>
                            </Items>
                        </dx:RibbonGroup>
                        <dx:RibbonGroup Text="Printing">
                            <Items>
                                <dx:RERPrintCommand Size="Large"></dx:RERPrintCommand>
                            </Items>
                        </dx:RibbonGroup>
                    </Groups>
                </dx:RERHomeTab>
            </RibbonTabs>
        </dx:ASPxRichEdit>
    </div>
    </form>
</body>
</html>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode