Kendo 学习笔记
1.使用jQuery的方法将一个HTML元素转换成一个Kendo UI控件
方法： $(“#datepicker”).kendoDatePicker();<!doctype html>
<html>
<head>
<title>Kendo UI Web</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.web.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function () {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
另外，除了使用jQuery插件的方法来初始化方法外，每个Kendo 控件还可以通过data属性来初始化，此时你需要设置data的role属性，然后调用kendo.init方法。
<div id="container">
<input data-role="numerictextbox" />
</div>
<script>
kendo.init($("#container"));
</script>
2、事件
你也可以通过data属性添加对Kendo UI组件的事件处理，属性的值被当成一个JavaScript函数，其作用域为全局。
</script>
<div id="container">
<input data-role="numerictextbox" data-change="numerictextbox_change" />
</div>
<script>
function numerictextbox_change(e) {
// Handle the "change" event
}
kendo.init($("#container"));
</script>
3、获取Kendo UI组件的引用对象
Kendo UI 通过jQuery 插件的方式来初始化，但是调用这些方法时不会返回这些实例对象的引用，而是使用传统的jQuery 方法来获取所创建的Kendo UI对象的引用，为了获得所创建的Kendo UI组件对象的引用，使用jQuery data方法，例如获取前面例子中创建kendoAutoComplete的对象，可以使用下面代码：
例：
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
</script>
方法 $(“#autocomplete”).data(“kendoAutoComplete”) 返回所创建的Kendo AutoComplete对象。data的参数为Kendo UI组件的名称，比如”kendoAutoComplete”, “kendoGrid”等。
4、监听Kendo UI事件（事件綁定）
- 在初始化时定义JavaScript函数作为该UI组件的事件处理方法:
<input id="autocomplete" />
<script>
function autocomplete_change() {
// Handle the "change" event
}
$("#autocomplete").kendoAutoComplete({
change: autocomplete_change
});
</script>
- 通过bind函数来把一个JavaScript函数绑定到UI组件的某个事件:
<input id="autocomplete" />
<script>
function autocomplete_change() {
// Handle the "change" event
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("change", autocomplete_change);
</script>