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

Dec 17, 2020
4 minutes to read

This example demonstrates how the CustomDataCallback event can be used to save the ASPxHtmlEditor's content data on the server side without generating a postback and refreshing the entire page. The server CustomDataCallback event is initiated by a callback sent by the editor's client PerformDataCallback method. Saved data is maintained within the Session object and can be restored back to the editor, if required.

So, the CustomDataCallback event allows you to process the editor's data obtained from the client on the server side, and to return the required processing result back 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 "There isn`t saved document";
            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 "There isn`t saved document"
            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