Kendo UI Grid 筆記

常用設定

        var grid = $("#mygrid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "/Home/data"
                    }
                }
            },
            columns: [
            { field: "Code", title: "代碼", width: "10%" },
            { field: "Name", title: "名稱", width: "50%" },
            { field: "", width: "40%", template: '<button class="k-button">按鈕一</button>' }
            ],
            height: $(document).height() - 200,
            toolbar: kendo.template($("#template").html()),
            pageable: true,
            selectable: "row",
            sortable: true,
            resizable: true,
            noRecords: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                pageSize: 50,
                buttonCount: 5,
                pageSizes: [5, 10, 20, 25, 50, 100, "all"],
                messages: {
                    itemsPerPage: "每頁列數"
                }
            },
            dataBinding: function () {
                record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
                record = isNaN(record) ? 0 : record;
            },
        }).data("kendoGrid");

<script type="text/x-kendo-template" id="template">
    <span style="position: relative; float: left;">
        <input id="inputtext" type="text" class="k-textbox" />
        <button id="btn" class="k-button" >新增</button>
    </span>
</script>

刷新清單

            grid.dataSource.read();
            grid.refresh();

讀取選擇資料

            var selectInfo = grid.dataItem(grid.select());

設定資料來源

            $.get(url, { id: id }, function (result) {
                grid.dataSource.data(result);
            });

or

        var dataSource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    url: "/Home/data",
                    type: "GET",
                    data: {
                        id: function () {
                            return selectInfo.id;
                    }
                }
            },
            schema: {
                model: {
                    fields: {
                        Code: { type: "string" },
                        Name: { type: "string" },
                    }
                }
            },
        });


        $("#mygrid").data("kendoGrid").dataSource.data(dataSource.data());

or

            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/Home/data",
                        complete: function (e) {
                            mygrid.dataSource.data(e.responseJSON);
                        }
                    }
                }
            });

            dataSource.read();