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

[Zachary]

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.

[Ivan Danchev]

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

[Zachary]

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]

Revisiting your answer, I missed that the exec needed to have the params wrapped with {value: .. }. Adding that solved this for me.