常用設定
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();
