网格中的Kendo DropDownList在选择后显示值

Question

我试图在我的网格中使用下拉列表。这是我的网格定义：

$("#grid").kendoGrid({ 
    editable: true, 
    dataSource: { 
     data: data, 
     schema: { 
      model: { 
       fields: { 
        Name: { 
         type: "string", 
         editable: false 
        }, 
        FruitName: { 
         type: "string" 
        }, 
        FruitID: { 
         type: "number" 
        } 
       } 
      } 
     } 
    }, 
    columns: [{ 
     field: "Name", 
     title: "Name", 
     width: 150 
    }, { 
     field: "Fruit", 
     title: "Fruit", 
     width: 115, 
     editor: renderDropDown, 
     template: "#=FruitName#" 
    }] 
}); 

这是我的编辑功能：

function renderDropDown(container, options) { 
    var dataSource = [ 
    //{ name: "", id: null }, 
    { 
     FruitName: "Apple", 
     FruitID: 1 
    }, { 
     FruitName: "Orange", 
     FruitID: 2 
    }, { 
     FruitName: "Peaches", 
     FruitID: 3 
    }, { 
     FruitName: "Pears", 
     FruitID: 4 
    }]; 

    $('<input required name="' + options.field + '"/>') 
     .appendTo(container) 
     .kendoDropDownList({ 
     dataTextField: "FruitName", 
     dataValueField: "FruitID", 
     dataSource: dataSource 
    }); 
} 

这里是为了说明在JSBin演示：http://jsbin.com/malev/3/edit

煤矿是一个2部分的问题。

1. 为什么这个样本中的下拉列表在编辑之前默认没有列中的值？

2. 为什么选择后文本切换到值？

Answer 1

在你列定义请看：

{ 
    field: "Fruit", 
    title: "Fruit", 
    width: 115, 
    editor: renderDropDown, 
    template: "#=FruitName#" 
} 

你的字段名称是Fruit。在编辑器中，您绑定到此字段名称，但您的模式模型和数据只有FruitID属性。这就解释了为什么下拉菜单没有正确显示初始值。

另一个问题是，如果您需要从编辑器更新模型的两个属性，则需要手动执行该操作，例如，通过设置你的编辑器这样的：

$('<input required name="' + options.field + '"/>') 
    .appendTo(container) 
    .kendoDropDownList({ 
    dataTextField: "FruitName", 
    dataValueField: "FruitID", 
    dataSource: dataSource, 
    change: function (e) { 
     var dataItem = e.sender.dataItem(); 
     options.model.set("FruitName", dataItem.FruitName); 
    } 
}); 

另一种方法是有一个查询功能，让你给定值的显示文本，如：

var fruitNames = ["", "Apple", "Orange", "Peaches", "Pears"]; 
function getFruitName(value) { 
    return fruitNames[value]; 
} 

然后，你可以在使用你的模板：

template: "#= getFruitName(FruitID) #" 

并且你不需要在你的编辑器中的名称和更改处理程序的单独列。

（updated demo）