How to: Use the client PerformDataCallback method and the server CustomDataCallback event

Jan 25, 2022
4 minutes to read

This example demonstrates how to use the CustomDataCallback event to save ASPxHtmlEditor content on the server side. This technique prevents the control from sending a postback to the server. The client-side PerformDataCallback(parameter, onCallback) method sends a callback that raises the server-side CustomDataCallback event.
In this example, the Session object stores the content that you can restore back to the editor, if required.

The CustomDataCallback event allows you to process the editor's data obtained from the client on the server side, and to return the processed results to the client side, without rerendering the ASPxHtmlEditor control.

View Example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HtmlEditorSaveHtml.Default" %>
<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxLoadingPanel" TagPrefix="dxlp" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<%@ Register Assembly="DevExpress.Web.ASPxSpellChecker.v9.2" Namespace="DevExpress.Web.ASPxSpellChecker" TagPrefix="dxwsc" %>
<%@ Register Assembly="DevExpress.Web.ASPxHtmlEditor.v9.2" Namespace="DevExpress.Web.ASPxHtmlEditor" TagPrefix="dxhe" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
        function OnCustomCommand(htmlEditor, e){
    if(htmlEditor.InCallback())
        return;
    switch(e.commandName){
         case "load": 
            htmlEditor.PerformDataCallback(e.commandName, LoadContent);
            SetStatusText("Loading&hellip;");
            break;
         case "save": 
            htmlEditor.PerformDataCallback(e.commandName, SaveCompleted);
            SetStatusText("Saving&hellip;");
            break;
    }

}
function SetStatusText(text){
    lbStatusText.SetText(text);
}
function LoadContent(htmlEditor, result){
    if(result != null)
        htmlEditor.SetHtml(result);
     SetStatusText("");
}
function SaveCompleted(){
     SetStatusText("");
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div style="height: 25px;">
                <dxe:ASPxLabel ID="ASPxLabel1" runat="server" ClientInstanceName="lbStatusText" BackColor="Info" />
            </div>
            <dxhe:ASPxHtmlEditor ID="ASPxHtmlEditor1" ClientInstanceName="htmlEditor" runat="server"
                OnCustomDataCallback="ASPxHtmlEditor1_CustomDataCallback">
                <SettingsImageUpload>
                    <ValidationSettings AllowedContentTypes="image/jpeg, image/pjpeg, image/gif, image/png, image/x-png">
                    </ValidationSettings>
                </SettingsImageUpload>
                <Toolbars>
                    <dxhe:StandardToolbar1>
                        <Items>
                            <dxhe:ToolbarCutButton>
                            </dxhe:ToolbarCutButton>
                            <dxhe:ToolbarCopyButton>
                            </dxhe:ToolbarCopyButton>
                            <dxhe:ToolbarPasteButton>
                            </dxhe:ToolbarPasteButton>
                            <dxhe:ToolbarPasteFromWordButton>
                            </dxhe:ToolbarPasteFromWordButton>
                            <dxhe:ToolbarUndoButton BeginGroup="True">
                            </dxhe:ToolbarUndoButton>
                            <dxhe:ToolbarRedoButton>
                            </dxhe:ToolbarRedoButton>
                            <dxhe:ToolbarRemoveFormatButton BeginGroup="True">
                            </dxhe:ToolbarRemoveFormatButton>
                            <dxhe:ToolbarSuperscriptButton BeginGroup="True">
                            </dxhe:ToolbarSuperscriptButton>
                            <dxhe:ToolbarSubscriptButton>
                            </dxhe:ToolbarSubscriptButton>
                            <dxhe:ToolbarInsertOrderedListButton BeginGroup="True">
                            </dxhe:ToolbarInsertOrderedListButton>
                            <dxhe:ToolbarInsertUnorderedListButton>
                            </dxhe:ToolbarInsertUnorderedListButton>
                            <dxhe:ToolbarIndentButton BeginGroup="True">
                            </dxhe:ToolbarIndentButton>
                            <dxhe:ToolbarOutdentButton>
                            </dxhe:ToolbarOutdentButton>
                            <dxhe:ToolbarInsertLinkDialogButton BeginGroup="True">
                            </dxhe:ToolbarInsertLinkDialogButton>
                            <dxhe:ToolbarUnlinkButton>
                            </dxhe:ToolbarUnlinkButton>
                            <dxhe:ToolbarInsertImageDialogButton>
                            </dxhe:ToolbarInsertImageDialogButton>
                        </Items>
                    </dxhe:StandardToolbar1>
                    <dxhe:StandardToolbar2>
                        <Items>
                            <dxhe:ToolbarBoldButton BeginGroup="True">
                            </dxhe:ToolbarBoldButton>
                            <dxhe:ToolbarItalicButton>
                            </dxhe:ToolbarItalicButton>
                            <dxhe:ToolbarUnderlineButton>
                            </dxhe:ToolbarUnderlineButton>
                            <dxhe:ToolbarStrikethroughButton>
                            </dxhe:ToolbarStrikethroughButton>
                            <dxhe:ToolbarJustifyLeftButton BeginGroup="True">
                            </dxhe:ToolbarJustifyLeftButton>
                            <dxhe:ToolbarJustifyCenterButton>
                            </dxhe:ToolbarJustifyCenterButton>
                            <dxhe:ToolbarJustifyRightButton>
                            </dxhe:ToolbarJustifyRightButton>
                            <dxhe:ToolbarJustifyFullButton>
                            </dxhe:ToolbarJustifyFullButton>
                            <dxhe:ToolbarBackColorButton BeginGroup="True">
                            </dxhe:ToolbarBackColorButton>
                            <dxhe:ToolbarFontColorButton>
                            </dxhe:ToolbarFontColorButton>
                        </Items>
                    </dxhe:StandardToolbar2>
                    <dxhe:CustomToolbar>
                        <Items>
                            <dxhe:CustomToolbarButton CommandName="load" Text="Load" ToolTip="Loading saved text" BeginGroup="true">
                            </dxhe:CustomToolbarButton>
                            <dxhe:CustomToolbarButton CommandName="save" Text="Save" ToolTip="Save text" >
                            </dxhe:CustomToolbarButton>
                        </Items>
                    </dxhe:CustomToolbar>
                </Toolbars>
                <ClientSideEvents CustomCommand="OnCustomCommand"></ClientSideEvents>
            </dxhe:ASPxHtmlEditor>
            <br />
            <br />
        </div>
    </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace HtmlEditorSaveHtml {
    public partial class Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void ASPxHtmlEditor1_CustomDataCallback(object sender, DevExpress.Web.ASPxClasses.CustomDataCallbackEventArgs e) {
            switch(e.Parameter) {
                case "save":
                    SetHtml();
                    break;
                case "load":
                    e.Result = GetHtml();
                    break;
            }
        }

        private string GetHtml() {
            object html = Session["html"];
            if(html == null)
                return "No content to load.";
            else
                return html.ToString();
        }

        private void SetHtml() {
            Session["html"] = ASPxHtmlEditor1.Html;
        }
    }
}

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="HtmlEditorSaveHtml.Default" %>
<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxLoadingPanel" TagPrefix="dxlp" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<%@ Register Assembly="DevExpress.Web.ASPxSpellChecker.v9.2" Namespace="DevExpress.Web.ASPxSpellChecker" TagPrefix="dxwsc" %>
<%@ Register Assembly="DevExpress.Web.ASPxHtmlEditor.v9.2" Namespace="DevExpress.Web.ASPxHtmlEditor" TagPrefix="dxhe" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
        function OnCustomCommand(htmlEditor, e){
    if(htmlEditor.InCallback())
        return;
    switch(e.commandName){
         case "load": 
            htmlEditor.PerformDataCallback(e.commandName, LoadContent);
            SetStatusText("Loading&hellip;");
            break;
         case "save": 
            htmlEditor.PerformDataCallback(e.commandName, SaveCompleted);
            SetStatusText("Saving&hellip;");
            break;
    }

}
function SetStatusText(text){
    lbStatusText.SetText(text);
}
function LoadContent(htmlEditor, result){
    if(result != null)
        htmlEditor.SetHtml(result);
     SetStatusText("");
}
function SaveCompleted(){
     SetStatusText("");
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div style="height: 25px;">
                <dxe:ASPxLabel ID="ASPxLabel1" runat="server" ClientInstanceName="lbStatusText" BackColor="Info" />
            </div>
            <dxhe:ASPxHtmlEditor ID="ASPxHtmlEditor1" ClientInstanceName="htmlEditor" runat="server"
                OnCustomDataCallback="ASPxHtmlEditor1_CustomDataCallback">
                <SettingsImageUpload>
                    <ValidationSettings AllowedContentTypes="image/jpeg, image/pjpeg, image/gif, image/png, image/x-png">
                    </ValidationSettings>
                </SettingsImageUpload>
                <Toolbars>
                    <dxhe:StandardToolbar1>
                        <Items>
                            <dxhe:ToolbarCutButton>
                            </dxhe:ToolbarCutButton>
                            <dxhe:ToolbarCopyButton>
                            </dxhe:ToolbarCopyButton>
                            <dxhe:ToolbarPasteButton>
                            </dxhe:ToolbarPasteButton>
                            <dxhe:ToolbarPasteFromWordButton>
                            </dxhe:ToolbarPasteFromWordButton>
                            <dxhe:ToolbarUndoButton BeginGroup="True">
                            </dxhe:ToolbarUndoButton>
                            <dxhe:ToolbarRedoButton>
                            </dxhe:ToolbarRedoButton>
                            <dxhe:ToolbarRemoveFormatButton BeginGroup="True">
                            </dxhe:ToolbarRemoveFormatButton>
                            <dxhe:ToolbarSuperscriptButton BeginGroup="True">
                            </dxhe:ToolbarSuperscriptButton>
                            <dxhe:ToolbarSubscriptButton>
                            </dxhe:ToolbarSubscriptButton>
                            <dxhe:ToolbarInsertOrderedListButton BeginGroup="True">
                            </dxhe:ToolbarInsertOrderedListButton>
                            <dxhe:ToolbarInsertUnorderedListButton>
                            </dxhe:ToolbarInsertUnorderedListButton>
                            <dxhe:ToolbarIndentButton BeginGroup="True">
                            </dxhe:ToolbarIndentButton>
                            <dxhe:ToolbarOutdentButton>
                            </dxhe:ToolbarOutdentButton>
                            <dxhe:ToolbarInsertLinkDialogButton BeginGroup="True">
                            </dxhe:ToolbarInsertLinkDialogButton>
                            <dxhe:ToolbarUnlinkButton>
                            </dxhe:ToolbarUnlinkButton>
                            <dxhe:ToolbarInsertImageDialogButton>
                            </dxhe:ToolbarInsertImageDialogButton>
                        </Items>
                    </dxhe:StandardToolbar1>
                    <dxhe:StandardToolbar2>
                        <Items>
                            <dxhe:ToolbarBoldButton BeginGroup="True">
                            </dxhe:ToolbarBoldButton>
                            <dxhe:ToolbarItalicButton>
                            </dxhe:ToolbarItalicButton>
                            <dxhe:ToolbarUnderlineButton>
                            </dxhe:ToolbarUnderlineButton>
                            <dxhe:ToolbarStrikethroughButton>
                            </dxhe:ToolbarStrikethroughButton>
                            <dxhe:ToolbarJustifyLeftButton BeginGroup="True">
                            </dxhe:ToolbarJustifyLeftButton>
                            <dxhe:ToolbarJustifyCenterButton>
                            </dxhe:ToolbarJustifyCenterButton>
                            <dxhe:ToolbarJustifyRightButton>
                            </dxhe:ToolbarJustifyRightButton>
                            <dxhe:ToolbarJustifyFullButton>
                            </dxhe:ToolbarJustifyFullButton>
                            <dxhe:ToolbarBackColorButton BeginGroup="True">
                            </dxhe:ToolbarBackColorButton>
                            <dxhe:ToolbarFontColorButton>
                            </dxhe:ToolbarFontColorButton>
                        </Items>
                    </dxhe:StandardToolbar2>
                    <dxhe:CustomToolbar>
                        <Items>
                            <dxhe:CustomToolbarButton CommandName="load" Text="Load" ToolTip="Loading saved text" BeginGroup="true">
                            </dxhe:CustomToolbarButton>
                            <dxhe:CustomToolbarButton CommandName="save" Text="Save" ToolTip="Save text" >
                            </dxhe:CustomToolbarButton>
                        </Items>
                    </dxhe:CustomToolbar>
                </Toolbars>
                <ClientSideEvents CustomCommand="OnCustomCommand"></ClientSideEvents>
            </dxhe:ASPxHtmlEditor>
            <br />
            <br />
        </div>
    </form>
</body>
</html>

Imports Microsoft.VisualBasic
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls

Namespace HtmlEditorSaveHtml
    Partial Public Class [Default]
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

        End Sub

        Protected Sub ASPxHtmlEditor1_CustomDataCallback(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxClasses.CustomDataCallbackEventArgs)
            Select Case e.Parameter
                Case "save"
                    SetHtml()
                Case "load"
                    e.Result = GetHtml()
            End Select
        End Sub

        Private Function GetHtml() As String
            Dim html As Object = Session("html")
            If html Is Nothing Then
                Return "No content to load."
            Else
                Return html.ToString()
            End If
        End Function

        Private Sub SetHtml()
            Session("html") = ASPxHtmlEditor1.Html
        End Sub
    End Class
End Namespace

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode