Kendo Grid: how add a KendoColorPicker in a column

Question

in angularjs i have kendo ui grid and i must have a some column and one column must be a colorPicker: so i have type the following code:

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

The problem is that when i add a new row, i see the following error in javascript console:

Uncaught Error: Cannot parse color:

and i cannot create a new row. How can i resolve this problem?

Answer 1

You should specify the default value of the color field otherwise the colorpicker will try to parse "undefined" as a valid color.

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