網格中的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）