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

Jun 21, 2024
2 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 re-rendering the ASPxHtmlEditor control.

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("");
}

Default.aspx (C#)

aspx

<div style="height: 25px;">
    <dxe:ASPxLabel ID="ASPxLabel1" runat="server" ClientInstanceName="lbStatusText" BackColor="Info" />
</div>
<dx:ASPxHtmlEditor ID="ASPxHtmlEditor1" ClientInstanceName="htmlEditor" runat="server"
    OnCustomDataCallback="ASPxHtmlEditor1_CustomDataCallback">
    <SettingsImageUpload>
        <ValidationSettings AllowedContentTypes="image/jpeg, image/pjpeg, image/gif, image/png, image/x-png" />
    </SettingsImageUpload>
    <Toolbars>
        <dx:StandardToolbar1> ... </dx:StandardToolbar1>
        <dx:StandardToolbar2> ... </dx:StandardToolbar2>
        <dx:CustomToolbar>
            <Items>
                <dx:CustomToolbarButton CommandName="load" Text="Load" ToolTip="Loading saved text" />
                <dx:CustomToolbarButton CommandName="save" Text="Save" ToolTip="Save text" />
            </Items>
        </dx:CustomToolbar>
    </Toolbars>
    <ClientSideEvents CustomCommand="OnCustomCommand" />
</dx:ASPxHtmlEditor>

Default.aspx.cs
Default.aspx.vb

csharp

protected void ASPxHtmlEditor1_CustomDataCallback(object sender, DevExpress.Web.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;
}

Protected Sub ASPxHtmlEditor1_CustomDataCallback(ByVal sender As Object, ByVal e As DevExpress.Web.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