在 「
Kendo Grid 教學 1 - 建立列表」的文章中，有兩個主要的變數要設定，以便讓 Kendo Grid 可以運作起來，並透過 Rest Service 拿到列表資訊。分別是 datasource 與 mainGridOptions。
Datasource
其中，datasource 可以看作是 kendo grid 的資料來源。在先前的文章中，設定了 transport 與 schema 兩個主要屬性。
transport
透過 transport 的屬性設定，可以完成資料的讀取及寫入工作。針對新增、修改、刪除及查詢的部分，分別提供 create、update、destory 及 read 的 function 來進行相關作業的處理。
transport:{
create:{...},
update:{...},
destroy{...},
read{...}
}
開發人員可透過上述設定，完成 kendo grid 上 CRUD 的相關動作。
schema
Schema 在 Datasource 中扮演兩個重要的角色：
- 透過 schema.model.fields 定義 kendo grid 的資料模型，設定排序 (sorting)、篩選 (filtering)，並確保使用對應的編輯元件，例如: 數字輸入框對應到數字型別的資料。
- 透過 schema.model.id 定義 kendo grid 中的 id 欄位，以確保新增、修改、刪除等工作可以正確執行。
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true, defaultValue: null},
name: {validation: { required: true }},
price: { type: 'number', defaultValue: 0, validation: { required: true, min: 0}}
}
}
}
parameterMap
在 Kendo Grid 與後端服務整合的部分，透過設定可以採用 json, jsonp, odata 等不同資料模式。所以，在請求資料 (request) 真的往後送之前，我們需要透過 parameterMap function 幫我們處理資料的轉置問題。
下列為，parameterMap 中的範例程式。因為 read 方法不需要傳參數即可拿到資料，所以在範例程式中，我們把 read 方法過濾掉。然而，在 create, update 及 destory 的部分，我們將前端 Form 內的第一個元素取出 (因為 options.models 預設是 array)，並將其當作參數往後面的服務拋送。
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return JSON.stringify(options.models[0]);
}
}
mainGridOptions
在前一篇文章中，我們有看到下列 mainGridOptions 之設定。設定的內容可以進一步分成幾個區塊。
- 設定 datasource，作為 kendo grid 的資料來源
- 利用 pageable 設定是否分頁
- 透過 height 設定 kendo grid 的高度
- 透過 columns 設定 kendo grid 的表頭應該呈現什麼
4.1. filed 的設定會與 datasource 底下 schema 內的 fields 做呼應，相同名稱的會對在一起，是一種透過設定抓相對應資料的概念。
- columns 中還有一個設定為 command，在每一列上會顯示編輯 (edit) 與刪除 (destory) 的按鈕
- editable 設定為 inline 代表該 grid 會使用 inline 的方式進行編輯作業
其中，標紅色字樣的部分是本次要做 inline edit 新加的部分
$scope.mainGridOptions = {
dataSource: $scope.datasource,
pageable: true,
height: 300,
columns: [
{ field: "id", title: "商品編號", width: "120px"},
{ field: "name", title: "商品名稱", width: "120px" },
{ field: "price", title: "商品價格", width: "120px"},
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
editable: 'inline'
};
};
建立對應新增、修改、刪除、查詢的方法
在本文前面有提到 datasource 中的 transport 就是讓我們進行 create、update、destory 及 read 的 function 撰寫。
在本文中，以 update 為例：
1. url : 記錄遠端服務的端點
2. type: 使用 HTTP 通訊協定的方法 (例如：GET, PUT, POST, DELETE 等)
3. contentType 傳輸內容的類型
4. complete function: 服務呼叫成功後，要做的相關動作可以寫在此處
5. error function: 服務呼叫失敗後，要做的相關動作可以寫在此處
update: {
url: "your service endpoint",
type: "PUT",
dataType: "json",
contentType: 'application/json',
complete: function (data) {
// 呼叫服務成功後，要做什麼事
},
error: function (xhr, error) {
// 呼叫服務失敗後，要做什麼事
}
}
其他，關於 destory 及 create 也是採用相同的方式進行撰寫。雖然，在這裡並沒有說明如何建立一筆新的資料。但，後面還會有其他文章提到。
備註：
我們做 Rest Service 的時候，可能經常將 create、update 及 delete 的 method 預設為不回傳值。以 Java 來說，就是宣告回傳的是 void。
但是，這樣可能會導致 kendo grid 不 work。所以，我們必須回傳一個 JSON 字串回來。針對，create 及 update 的方法，需要回傳新增或是更新的那個物件回來。避免 kendo grid 呈現一個空白列在那邊。
有關 inline edit 的實際 demo，可以進一步參考官網上
Inline Edit 的範例。
「參考資料」
1.
Kendo Grid CRUD Data Operation
2.
Kendo Grid Grid Inline Edit Demo
