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>