Kendo Grid Custom Editor...

[Robin]

I have a table with just a couple of properties.  One in a simple string, the other is the hex value for a color.
I found a javascript color picker library (http://jscolor.com/ )
that seems to work great, but I am having issues trying to get it to work as a custom editor inside a Kendo Grid.
I have put up a fiddle with the same problem at http://jsfiddle.net/giltnerj0/xZv64/ ( I placed a color picker outside the grid to show what it is supposed to do).
I would love to be able to use this jscolor library with my kendo grid.

Thanks.

[Rosen]

Hi Robin,

Although, I'm not familiar with the color picker plug-in in question, looking at the source code it seems that the picker should be initialized in order to enhance the input. Therefore, you should change the colorEditor function similar to the following:

function colorEditor(container, options) {
    $('<input type="text" class="color" />').appendTo(container);
    jscolor.init();
}

Regards,
Rosen
the Telerik team

[Robin]

Thank you so much.  That got it.

[Doogle]

The fiddle seems to be gone.
Do you have source code for this?
Please?

[Robin]

Doh, sorry about that.  I  didn't even see that one when I was doing some housecleaning on jsfiddle.
Here is the source code for that grid with the color picker editor.

$("#myGrid").kendoGrid({
                theme: "silver",
                dataSource: dataSource,
                editable: "inline",
                height: 550,
                filterable: true,
                sortable: true,
                groupable: false,
                columnMenu: true,
                pageable: true,
                toolbar: ["create"],
                columns: [{
                    field: "name",
                    title: "Name",
                    width: 200
                }, {
                    field: "color",
                    title: "Color",
                    width: 200,
                    editor: colorEditor,
                    template: "#=colorize(color)#"
                }, {
                    command: ["edit", "destroy"], title: "Actions", width: 160
                }]
            });

And the two functions for the editor and template

function colorEditor(container, options) {
            $('<input type="text" class="color {pickerClosable:true}" data-bind="value: ' + options.field + '" value="' + options.model.color + '" />').appendTo(container);
            jscolor.init();
        }

        function colorize(value) {
            return "<table><tr><td>" + value + "</td><td style='background: #" + value + "'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table>";
        }