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”等。

还用几种访问方式参考:几种Kendo组件实例访问方式(Kendo Tip: Accessing Widget Instances) 

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>


本文转载:CSDN博客