Question

我正在尝试为网格上的列实现自定义编辑器。编辑器使用DropdownList控件。

我可以在添加/编辑时显示Dropdown，但是在进行选择并发布后发送的json包含默认值，而不是选中的值。

我的实现在下面是Razor页面的摘录。

你能帮我弄清楚我在这里做错了吗？

<div id="divGrid"></div>

<script>
    $(document).ready(function () {
        var dsGroupForm = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Action("GroupForm_Read", "Settings")',
                    dataType: "json"
                },
                update: {
                    url: '@Url.Action("GroupForm_Update", "Settings")',
                    dataType: "json"
                },
                destroy: {
                    url: '@Url.Action("GroupForm_Destroy", "Settings")',
                    dataType: "json"
                },
                create: {
                    url: '@Url.Action("GroupForm_Create", "Settings")',
                                    dataType: "json"
                }
             },
            batch: false,
            pageSize: 5,
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "GroupFormId",
                    fields: {
                        GroupFormId: { editable: false, nullable: false },
                        AdGroupId: { required: false },
                        AdGroupDisplayName: { validation: { required: true } },
                        FormKey: { validation: { required: true } },
                        Ordinal: { validation: { required: true } },
                        FormType: { validation: { required: false } },
                        FormTypeDisplay: { defaultValue: { FormTypeName: "Form1", FormTypeId: "1" } },
                        FormProjectionId: { validation: { required: false } }
                    }
                }
            }
        });

    $("#divGrid").kendoGrid({
        autobind: true,
        dataSource: dsGroupForm,
        pageable: true,
        height: 430,
        toolbar: [{ name: "create", text: "Add"}],
        columns: [
            {field: "AdGroupDisplayName", title: "Group" },
            { field: "FormKey", title: "Key" },
            { field: "Ordinal", title: "Ordinal", format: "{0:d}", width: "100px" },
            { field: "FormTypeDisplay", title: "Type", width: "150px", editor: formTypeDropDownEditor, template: "#=FormTypeDisplay.FormTypeName#" },
            { field: "FormProjectionId", title: "ProjectionId" },
            { command: [{ name: "edit", text: "Edit" }, { name: "destroy", text: "Remove" }], title: " ", width: "172px" }
        ],
        editable: "inline"
    });
});


    var formTypeData = new kendo.data.DataSource({
        data: [
            { FormTypeName: "Form1", FormTypeId: "1" },
            { FormTypeName: "Form2", FormTypeId: "2" },
            { FormTypeName: "Form3", FormTypeId: "3" }
        ]
    });

    function formTypeDropDownEditor(container, options) {
        $('<input name="FormTypeDisplay" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataTextField: "FormTypeName",
                dataValueField: "FormTypeId",
                dataSource: formTypeData
            });
    }
</script>

Answer 1

我能够使用MVC包装器并按照以下帖子使用它：

http://www.sitereq.com/post/kendo-mvc-dropdown-lists-inside-inline-kendo-mvc-grids

关键是由于已知的Kendo网格错误而添加了保存事件 - 在我看来，Kendo文档应该提到这个问题。

我尝试使用javascript实现实现相同的逻辑，但无法使其正常工作。

Answer 2

试试这个

function formTypeDropDownEditor(container, options) {
     $('<input name="' + options.field + '" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
       .appendTo(container)
       .kendoDropDownList({
                        autoBind: true,
                        dataTextField: "FormTypeName",
                        dataValueField: "FormTypeId",
                        dataSource: formTypeData
                    });
}

Kendo Grid使用内联编辑和自定义编辑器下拉控件

2 个答案: