Kendo Grid 教學 3 - 建立新增功能

在 「Kendo Grid 教學 2 - Inline Edit」的文章中提到怎麼樣進行 inline edit 的工作。但是，以先前提供的範例來看，並未交代如何進行新增的作業。

但是，如果有依據參考資料進入 「Kendo Grid Grid Inline Edit Demo」檢視範官方的範例程式的話，應該已經發現如何把「Add New Record」的按鈕加上去。

$scope.mainGridOptions = {

         dataSource: $scope.datasource,

         pageable: true,

         height: 300,
         toolbar: ["create"],


         columns: [

          { field: "id",  title: "商品編號", width: "120px"},

          { field: "name", title: "商品名稱", width: "120px" },

          { field: "price", title: "商品價格", width: "120px"},

          { command: ["edit", "destroy"], title: " ", width: "250px" }

          ],
         editable: 'inline'

    };


};

在原本 mainGridOptions 中，加入 toolbar 的元素，並指定要使用 create 功能，就可以像官方的範例，有一個 「Add New Record」的按鈕。

當這個按鈕按下去之後，以 inline 編輯模式來看，Kendo Grid 的第一行會進入編輯模式，讓我們輸入資料後進行新增作業。

[參考資料]
1. Kendo Grid Grid Inline Edit Demo