TAKA的學習筆記

內容摘要：
因為Popup editor 中，某些欄位的需要的不是純文字，而是有固定的值，例如：列舉。這個時候控制項不能只是Textbox。

解決辦法：
 需要的前提是：schema 中的該欄位：Type ，對應到C# 的一個物件，有兩個欄位 Key 跟 Value

public class Type 
{
	public int Key { get; set; }
	public int Value { get; set; }
}

1. 在javascript 的區塊可以先定義自己的控制項，這邊以DropDownList 為例：

function typeEditor(container, options) {
	$('<input name="Type" required data-text-field="Value" data-value-field="Key" data-bind="value:' + options.field + '" />')
	.appendTo(container)
    .kendoDropDownList({
    	autoBind: true,	// 控制項是否直接載入DataSource
        dataSource: [
	        { Key: 1, Value: '內用' },
            { Key: 2, Value: '外帶' }
        ]
	)};
} 

2. 在KendoGrid 中將欄位的template 設定為該editor，以下是簡化過後的程式碼：

$("#grid").kendoGrid({    
    columns: [        
        {
            field: 'Type', title: '種類', template: function (e) {
            	// 這邊的template 是客製化顯示在grid 上的column 內容
                if (e.Type) {
                	// e 指的是現在這個model
                	// 如果Type 不是空的，就回傳Type.Value，也就是文字的部分
                    return e.Type.Value	
				}
                else
                    return '';
            }, editor: typeEditor
        }
    ]
});

相關連結：
https://www.telerik.com/forums/custom-popup-editor-with-additional-fields