This is a migrated thread and some comments may be shown as answers.

Editable color input field on grid

2 Answers 67 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bence
Top achievements
Rank 1
Bence asked on 29 Nov 2013, 11:29 AM
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:
<!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

Sort by
0
Dimiter Madjarov
Telerik team
answered on 29 Nov 2013, 04:00 PM
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
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
answered on 29 Nov 2013, 06:53 PM
Thanks! :)
Tags
Grid
Asked by
Bence
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Bence
Top achievements
Rank 1
Share this question
or