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()来获取组件的宽高度