kendo ui 网格上的可编辑颜色输入字段答案

【问题标题】：kendo ui Editable color input field on gridkendo ui 网格上的可编辑颜色输入字段
【发布时间】：2013-11-29 12:50:42
【问题描述】：

正如您在下面的代码中看到的，我有一个带有可编辑单元格的网格。在名为“szin”的专栏中，我厌倦了实施剑道颜色选择器，它工作得很好。我的问题是，仅当您尝试编辑其中一个单元格时才会显示颜色。我可以让它以某种方式永久显示吗？我不在乎单元格的背景颜色是否改变或下拉框是否一直可见或使用任何其他方法。

这是我的代码：

<!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>

【问题讨论】：

标签： jquery kendo-ui kendo-grid

【解决方案1】：

您可以为此使用列模板，例如，您可以将字段定义更改为：

{
    field: "szin",
    width: "74px",
    editor: szinColorPickerEditor,
    template: "<span style='display: inline-block; width: 100%; height: 100%; background-color: #= szin #'></span>"
}

见demo

【讨论】：