本系列主要是记录KendoUI的学习过程。
KendoUi的特点有以下特点：
1、 70+UI控件
控件有DataGrids,DropDowns,Menus和Buttons，还有一些商业的控件，比如Charts，电子表格，甘特图，线图，日程图，PivotGrid和地图。
2、漂亮主题
有较多的样式可以选择，可以不用写任何样式，可以使你的APP很优雅。通过一个简单样式创建工具就可以自定义样式。
3、任意屏幕
构建跨平台的网页应用，给任意尺寸的桌面程序和手机。所有内容完全无缝兼容grid布局框架，比如Bootstrap和Zurb Foundation。学习更多的KnedoUi for jquery。
4、易于学习
- 良好的培训
- 支持在线和离线数据
- 支持Angular
- 支持导出Excel,paf,Png
- 支持所有的浏览器
- 无限的产品支持
数据包介绍：
1、/apptemplates 这个文件夹包含脱机启动模板。尽管都是些静态html文件，但是建议通过web server 而不是通过文件系统。后者的方法会破坏ajax 数据请求。
2、/examples 包含快速启动的demo文件。尽管都是些静态html文件，但是建议通过web server 而不是通过文件系统。后者的方法会破坏ajax 数据请求。
3、/js 包含压缩过的js文件。
4、/src 这个文件夹包含所有源代码文件，但是他们不提供给实验用户。
5、/styles 这个是有压缩过的css文件和样式图片。这个文件夹包含较少的文件，可以通过编译器，坐落再第一层文件夹在 styles/floder:styles/web/和styles/mobile/. 移动端的css不提供给实验用户。
6、/wrappers 包含服务端包装，for asp.net MVC
7、changelog.html 提供kendo ui 释放版本。
添加CSS和Javascript 引用：
使用kendo Ui 在你的项目中，包含引用 Javascript和Css文件。
第一步：提取/js 和 /styles 目录 从项目包中 和复制 他们到你的web application 根目录。
第二步：包含kendo ui JavaScript 和css 文件 在你的html 文档的head中，确认common css文件已经注册在他们这些css之前。
例子如下：
<!DOCTYPE html> <html> <head> <title>Welcome to Kendo UI!</title> <!-- Common Kendo UI CSS for web widgets and widgets for data visualization. --> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. --> <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" /> <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. --> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. --> <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" /> <!-- jQuery JavaScript --> <script src="js/jquery.min.js"></script> <!-- Kendo UI combined JavaScript --> <script src="js/kendo.all.min.js"></script> </head> <body> Hello World! </body> </html>
第三步：初始化控件
下面的例子是初始化时间控件。
<!-- HTML element from which the DatePicker would be initialized --> <input id="datepicker" /> <script> $(function() { // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin $("#datepicker").kendoDatePicker(); }); </script>
下面是完整的例子初始化时间选择控件
<!DOCTYPE html> <html> <head> <title>Welcome to Kendo UI!</title> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head> <body> <input id="datepicker" /> <script> $(function() { $("#datepicker").kendoDatePicker(); }); </script> </body> </html>
补充说明：
1、关于样式问题，kendo ui 支持主题。
//默认主题
<link href="~/Content/KendoUI/kendo.default.min.css" rel="stylesheet" />
//bootstrap主题
<link href="~/Content/KendoUI/kendo.bootstrap.min.css" rel="stylesheet" />
2、本地语言
<script src="~/Scripts/KendoUI/kendo.culture.zh-CN.min.js"></script> <script type="text/javascript">
//需要声明，使用简体中文 kendo.culture("zh-CN"); </script>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - Kendo</title> <link href="~/Content/KendoUI/kendo.common.min.css" rel="stylesheet" />
//默认主题 @*<link href="~/Content/KendoUI/kendo.default.min.css" rel="stylesheet" />*@
//bootstrap主题 <link href="~/Content/KendoUI/kendo.bootstrap.min.css" rel="stylesheet" /> </head> <body> @RenderBody() <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
//中文补丁 <script src="~/Scripts/KendoUI/kendo.culture.zh-CN.min.js"></script> <script type="text/javascript">
//需要声明，使用简体中文 kendo.culture("zh-CN"); </script> @RenderSection("scripts", required: false) </body> </html>