This is a migrated thread and some comments may be shown as answers.

Kendo Grid Custom Editor...

4 Answers 197 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 1
Robin asked on 10 Jul 2012, 07:01 PM
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.

4 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 11 Jul 2012, 02:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robin
Top achievements
Rank 1
answered on 11 Jul 2012, 05:25 PM
Thank you so much.  That got it.
0
Doogle
Top achievements
Rank 1
answered on 05 Dec 2012, 06:01 PM
The fiddle seems to be gone.
Do you have source code for this?
Please?
0
Robin
Top achievements
Rank 1
answered on 05 Dec 2012, 06:19 PM
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>";
        }
Tags
Grid
Asked by
Robin
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Robin
Top achievements
Rank 1
Doogle
Top achievements
Rank 1
Robin
Top achievements
Rank 1
Share this question
or