Hi all!
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:
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>2 Answers, 1 is accepted
0
Hi Bence,
There are couple of approaches to achieve this. For example you could use the columns.attributes object in order to specifies CSS styles for the cell and set the background color to it's value. Here is a JS Bin example, which demonstrates this.
Another approach would be to specify a client template and again use the cell value as a background color for some element.
I hope this information helps.
Regards,
Dimiter Madjarov
Telerik
There are couple of approaches to achieve this. For example you could use the columns.attributes object in order to specifies CSS styles for the cell and set the background color to it's value. Here is a JS Bin example, which demonstrates this.
Another approach would be to specify a client template and again use the cell value as a background color for some element.
I hope this information helps.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bence
Top achievements
Rank 1
Rank 1
answered on 29 Nov 2013, 06:53 PM
Thanks! :)