Can I use the HEX ColorPicker in the Editor for text/background color?

1 Answer 164 Views
ColorPicker Editor
Zachary
Top achievements
Rank 1
Zachary asked on 23 Mar 2023, 09:17 PM | edited on 24 Mar 2023, 03:20 PM
The editor I am replacing with the Kendo MVC editorFor had a text area I could paste a hex color into. There are other colorpickers in Kendo that can do this, like this one. Am I able to somehow use this with the editorFor ForeColor an BackColor? Ideally in the cshtml, or in the jquery if there is a path for that to work.

1 Answer, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 28 Mar 2023, 12:23 PM

Hello Zachary,

You can use custom tools, to add ColorPickers that will function as Fore and BackColor tools:

@(Html.Kendo().Editor()
    .Name("editor")
    .Value("Some content here")
    .Tools(tools => tools
        .Clear()
        .CustomTemplate(x => x
            .Template("<label for='foreColor' style='vertical-align:middle;'>Fore Color:</label>" +
                Html.Kendo().ColorPicker()
                    .Name("foreColor")
                    .ToolIcon("k-i-foreground-color")
                    .Format(ColorPickerFormat.Hex)
                    .Events(ev => ev.Change("function(e){change(e,'foreColor')}"))
                    .Formats(new string[] { "rgb", "hex" })
                    .ToClientTemplate()
                    .ToHtmlString()
            )
        )
        .CustomTemplate(x => x
            .Template("<label for='backColor' style='vertical-align:middle;'>Background Color:</label>" +
                Html.Kendo().ColorPicker()
                    .Name("backColor")
                    .ToolIcon("k-i-paint")
                    .Format(ColorPickerFormat.Hex)
                    .Events(ev => ev.Change("function(e){change(e,'backColor')}"))
                    .Formats(new string[] { "rgb", "hex" })
                    .ToClientTemplate()
                    .ToHtmlString()
            )
        )
    )
)

<script>
    function change(e, commandName) {
        var editor = $("#editor").data("kendoEditor");
        editor.exec(commandName, { value: e.sender.value() });
    }
</script>

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Zachary
Top achievements
Rank 1
commented on 28 Mar 2023, 04:07 PM

Thank you. I have this implemented, however selecting a color from the colorpicker doesn't change the color of the selected text or newly typed text. Stepping through the javascript, I can see that the editor is being found and also that the exec is not throwing an error.

The only difference between your snippet and my code is that the javascript file is included in a bundle at the top of the razor file, but I'm not sure if that's an issue since the call to change() is being executed.
Zachary
Top achievements
Rank 1
commented on 29 Mar 2023, 06:02 PM

Revisiting your answer, I missed that the exec needed to have the params wrapped with {value: .. }. Adding that solved this for me.
Tags
ColorPicker Editor
Asked by
Zachary
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or