Kendo ColorPalette 未向控制器发布值答案

【问题标题】：Kendo ColorPalette not posting value to controllerKendo ColorPalette 未向控制器发布值
【发布时间】：2016-08-04 15:10:02
【问题描述】：

我目前正在尝试让kendo ColorPalette 在我的网格上进行内联编辑。除了将所选颜色值发布到我的控制器时遇到一些困难之外，我几乎已经弄清楚了。

剑道网格：

$("#ContactTagsGrid").kendoGrid({
    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Admin/Tag/GetTagsByOrg",
                dataType: "json",
                data: {
                    orgId: OrganizationId
                }
            },
            create: {
                url: "/Admin/Tag/Create",
                dataType: "json",
                type: "POST",
                data: function () {
                    return kendo.antiForgeryTokens();
                }
            }
        },
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { type: "number", nullable: true },
                    OrgId: { type: "number" },
                    Name: { type: "string" },
                    Color: { type: "string", defaultValue: "#f20000", validation: { required: true } }
                }
            }
        },
        pageSize: 20
    }),
    pageable: true,
    sortable: true,
    filterable: {
        extra: false
    },
    scrollable: false,
    columns: [
            {
                field: "Id",
                hidden: true
            },
            {
                field: "Name"
            },
            {
                field: "Color",
                editor: colorEditor,
                template: function(dataItem) {
                    return "<div style='width: 25px; background-color: " + dataItem.Color + ";'>&nbsp;</div>";
                },
                width: "500px"
            },
            {
                command: [
                    {
                        name: "Edit",
                        template:
                            "<a href='\\#' class='small btn btn-link k-grid-edit edit-text'><span class='fa fa-pencil'></span>Edit</a>",
                        text: "",
                        className: "fa fa-pencil"
                    },
                    {
                        template:
                            "<a href='\\#' class='small btn btn-link danger delete-text k-grid-delete'><span class='fa fa-trash-o'></span>Delete</a>",
                        name: "Delete",
                        text: " Delete",
                        className: "fa fa-trash-o"
                    }
                ],
                width: "170px"
            }
        ],
        editable: {
            mode: "inline",
            destroy: false // don't use the kendo destroy method since we're using bootbox
        },
        // Custom save/cancel buttons
        edit: function (e) {
            var command = e.container.find("td:last");
            command.html("<a href='\\#' class='small btn btn-primary k-grid-update'>Save</a><a href='\\#' class='small btn btn-default k-grid-cancel' style='margin-left: 5px'>Cancel</a");
        }
});

用 Kendo ColorPalette 替换默认网格内联编辑器的 Javascript：

function colorEditor(container, options) {
    // create an input element
    var div = $("<div></div>");
    var input = $("<input />");

    input.attr("name", "Color");
    // append it to the container
    div.appendTo(container);
    input.appendTo(div);

    // initialize a Kendo UI ColorPicker
    div.kendoColorPalette({
        palette: [
            "#f20000", "#c60000", "#337a00"
        ],
        columns: 3,
        change: function () {
            var color = this.value();
            $("input[name=Color]").val(color);
        }
    });
}

当我单击Save 按钮时，发布到我的控制器的唯一值是Name 和OrgId。

如果我像在上面的代码中那样在模型的架构中设置defaultValue，那么无论我是否选择其他颜色，都会始终发布Color 的默认值。

如果我没有在架构中设置defaultValue，那么为Color 发布的值就是null。

所以基本上，我只需要帮助更新我的模型，以便在发布到控制器时它是正确的。我可以看到，每次选择新颜色时，我的输入 <input name="Color" /> 的值都会正确更新，但实际上它并没有发布它包含的值。

不确定是否需要这样做，但这是我的模型的样子：

public class TagCreateViewModel
{
    public int OrgId { get; set; }
    public string Name { get; set; }
    public string Color { get; set; }
}

【问题讨论】：

您避免使用剑道拾色器有什么原因吗？此外，网格将数据项发布到控制器，而不是行中的控件。您需要将行数据项数据绑定到输入以使其发布。
@Failwyn 我更喜欢调色板的外观而不是拾色器，所以这就是我使用它的原因。但是，是的，我做了更多的研究，偶然发现了一个有助于解决我的问题的不同答案。您是正确的，因为我需要将行数据绑定到输入。谢谢！

标签： javascript model-view-controller kendo-ui

【解决方案1】：

我最终偶然发现了关于 SO 的 this 问题，这帮助我解决了我的问题。我刚刚对其进行了调整以改用Kendo Color Palette，它现在可以完美运行。

function colorEditor(container, options) {
    $("<div type='color' data-bind='value:" + options.field + "'/>")
        .appendTo(container)
        .kendoColorPalette({
            palette: [
                "#f20000", "#c60000", "#337a00", "#54b010", "#9adc0d", "#28cb9b", "#0eac98", "#0ed6e8", "#14a7d1",
                "#bc0aef", "#560ea7", "#2713bc", "#1457d1"
            ],
            columns: 7
        });
}

【讨论】：