Kendo Grid: how add colorpicker

Question

i have a kendo grid with editing inline. Now, in a column, i want add a kendo colorpicker. How can i add it and show the selected color when the row isn't in the editing mode?

Anyone can give me any example with the colorpicker inside a kendo grid?

Thanks

Answer 1

As @dfsq said you have to use a cell template for showing the color. In addition you need to define a columns.editor for the ColorPicker.

The code for the template is a function that generates a div which background color is the color value from the Grid:

template:  function(dataItem) {
    return "<div style='background-color: " + dataItem.Color + ";'>&nbsp;</div>";
},

For the editor you should define a function as:

editor : function (container, options) {
    // create an input element
    var input = $("<input/>");
    // set its name to the field to which the column is bound ('name' in this case)
    input.attr("name", options.field);
    // append it to the container
    input.appendTo(container);
    // initialize a Kendo UI ColorPicker
    input.kendoColorPicker({
        value: options.model.Color,
        buttons: false
    });
}

You can see an example here : http://jsfiddle.net/OnaBai/6XJV6/