Kendo UI开发教程(4): UI Widgets 概述

朱雀 2023-10-16 19:22 1阅读 0赞

Kendo UI 是基于jQuery 库开发的，Kendo UI widgets是以jQuery 插件形式提供的。这些插件的名称基本上都是以kendo作为前缀。比如 Kendo的autocomplete UI 组件名称为 kendoAutoComplete ,Kendo UI 手机 UI组件是以 “kendoMobile”为前缀。比如：”kendoMobileListView”.

#### 使用jQuery初始化Kendo UI 组件 ####

Kendo UI 组件使用页面上HTML元素来创建，使用CSS选择器 然后调用 jquery 插件（kendo UI组件）将这些HTML元素转换为Kendo UI组件（基本方法和jQuery UI类似）。

例如：初始化一个自动提示输入框组件（autocomplete)

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">1</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;input id=</code><code style="">"autocomplete"</code>&nbsp;<code style="">/&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">2</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">$(</code><code style="">"#autocomplete"</code><code style="">).kendoAutoComplete([</code><code style="">"Apples"</code><code style="">,&nbsp;</code><code style="">"Oranges"</code><code style="">,</code><code style="">"Grapes"</code><code style="">]);</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

其中 $(“\#autocomplete”).kendoAutoComplete(\["Apples", "Oranges", "Grapes"\]); 完成两项任务：

1.  查找Id为autocomplete的HTML元素，\#autocomplete 为CSS 选择器
2.  使用kendoAutoComplete jQuery插件初始化 Kendo UI组件，并使用数组\["Apples", "Oranges", "Grapes"\]作为配置参数传给kendoAutoComplete组件

注意：如果jQuery 找不到由css 选择器指定的HTML元素，Kendo UI组件不会被创建，你可以使用任意合法的CSS选择器来初始化Kendo UI组件，对于每个符合选择器条件的HTML元素都会初始化一个Kendo UI组件。

#### 配置Kendo UI 组件 ####

如前面例子，可以通过传递配置对象的方法来配置Kendo UI组件，配置对象为一组Key/Value对，这些Key/Value值用来配置UI组件。

如下例，配置一个Grid组件。

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">$(</code><code style="">"#grid"</code><code style="">).kendoGrid({ </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;</code><code style="">height: 200,</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">5</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;</code><code style="">columns:[</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">7</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">field:&nbsp;</code><code style="">"FirstName"</code><code style="">,</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">8</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">title:&nbsp;</code><code style="">"First Name"</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">11</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">field:&nbsp;</code><code style="">"LastName"</code><code style="">,</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">12</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">title:&nbsp;</code><code style="">"Last Name"</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">15</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;</code><code style="">dataSource: { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">18</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">FirstName:&nbsp;</code><code style="">"John"</code><code style="">,</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">19</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">LastName:&nbsp;</code><code style="">"Doe"</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">22</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">FirstName:&nbsp;</code><code style="">"Jane"</code><code style="">,</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">23</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">LastName:&nbsp;</code><code style="">"Doe"</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">28</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

[![20130621001][]][20130621001]

上面例子为Grid组件配置了height, columns和dataSource. [API 文档][API] 包含了每个Kendo UI 组件支持的配置项。

#### 获取Kendo UI组件的引用对象 ####

Kendo UI 通过jQuery 插件的方式来初始化，但是调用这些方法时不会返回这些实例对象的引用，而是使用传统的jQuery 方法来获取所创建的Kendo UI对象的引用，为了获得所创建的Kendo UI组件对象的引用，使用jQuery data方法，例如获取前面例子中创建kendoAutoComplete的对象，可以使用下面代码：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">$(</code><code style="">"#autocomplete"</code><code style="">).kendoAutoComplete([</code><code style="">"Apples"</code><code style="">,&nbsp;</code><code style="">"Oranges"</code><code style="">,&nbsp;</code><code style="">"Grapes"</code><code style="">]);</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">var</code>&nbsp;<code style="">autocomplete = $(</code><code style="">"#autocomplete"</code><code style="">).data(</code><code style="">"kendoAutoComplete"</code><code style="">);</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">5</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

方法 $(“\#autocomplete”).data(“kendoAutoComplete”) 返回所创建的Kendo AutoComplete对象。data的参数为Kendo UI组件的名称，比如”kendoAutoComplete”, “kendoGrid”等。

#### 使用Kendo UI组件的方法 ####

在获取Kendo UI组件对象的引用之后，就可以调用该UI组件的方法，例如：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">$(</code><code style="">"#autocomplete"</code><code style="">).kendoAutoComplete([</code><code style="">"Apples"</code><code style="">,&nbsp;</code><code style="">"Oranges"</code><code style="">,&nbsp;</code><code style="">"Grapes"</code><code style="">]);</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">var</code>&nbsp;<code style="">autocomplete = $(</code><code style="">"#autocomplete"</code><code style="">).data(</code><code style="">"kendoAutoComplete"</code><code style="">);</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">5</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">autocomplete.value(</code><code style="">"Cherries"</code><code style="">);</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">6</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">var</code>&nbsp;<code style="">value = autocomplete.value();</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">7</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">alert(value);&nbsp;</code><code style="">// Displays "Cherries"</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">8</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

上面的例子中获取autocompete对象之后，调用了它的value()方法来写入和读取该输入框的内容。

#### 监听Kendo UI事件 ####

Kendo UI组件支持多种事件，比如按键，鼠标，内容变化等事件，有两种方法可以为Kendo Ui 组件定义事件处理方法：

1.  在初始化时定义JavaScript函数作为该UI组件的事件处理方法
2.  通过bind函数来把一个JavaScript函数绑定到UI组件的某个事件

比如，初始化时定义事件处理方法：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">function</code>&nbsp;<code style="">autocomplete_change() { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">// Handle the "change" event</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">6</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">$(</code><code style="">"#autocomplete"</code><code style="">).kendoAutoComplete({ </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">7</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">change: autocomplete_change</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">9</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

下面例子，使用bind方法。

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">function</code>&nbsp;<code style="">autocomplete_change() { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">// Handle the "change" event</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">6</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">$(</code><code style="">"#autocomplete"</code><code style="">).kendoAutoComplete();</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">7</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">var</code>&nbsp;<code style="">autocomplete = $(</code><code style="">"#autocomplete"</code><code style="">).data(</code><code style="">"kendoAutoComplete"</code><code style="">);</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">8</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">autocomplete.bind(</code><code style="">"change"</code><code style="">, autocomplete_change);</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">9</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

两种方法都把一个函数绑定到autocomplete的”change”事件。此时如果autocomplete内容发生变化，则触发change事件，相应的事件处理方法会被调用。

#### 事件处理函数 ####

事件处理函数在事件发生时被调用，该事件处理函数的传入参数包含了事件相关的JavaScript对象，你可以通过sender参数获得触发该事件的UI组件，比如：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">function</code>&nbsp;<code style="">autocomplete_change(e) { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">var</code>&nbsp;<code style="">autocomplete = e.sender;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">5</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">var</code>&nbsp;<code style="">value = autocomplete.value();</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">6</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">alert(value);&nbsp;</code><code style="">// Displays the value of the AutoComplete widget</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">8</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">$(</code><code style="">"#autocomplete"</code><code style="">).kendoAutoComplete({ </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">9</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">change: autocomplete_change</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">11</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

此外，也可以使用this 关键字来获取触发事件的UI对象引用，比如：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">3</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">function</code>&nbsp;<code style="">autocomplete_change(e) { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">var</code>&nbsp;<code style="">autocomplete =&nbsp;</code><code style="">this</code><code style="">;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">5</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">var</code>&nbsp;<code style="">value = autocomplete.value();</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">6</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">alert(value);&nbsp;</code><code style="">// Displays the value of the AutoComplete widget</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">8</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">$(</code><code style="">"#autocomplete"</code><code style="">).kendoAutoComplete({ </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">9</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">change: autocomplete_change</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">11</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

[20130621001]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/06/20130621001.png
[API]: http://docs.kendoui.com/api