Kendo Grid：如何在列中添加KendoColorPicker

Question

在angularjs中，我有kendo ui网格，我必须有一些列，并且一列必须是colorPicker：所以我输入以下代码：

$scope.thingsOptions = {
    sortable: "true",
    scrollable: "true",
    toolbar: [{ name: "create", text: "Aggiungi Profilo Tessera" }],
    columns: [
                { field: "Name", title: "Name", width: "50px" },
                { field: "Description", title: "Description", width: "150px" },
                {
                    field: "Color", title: "Color", width: "50px", editor: colorDropDownEditor, template: function (dataItem) {
                        return "<div style='background-color: " + dataItem.Color+ ";'>&nbsp;</div>";
                    }
                },

                { command: [{ name: "edit", text: "Modifica" }], title: "", width: "100px" }
    ],
    editable: "inline"
};

function colorDropDownEditor(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 AutoComplete
    input.kendoColorPicker({
        palette: 'basic',
        value: "#000000",
        buttons: false
    });
}

问题是，当我添加新行时，我在JavaScript控制台中看到以下错误：

Uncaught Error: Cannot parse color:

而且我无法创建新行。 我该如何解决这个问题？

Answer 1

您应该指定颜色字段的默认值，否则颜色选择器将尝试将“未定义”解析为有效颜色。

$scope.thingsOptions = {
    dataSource: {
       schema: {
          model: {
            fields: {
              Color: { defaultValue: "#000" }
            }
          }
       }
    },
    /* snip */
}