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.
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
0
Hi Robin,
Regards,
Rosen
the Telerik team
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?
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 + "'> </td></tr></table>";
}
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 + "'> </td></tr></table>";
}