Kendo with JQuery
===
###### tags: `web` `frontend`

## 初始化 UI 元件
1. 指定 DOM 來初始化

<input id="datepicker" />
<script>       
    $("#datepicker").kendoDatePicker();
</script>

2. 使用 data-role
此方法可快速的初始化特定範圍內的所有元件
data-role 的值為元件名稱(小寫)

<div id="container">
    <input data-role="numerictextbox" />
</div>
<script>
    kendo.init($("#container"));
</script>

### data
1. 參數也可在 data 上配置
- 對於 Camel-cased 的屬性名稱則用 **-** 來連接

<div id="container">
    <input data-role="autocomplete"
        data-ignore-case="true"
        data-text-field="name"
        data-source="{data: [{name: 'John Doe'},{name: 'Jane Doe'}]}"
    />
</div>
<script>
    kendo.init($("#container"));
</script>

2. 事件

<div id="container">
    <input data-role="numerictextbox" data-change="cbFun" />
</div>
<script>
function cbFun(e) {
    // Handle the "change" event
}
kendo.init($("#container"));
</script>

3. 某些元件可綁定數據源(source)

<div id="container">
    <input data-role="autocomplete" data-source="{data:['One', 'Two']}" />
    <!--   or   -->
    <input data-role="autocomplete" data-source="['One', 'Two']" />
</div>
<script>
    kendo.init($("#container"));
</script>

資料可直接寫在 data-source 後面
或是使用全域變數

<div id="container">
    <input data-role="autocomplete" data-source="dataSource" />
</div>
<script>
var dataSource = new kendo.data.DataSource( {
    data: [ "One", "Two" ]
});
kendo.init($("#container"));
</script>

也可以用指定 DOM 的方式來建立，順便給予資料

<input id="autocomplete" />
<script>
    $("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
</script>

若有多個參數需要配置，可以用物件的方式來處理

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  height: 200,
  columns:[{}, {}],
  dataSource: {
      data: [{}, {}]
  }
});
</script>

如果要操作建立好的元素，可以用 **data()** 的方式來取得該對象實例，帶入的參數為元件的名稱。

var autocomplete = $("#autocomplete").data("kendoAutoComplete");

// 取得對象後即可使用該對象能夠操作的方法
autocomplete.value("Cherries");
var value = autocomplete.value();
alert(value); // Displays "Cherries"

而指定 DOM 產生的方式也可以綁定事件

function autocomplete_change() {
    // Handle the "change" event
}
$("#autocomplete").kendoAutoComplete({
    change: autocomplete_change
});

或是事後再透過 **bind** 來綁定

$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("change", cnFun);

#### 在 callback function 中取得觸發事件的元件對象
使用 ``e.sender`` 或是 ``this``

function autocomplete_change(e) {
    var autocomplete = e.sender;
    // or
    var autocomplete = this;
    var value = autocomplete.value();
    alert(value); // Displays the value of the AutoComplete widget
}
$("#autocomplete").kendoAutoComplete({
    change: autocomplete_change
});

### DataResource
:::info
Kendo 的數據源支持本地數據源（物件陣列），或者遠程數據源（XML，JSON，JSONP），支持 CRUD 操作，並支持排序，分頁，過濾，分組和集合等。
:::

#### 本地

var movies = [ {
      title: "Star Wars: A New Hope",
      year: 1977
   }, {
     title: "Star Wars: The Empire Strikes Back",
     year: 1980
   }
];
var localDataSource = new kendo.data.DataSource({
    data: movies
});

#### 遠端

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            // the remote service url
            url: "http://search.twitter.com/search.json",

            // JSONP is required for cross-domain AJAX
            dataType: "jsonp",

            // additional parameters sent to the remote service
            data: {
                q: "html5"
            }
        }
    },
    // describe the result format
    schema: {
        // the data which the data source will be bound to is in the "results" field
        data: "results"
    }
});