Kendo Grid 教學 2 - Inline Edit

在 「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 中扮演兩個重要的角色：

1. 透過 schema.model.fields 定義 kendo grid 的資料模型，設定排序 (sorting)、篩選 (filtering)，並確保使用對應的編輯元件，例如: 數字輸入框對應到數字型別的資料。
2. 透過 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 之設定。設定的內容可以進一步分成幾個區塊。

1. 設定 datasource，作為 kendo grid 的資料來源
2. 利用 pageable 設定是否分頁
3. 透過 height 設定 kendo grid 的高度
4. 透過 columns 設定 kendo grid 的表頭應該呈現什麼
   4.1. filed 的設定會與 datasource 底下 schema 內的 fields 做呼應，相同名稱的會對在一起，是一種透過設定抓相對應資料的概念。
5. columns 中還有一個設定為 command，在每一列上會顯示編輯 (edit) 與刪除 (destory) 的按鈕
6. 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