As you can see in the code below, i have a grid with editable cells. At the column named "szin" i tired to implement a kendo colorpicker and it works just fine. My problem is, that the colors are only displayed when you try to edit one of the cell. Can i make it permanently displayed somehow? I dont care if the bg-color of the cell change or the dropdown box visible all the time or with any other methods.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<link href="../styles/kendo.metro.min.css" rel="stylesheet">
<link href="../styles/kendo.common.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid" style="width:1024px; height:400px; margin-left:auto; margin-right:auto;"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "load.php",
update: {
url: "load.php",
type: "POST"
}/*,
destroy: {
url: "load.php",
type: "DELETE"
}*/
},
error: function(e) {
alert(e.responseText);
}
},
columns: [ { field: "termekid", width:"70px" },
/*
...
*/
{ field: "szin", width:"74px",
editor: szinColorPickerEditor
}
/*
...
*/
],
sortable: true,
editable: true,
navigatable: true,
toolbar: ["save", "cancel"/*, "create"*/],
pageable: {
previousNext: true,
numeric: true,
buttonCount: 5,
input: false,
pageSizes: [0, 10, 20, 50, 100],
refresh: true,
info: true
}
});
function szinColorPickerEditor(container, options) {
$("<input type='color' data-bind='value:" + options.field + "' />")
.appendTo(container)
.kendoColorPicker({
buttons: true
});
}
});
</script>
</body>
</html>
You can use a column template for this, for example you could change your field definition to:
{
field: "szin",
width: "74px",
editor: szinColorPickerEditor,
template: "<span style='display: inline-block; width: 100%; height: 100%; background-color: #= szin #'></span>"
}
See demo
来源：https://stackoverflow.com/questions/20286273/kendo-ui-editable-color-input-field-on-grid