首页 文章

Grid中的Kendo DropDownList在选择之后才会绑定

提问于
浏览
0

我有一个可编辑的Kendo Grid,其中一个字段是下拉列表 . 我有一个需要在该列中使用的 U_UserIdU_Name 字段 . 名称显然会显示,而ID应该是用于绑定的ID . 我在下面的示例中删除了我的数据源URL,但DropDownList数据显示得很好,带有名称和ID值列表 .

我'm missing something obvious. I'可能与this question有相同的问题(下拉列表没有't bind to the user displayed in that row until I click on the dropdown to expand it), but I think my model and fields are correct so I'我不知道为什么我仍然无法让下拉列表正确绑定 .

这是我的网格和编辑器的JS:

$(document).ready(function () {
    var grid = $("#grid").kendoGrid({
        dataSource: {
            type: "json-ajax",
            transport: {
                read: {
                    url: myUrl,
                    type: "GET"
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                data: "Data",
                total: "Total",
                model: {
                    id: "OrderId",
                    fields: {
                        O_OrderNumber: {
                            editable: false
                        },      
                        O_Date: {
                            editable: false, type: "date"
                        },
                        O_InvoiceNumber: {
                            editable: false
                        },
                        O_Status: {
                            editable: false
                        },
                        O_DueDate: {
                            editable: false, type: "date"
                        },
                        U_UserId: {
                            editable: true
                        },
                        U_Name: {
                            editable: false
                        },
                        O_VendorId: {
                            editable: false
                        },
                        O_TrackingNumber: {
                            editable: false
                        }  
                    }
                }
            },
        },
        scrollable: false,
        editable: true,
        pageable: true,
        columns: [
                    {
                        field: "O_OrderNumber",
                        title: "Order #",
                        hidden: false
                    },
                    {
                        field: "O_Date",
                        title: "Pull Date",
                        hidden: false,
                        type: "date",
                        format: "{0:MM/dd/yyyy}"
                    },
                    {
                        field: "O_InvoiceNumber",
                        title: "Invoice #",
                        hidden: false
                    },
                    {
                        field: "O_Status",
                        title: "Status",
                        hidden: false
                    },
                    {
                        field: "O_DueDate",
                        title: "Due Date",
                        hidden: false,
                        type: "date", 
                        format: "{0:MM/dd/yyyy}"
                    },
                    {
                        field: "U_UserId",
                        title: "Owner",
                        hidden: false,
                        width: 130,
                        editor: ownerDropDownEditor, 
                        template: "#=U_Name#"
                    },
                    {
                        field: "O_VendorId",
                        title: "Vendor",
                        hidden: false
                    },
                    {
                        field: "O_TrackingNumber",
                        title: "Tracking #",
                        hidden: false
                    }
        ]
    }).data("kendoGrid");
});

function ownerDropDownEditor(container, options) {
    $('<input required name="' + options.field + '" />')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "Name",
            dataValueField: "UserId",
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: myOtherUrl,
                        type: "GET"
                    }
                }
            }
        });
}

编辑:出于好奇,我尝试更改我的下拉列表以使DataTextField和DataValueField都为 UserId ,并且立即进行选择,但显示的是ID(int)值而不是Name(字符串) .

1 回答

  • 1

    因此,我在上面的编辑中进一步调查,发现this Telerik post,这听起来像下拉列表实际上是绑定一个对象,而不是下拉值 . 可以添加 data-value-primitive 属性,以便按值绑定 . 我更新了我的编辑器,它现在按预期运行:

    function ownerDropDownEditor(container, options) {
        $('<input required name="' + options.field + '" data-value-primitive="true" />')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataTextField: "Name",
                dataValueField: "UserId",
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            url: myOtherUrl,
                            type: "GET"
                        }
                    }
                }
            });
    }
    

相关问题