javascript - Kendo Grid：如何添加颜色选择器

Question

我有一个内联编辑的剑道网格。现在，在一个专栏中，我想添加一个剑道颜色选择器。当行不处于编辑模式时，如何添加它并显示选定的颜色？

任何人都可以给我一个剑道网格内颜色选择器的例子吗？

谢谢

Answer 1

正如@dfsq 所说，您必须使用单元格模板来显示颜色。此外，您需要columns.editor为ColorPicker.

模板的代码是一个函数，它生成div背景颜色是colorGrid 的值：

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

对于editor你应该定义一个函数为：

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
    });
}

你可以在这里看到一个例子：http: //jsfiddle.net/OnaBai/6XJV6/