首先你需要從Telerik網站下載試用版開發包，注意需要註冊後才能下載，或者從本站下載 （18M）
下載後直接解壓後包含下面幾個文件和目錄：
-
/examples – 示例.
-
/js – minified 化後的JavaScript庫.
-
/vsdoc JavaScript Intellisense 支持文件
-
/styles – minified後的CSS及主題資源.
-
changelog.html – Kendo UI 發佈文件.
如果你下載服務器端支持（比如ASP.NET，PHP等）還可能包含
-
wrappers 目錄，支持服務器端UI組件的封裝。
本教程側重於直接使用JavaScript，服務器端支持只是使用PHP,Net等服務器端API生產這些客戶端代碼（主要是UI組件的配置），Kendo UI應用不需要這些服務器端封裝就可以運行。
這裏我們使用Visual Studio 2012 IDE作爲開發環境，你可以使用你自己熟悉的開發工具，或者直接使用NotePad都可以開發基於Kendo UI的Web應用。
下面就可以使用Keudo UI 來開發Web應用了。首先使用Visual Studio 創建一個空的 Web Site ，然後及Kendo UI的 js和 styles 目錄拷貝到這個新創建的Website 應用中。你如果直接使用Notepad作爲開發工具，可以創建一個開發目錄，然後把js,和Styles目錄拷貝過來也是一樣的。使用Visual Studio的一個好處是支持Intelisense ，幫助編寫JavaScript代碼，這是就需要把vsdoc的內容拷貝到js目錄下。
然後添加三個 HTML 文檔用來測試。
-
index.html Web應用測試頁
-
mobile.html 移動應用測試頁
-
dataviz.html 數據顯示測試頁
![20130609002]()
Kendo UI Web
編寫基於桌面系統的Web應用，使用KendoUI WEB Javascript庫，在Html的Head部分添加對應的CSS和JavaScrpt，這裏我們使用一個DataPicker 控件做爲示例，完整代碼如下：
4 |
<title>Kendo
UI Web</title> |
5 |
<link href="styles/kendo.common.min.css" rel="stylesheet" /> |
6 |
<link href="styles/kendo.default.min.css" rel="stylesheet" /> |
7 |
<script src="js/jquery.min.js"></script> |
8 |
<script src="js/kendo.web.min.js"></script> |
11 |
<input id="datepicker" /> |
14 |
$("#datepicker").kendoDatePicker(); |
![20130609003]()
如果能夠正確顯示dataPicker控件，就表示Kendo UI Web開發環境已經正確設置好了。
Kendo UI DataViz
如果需要開發數據顯示控件的Web頁面（比如DataGrid，表格等），在頁面添加DataViz庫和CSS的應用，如下例顯示一個儀表盤：
4 |
<title>Kendo
UI DataViz</title> |
5 |
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" /> |
6 |
<script src="js/jquery.min.js"></script> |
7 |
<script src="js/kendo.dataviz.min.js"></script> |
10 |
<div id="gauge"></div> |
13 |
$("#gauge").kendoRadialGauge(); |
![20130609004]()
Kendo UI Mobile
最後，修改mobile.html 測試一下移動Web應用，
4 |
<title>Kendo
UI Mobile</title> |
5 |
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet"/> |
6 |
<script src="js/jquery.min.js"></script> |
7 |
<script src="js/kendo.mobile.min.js"></script> |
10 |
<div data-role="view" data-title="View" id="index"> |
11 |
<header data-role="header"> |
12 |
<div data-role="navbar"> |
13 |
<span data-role="view-title"></span> |
16 |
<ul data-role="listview"> |
20 |
<footer data-role="footer"> |
21 |
<div data-role="tabstrip"> |
22 |
<a data-icon="home" href="#index">Home</a> |
23 |
<a data-icon="settings"href="#settings">Settings</a> |
28 |
var
app = new kendo.mobile.Application(); |
![20130609005]()
這樣就設置好了Kendo UI的開發環境。
轉載地址：http://blog.csdn.net/mapdigit/article/details/9091359
