RadEditor with ASPDNSF - saving custom background/border color

3 posts, 0 answers
  1. Ashley
    Ashley avatar
    2 posts
    Member since:
    Aug 2013

    Posted 07 Aug 2013 Link to this post

    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?
  2.
  3. Ashley
    Ashley avatar
    2 posts
    Member since:
    Aug 2013

    Posted 07 Aug 2013 Link to this post

    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.
  5. Ianko
    Admin
    Ianko avatar
    1829 posts

    Posted 12 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top