Skip to main content

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

  • 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…");
            break;
        case "save": 
            htmlEditor.PerformDataCallback(e.commandName, SaveCompleted);
            SetStatusText("Saving…");
            break;
    }
}
function SetStatusText(text){
    lbStatusText.SetText(text);
}
function LoadContent(htmlEditor, result){
    if(result != null)
        htmlEditor.SetHtml(result);
     SetStatusText("");
}
function SaveCompleted(){
     SetStatusText("");
}
<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>
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;
}