Kendo Grid 教學 1 - 建立列表

近年來，前端 javascript 的技術突飛猛進，有許多的 framework 出現，學都學不完。而在，公司的專案需求上，我們需要開始研究 Kendo UI 這套框架。

Grid View 是我們建置 Web 應用程式中相當常用的 UI 元件。記得十多年前，同時接觸 .NET 與 Java 時，總覺得為什麼 .NET 上做一個 Grid View 相當容易，而在 Java 上卻需要自己寫那麼多程式。一個 Page 一個 Page  一直寫著重覆類似的程式碼。

雖然知道，這裡應該要被元件化，但始終沒有下手去做這類整理的事。那時候，還是以 Server Page 為主的時代。AJAX 的興起是在那之後兩三年的事情。

而到了現在，檯面上已經有非常多這種前端的元件，而且透過 javascript 技術的發展。現在，前端的頁面已經鮮少使用 Server Page 相關的 Tag 。而改由 HTML5 + javascript + css 來進行所有的事情。至於後端採用什麼語言 (C#, Java or PHP) 似乎已經沒那麼重要，也徹底實現 Web 端的 MVC 概念。

底下，我們就建立一系列的文章，來探討使用 Kendo UI 的心路歷程：

1. 下載 kendo ui 的相關套件 Kendo UI Download Free Trial
 
解壓縮後，將套件內的 js 與  styles 資料夾放到專案目錄中。以我自己的範例來看，這兩個資料夾放在 [your project]/webapp/resources/lib/ui/ 底下。

2. 下載 kendo.all.min.js

我是認為 kendo.all.min.js 應該涵蓋在第一步驟中所下載的內容裡。但是，不知道為什麼沒有。可能這樣可以收一點顧問費，畢竟它是需要付費的！所以，只好從官網的範例偷偷把 js 檔載回來。一樣放在 [your project]/webapp/resources/lib/ui/ 底下。

此使，該目錄下有 js 及 styles 兩個資料夾再加上 kendo.all.min.js 這個檔案。

3. 建立後端 RESTFUL Services，讓 Service 回傳下列這串 JSON 訊息回來

[
  {"id":4,"name":"Starbucks","price":300},
  {"id":5,"name":"BrownCafe","price":200},
  {"id":6,"name":"CityCafe","price":100}
]

4. 撰寫前端頁面

4.1. CSS 與 JS 引用之宣告

<link rel="stylesheet" href="./resources/scripts/lib/ui/styles/kendo.common.min.css" />

<link rel="stylesheet" href="./resources/scripts/lib/ui/styles/kendo.default.min.css" />

<link rel="stylesheet" href="./resources/scripts/lib/ui/styles/kendo.default.mobile.min.css" />

<script src="./resources/scripts/lib/ui/js/jquery.min.js"></script>

<script src="./resources/scripts/lib/ui/js/angular.min.js"></script>

<script src="./resources/scripts/lib/ui/kendo.all.min.js"></script>

4.2. 在 HTML 頁面上，宣告要使用 Kendo Grid (以 AngularJS 為範例，官網上還有許多 JQuery 的範例)

<div id="example" >

    <div ng-controller="MyCtrl">

        <kendo-grid options="mainGridOptions">

        </kendo-grid>

    </div>

</div>

4.3. AngularJS

4.3.1. kendo UI 元件在 AngularJS 中被實作成 directives 所以當我們要使用 kendo ui 時需要注入 kendo.directives

var app = angular.module('myApp', ['kendo.directives']);

4.3.2. Controller

app.controller('MyCtrl', function($scope){

$scope.datasource = {

         transport: {

               read: {

                   url: [your service address]

                   dataType: "json"

               }

         },

         schema: {    

             model: {

                 fields: {

                     id: { editable: false},

                     name: {validation: { required: true }},

                        price: { type: 'number', defaultValue: 0, validation: { required: true, min: 0}}

                    }

                }

            }

   };






$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"},

          ]

    };

};

依據此方式，即可完成下列表格之設計。雖然，做了很多事才弄出這張表。但是，使用這個元件可以讓後續新增、修改跟刪除的 UI 操作快很多，只需要再加上一些設定。

[參考資料]
1. Kendo UI - Grid Example