Grid中的Kendo DropDownList直到选择后才绑定

Posted 2023-05-07

【中文标题】Grid中的Kendo DropDownList直到选择后才绑定

【英文标题】：Kendo DropDownList in Grid not binding until after selection

【发布时间】：2017-03-09 05:10:36

【问题描述】：

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

我已经研究了一段时间，所以我可能遗漏了一些明显的东西。我遇到了与this question 相同的问题（下拉菜单不会绑定到该行中显示的用户，直到我单击下拉菜单以展开它），但我认为我的模型和字段是正确的，所以我不是确定为什么我仍然无法正确绑定下拉列表。

这是我用于网格和编辑器的 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) 值而不是名称 (字符串）。

【参考方案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"
                    
                
            
        );

【讨论】：

仅供参考...当基础字段可以为空并且默认为空时，值原始与非值原始对我来说只是一个问题，我从来没有遇到过问题具有不可为空字段的网格中的下拉菜单。

@Goose 你能帮帮我吗Drop down option disable