Kendo UI - Note

Kendo UI - Note

LAVI
  2023-07-07 2023-07-07 Created   2024-09-11 2024-09-11 Updated    

Kendo UI - Note

記錄了學習 Kendo UI 的筆記

head Setting

引用 Kendo 外部檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./css/kendo.common-material.min.css">
    <link rel="stylesheet" href="./css/kendo.material-main.min.css">
	<script src="./js/jquery.min.js"></script>
	<script src="./js/kendo.all.min.js"></script>
    <script src="./js/project.js"></script>
</head>
<body>    
</body>
</html>

Add Button

在 <body> 中新增 <button>

1
2
3
<body>
    <button id="myButton" class="k-primary">我的第一顆按鈕</button>
</body>

若想替 <button> 增加一些外觀，可以在 <script> 中加入一些腳本

利用 "#myButton" 讀取 <button> id 為 “myButton”，接著串接 .kendoButton()

1
2
3
<script>
    $("#myButton").kendoButton();
</script>

Add Grid

參考 Kendo UI 文件撰寫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
    <div id="grid"></div>
</body>
<script>
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                data: products,
                schema: {
                    model: {
                        fields: {
                            ProductName: { type: "string" },
                            UnitPrice: { type: "number" },
                            UnitsInStock: { type: "number" },
                            Discontinued: { type: "boolean" }
                        }
                    }
                },
                pageSize: 20
            },
            height: 550,
            scrollable: true,
            sortable: true,
            filterable: true,
            pageable: {
                input: true,
                numeric: false
            },
            columns: [
                "ProductName",
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                { field: "Discontinued", width: "130px" }
            ]
        });
    });
</script>

定義這個下拉式選單做什麼

1
2
3
4
5
6
7
$(document).ready(function () {
    var data = [
        { text: "Black", value: "1" },
        { text: "Orange", value: "2" },
        { text: "Grey", value: "3" }
    ];

接著將這個下拉式選單實作出來

dataTextField: “text”：為讀取顯示方才定義的 “text”
dataValueField: “value”：透過方才定義的 “value” 決定實際放置位置
dataSource: data：讀取資料來源

1
2
3
4
5
6
$("#color").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: data,
        index: 0
    });

完整程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <input id="color" value="1" />
</body>
<script>
    $(document).ready(function () {
        var data = [
            { text: "Black", value: "1" },
            { text: "Orange", value: "2" },
            { text: "Grey", value: "3" }
        ];
        
        $("#color").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            index: 0
        });
    });
</script>

因為使用 Kendo 套件就需要用官方指定的方式操作，所以要進入 Kendo DropDownList API 來得知如何取值和設定值

DatePicker

先定義這個選日小工具做甚麼

format：定義了年月日的表達形式
dateInput: true：當 dateInput 等於 true 的時候，定義了這個選日工具的年月日輸入不能寫不合法字元

1
2
3
4
5
6
$(document).ready(function () {
    $("#datepicker").kendoDatePicker({
        format: "yyyy/MM/dd",
        dateInput: true
    });
});

完整程式碼：

1
2
3
4
5
6
7
8
9
10
11
<body>
    <input id="datepicker" />
</body>
<script>
    $(document).ready(function () {
        $("#datepicker").kendoDatePicker({
            format: "yyyy/MM/dd",
            dateInput: true
        });
    });
</script>

Reference

On this page
Kendo UI - Note
  1. Kendo UI - Note
    1. head Setting
    2. Add Button
    3. Add Grid
    4. DropDownList
    5. DatePicker
  2. Reference