kendo ui Редактируемое поле ввода цвета на сетке
Как вы можете видеть из кода ниже, у меня есть сетка с редактируемыми ячейками. В колонке с именем "szin" я устал использовать палитру цветов кендо, и она работает просто отлично. Моя проблема в том, что цвета отображаются только при попытке изменить одну из ячеек. Могу ли я сделать так, чтобы он постоянно отображался? Мне все равно, если bg-цвет ячейки изменить или раскрывающийся список видны все время или с помощью любых других методов.
Вот мой код:
<!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>