RadEditor with ASPDNSF - saving custom background/border color

[Ashley]

When I add a new custom color it will add under all the other colors so they can be reused, however as soon as I save or update it does not save and you have to manually add them everytime. How easy would it be to save all custom colors on update/save?

As an alternative we can add the colors needed in code behind with radDescription.Colors.Add("#ffcccc"); on page load (also listing all the standard colors). This works fine until "Update" at which point clicking on the border/background icons again does not do anything in IE9 (only tested with IE9 as it is what the client uses).

Can anyone help please?

[Ashley]

I have fixed the 2nd method adding radDescription.Colors.Clear(); before referencing all the colors. It would still be good to get the custom colors to save though.

[Ianko]

Hi Ashley,

The custom colors added to the color picker can be retrieved and modified easily trough Client-side implementation. The editor's Client-side API has the methods get_colors(), which returns the colors as array of string values and set_colors(), which uses an array of strings as argument. 

Saving the data from the color picker could be achieved by manipulating a hidden input field, using database, session or local storage. You could then pass this information to the server and store it, for example in a database. Note that using the RadEditor1.Colors.Add("#ffcccc"); will clear all predefined colors and due to the Client-side nature of the color picker they cannot be retrieved on any Page event. 

This is an example how to save and retrieve information for the colors using the localStorage:

<script>
    function OnClientCommandExecuted(editor, args) {
        var commandName = args.get_commandName();

        if (commandName === "BackColor" || commandName === "ForeColor") {
            var colorArray = editor.get_colors();
            localStorage["colors"] = JSON.stringify(colorArray);
        }
    }

    function OnClientLoad(editor, args) {
        if (localStorage["colors"]) {
            editor.set_colors(JSON.parse(localStorage["colors"]));
        }
    }
</script>

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted" OnClientLoad="OnClientLoad">
</telerik:RadEditor>

<telerik:RadButton ID="btn1" runat="server" Text="Post back" AutoPostBack="true">
</telerik:RadButton>

More information about the events you could follow these two articles:
OnClientCommandExecuted
OnClientLoad

Regards,
Ianko
Telerik