##首先貼上效果圖

##初始化Grid

<div id="grid"></div>

//初始化Grid外掛
    $("#grid").kendoGrid({
        
        editable: "incell",
        height:700,
        allowCopy: true,
        selectable: true,
        dataSource: {
            data: [],
            schema: {
                model: {
                    fields: {
                        customer_name: { editable: false }
                    }
                }
                
            }
        },
        columns: [
            {
                title: Language.GetText(FunctionID + "." + PageID + ".GridHeader.customer_name", "CN:客戶程式碼~EN:Customer_ID"),
                field: "customer_id",
                editor: function (container) {
                    var input = $("<input id=\"Customer_id\" name=\"Customer_id\"  validationMessage=\"" + Language.GetText(FunctionID + "." + PageID + ".GridHeader.Customer_ID", "CN:使用者ID必須填入~EN:Customer ID is required") + "\">");
                    input.appendTo(container);
                    //初始化Grid的第一列為ComboBox
                    input.kendoComboBox({
                        dataSource: brands,
                        clearButton: false,
                        change: function (e) {
                            isCustomerIdChange = true;
                            //Grid列之間的資料關聯
                            var key = this.value();
                            var grid = $("#text").data("kendoGrid");
                            var dataItem = $("#text").data("kendoGrid").dataItem(grid.select());
                            var row = 0;
                            var tblCells = grid.content.find("td:not(.unSelect)");
                            //獲取正在編輯的項的索引值
                            var index = tblCells.index(grid.content.find("td.k-edit-cell"));
                            var row = index != 0 ? (index / 3) : 0;
                            grid.select("tr:eq(" + row + ")");
                            dataItem = $("#text").data("kendoGrid").dataItem(grid.select());
                            if (key == "") {
                                dataItem.customer_id = undefined;
                            } else {
                                dataItem.customer_id = key;
                            }
                            //根據客戶程式碼獲取客戶程式碼
                            dataItem.customer_name = findNameFromId(key);
                            $("#text").data("kendoGrid").refresh();
                            var inputarea = $("#text tr:eq(" + (row + 1) + ") td:eq(2)");

                            grid.editCell(inputarea);
                                            
                        }
                    }).appendTo(container);



                }
            },
            {
                field: "customer_name",
                title: Language.GetText(FunctionID + "." + PageID + ".GridHeader.customer_name", "CN:客戶名稱~EN:Customer_Name"),
                editable: false,


            },
            {
                field: "Cost_Ratio",
                required: "required",
                title: Language.GetText(FunctionID + "." + PageID + ".GridHeader.customer_name", "CN:費用比例~EN:Cost_Ratio")
            },
        ]

    });

    //初始化清空按鈕
    $("#clearBtn").kendoButton({
        click: function () {
            var size = $("#text").data("kendoGrid").dataSource.total();
            for (var i = 0; i < size; i++) {
                var data = $("#text").data("kendoGrid").dataSource.at(0); //取第一條資料
                $("#text").data("kendoGrid").dataSource.remove(data);
            }
        }
    });
 

 Language.GetText(FunctionID + "." + PageID + ".GridHeader.customer_name", "CN:客戶程式碼~EN:Customer_ID")

##以上的Language工具是自定義的國際化語言工具，相當於HTML裡的lang="CN:客戶程式碼~EN:Customer_ID".

上述例項的客戶程式碼即第一列是Kendo 的ComboBox,第二列是不可編輯的項，

具體表現就是選擇完第一列後會關聯顯示出第二行

即選擇第一列為CSL_ANF時，第二列會顯示CKL對應的名稱，即ANF-CSL

##如果不是實現和我一樣的前端邏輯時可以自己定義第一列對應的ComboBox的change事件方法

##change和select方法不同，change方法的監聽包括了鍵入時的事件監聽

change: function (e) {}

如果有其他以上關於Kendo的問題可以直接問我，如果我知道的我會盡量回答