第二篇：kendo UI基本控件的初始化

kendo UI控件的初始化有很多种方式，不过我习惯按钮和普通文本框采用在html代码里进行初始化，其余的比如下拉框、日期控件、表格，还有 一些比 较特殊的数字文本框之类的，我就习惯在jquery代码里进行初始化。我只写出几种常用控件的初始化，更多的控件初始化方式其实大同小异了，大家可以查阅 kendo的官方文档。

kendo普通文本框的初始化：

 

    <input id="你的文本框ID" type="text" class="k-input k-textbox"/> 

 

当然，你也可以在里面用style属性加一些元素样式，比如宽度width之类的，全部可以使用px单位进行表示。

kendo按钮的初始化：

 

    <input id="你的按钮ID" type="button" value="你的按钮显示文本" class="k-button k-primary" /> 

 

 

以上两种控件我喜欢在html里就把它们初始化好，那下面的就是采用js进行初始化操作：

 

kendo下拉框的初始化：

 

    <select id="xxx"></select> 

 

$("#xxx").kendoDropDownList(); 

 

同样，在这个选择器里，除了ID选择器，你还可以使用标签选择器、class选择器、属性选择器等等，当然，采用ID选择器是最准确的，不过在初始化的时候，推荐加上一句全局下拉框初始化的js代码，使用的是标签选择器：

    $("select").kendoDropDownList();  

 

kendo日期选择控件的初始化：

 

    <input id="你的日期控件ID" value="" placeholder="不选择视为所有时间" /> 

 

    $("#你的日期控件ID").kendoDatePicker();  

这里，placeholder属性是设置这个文本框或日期框的默认提示语，也就是那个灰色字体的提示语，可以不写这个属性。

 

kendo数字文本框控件的初始化：

 

  <input id="你的数字文本框的ID" type="number" value="0" min="0" max="10"/> 

 

$("#txtTrans_Money").kendoNumericTextBox({format: "c"}); 

其 中，min是这个文本框可以输入的最小值，max是可以输入的最大值，js代码里的format是规定这个文本框数字的格式，比如带不带小数点，是否只 能输整数之类的，关于kendoUI的kendoNumericTextBox控件的一些详细说明，大家可以阅读下这两个网站：

数字文本框的属性介绍

format的官方说明

 

kendo表格的初始化：

 

<div id="mytb"></div> 

 

$("#mytb").kendoGrid(); 

kendo的grid表格是kendo所有控件里最麻烦也是最难操作的一个控件，里面包含着很多属性，比如分页的属性、数据源的属性，如果你想学好kendo，首先要突破的就是kendo的grid，在后面的博文里，我会慢慢地详细介绍grid的一些使用方式。