KendoUI组件基础（上）

获取对组件实例的引用，并调用其方法

每个组件都有自己的方法集合，包括该组件特有的方法、从父类继承而来的方法以及所有组件的通用方法。
要调用组件方法，首先要获取对该组件实例的引用（即指针），主要有三种方式，以调用AutoComplete组件的value()方法为例：

<input type="text" value="abc" id="auInput" />

<script type="text/javascript">
	$(function() {
		//初始化组件
		$("#auInput").kendoAutoComplete({
			dataSource: ["a1", "a2", "b1", "b2", "c1", "c2"]
		});
		
		//方式一：getKendoNameOfWidget()
		$("#auInput").getKendoAutoComplete().value();
		
		//方式二：data("kendoNameOfWidget")
		$("#auInput").data("kendoAutoComplete").value();
		
		//方式三：kendo.widgetInstance()
		kendo.widgetInstance($("#auInput")).value();
	});
</script>

---

Get/Set组件配置项

可以使用组件的options属性查看其配置项的值，使用setOptions()修改其配置项的值。

<div id="calendar"></div>

<script type="text/javascript">
	$(function() {
		//获取对组件实例的引用
		var cal = $("#calendar").kendoCalendar().getKendoCalendar();
		
		//使用options属性获取配置项的值		
		Object.getOwnPropertyNames(cal.options).forEach(function(key) {
			console.log(key + " : " + cal.options[key]);
		});
		
		//修改组件实例的配置项
		cal.setOptions({
			start: "year" //默认以年视图展示
		});
	});
</script>

---

引用组件的初始化元素和最外层包裹元素

组件的element属性（jQuery对象），指向该组件初始化的原始DOM元素。取决于不同的组件，该元素可能是可见的（e.g. AutoComplete, Calendar, DatePicker, etc），也可能会被隐藏（e.g. DropDownList, Upload, etc）。对原始DOM元素的引用在组件初始化时也会被返回。
组件的wrapper属性（jQuery对象），指向在DOM结构中包裹该组件的最外层元素。比如如果Grid是从<div>初始化来的，则两个引用匹配；但是如果是直接从<table>初始化来的，则element指向<table>，wrapper指向最外层的<div>。

<table>
	<thead><tr><th>Th</th></tr></thead>
	<tbody><tr><td>Td</td></tr></tbody>
</table>

<script type="text/javascript">
	$(function() {
		var grid = $("table").kendoGrid().getKendoGrid();
		
		//使用element属性获取对原始DOM元素的引用
		console.log(grid.element.prop("tagName")); //TABLE

		//使用wrapper属性获取包裹组件的元素名称
		console.log(grid.wrapper.prop("tagName")); //DIV <div class="k-grid k-widget"></div>
	});
</script>

---

销毁组件

所有组件都有destroy()来销毁实例对象，但同时又往往需要手动删除组件实例化时自动生成的HTML元素。
另外，可以使用kendo.destroy()来一次性销毁多个组件，其参数是一个DOM对象，该对象范围内的所有组件都会被销毁。

var btn = $("button").kendoButton({
	click: function(ev) {
		//destroy button instance
		btn.destroy();
		//empty and remove wrapper element
		ev.sender.wrapper.empty().remove();
	}
}).getKendoButton();

---

重置组件大小

有些组件可以根据设置的宽/高度为100%来自动适应父元素的大小变化，而有些不能，比如：

• All DataViz Widgets
• Grid
• Scheduler
• Slider
• Splitter
• Window
• etc.

这种情况可以手动调用组件的resize()或kendo.resize($el)。

var grid = $("table").kendoGrid().getKendoGrid();
			
$("window").on("resize", function() {
	grid.resize();
	//or, kendo.resize(grid)
});

可以使用getSize()来获取组件的宽高度