mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 14:29:36 +00:00
106 lines
3.8 KiB
HTML
Executable File
106 lines
3.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MVVM</title>
|
|
<meta charset="utf-8">
|
|
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/jszip.min.js"></script>
|
|
<script src="../../js/kendo.all.min.js"></script>
|
|
<script src="../content/shared/js/console.js"></script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<a class="offline-button" href="../index.html">Back</a>
|
|
|
|
<div id="example">
|
|
<div class="configurator">
|
|
<div class="header">Configurator</div>
|
|
<div class="box-col">
|
|
<h4>Configuration</h4>
|
|
<div>
|
|
<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
|
|
</div>
|
|
</div>
|
|
<div class="box-col">
|
|
<h4>Information</h4>
|
|
Kendo UI Grid supports the
|
|
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
|
|
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and
|
|
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h4>Add or update a record</h4>
|
|
<div data-role="grid"
|
|
data-editable="true"
|
|
data-toolbar="['create', 'save']"
|
|
data-columns="[
|
|
{ 'field': 'ProductName', 'width': 270 },
|
|
{ 'field': 'UnitPrice' },
|
|
]"
|
|
data-bind="source: products,
|
|
visible: isVisible,
|
|
events: {
|
|
save: onSave
|
|
}"
|
|
style="height: 200px"></div>
|
|
</div>
|
|
|
|
<script>
|
|
var viewModel = kendo.observable({
|
|
isVisible: true,
|
|
onSave: function (e) {
|
|
kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
|
|
},
|
|
products: new kendo.data.DataSource({
|
|
schema: {
|
|
model: {
|
|
id: "ProductID",
|
|
fields: {
|
|
ProductName: { type: "string" },
|
|
UnitPrice: { type: "number" }
|
|
}
|
|
}
|
|
},
|
|
batch: true,
|
|
transport: {
|
|
read: {
|
|
url: "https://demos.telerik.com/kendo-ui/service/products",
|
|
dataType: "jsonp"
|
|
},
|
|
update: {
|
|
url: "https://demos.telerik.com/kendo-ui/service/products/update",
|
|
dataType: "jsonp"
|
|
},
|
|
create: {
|
|
url: "https://demos.telerik.com/kendo-ui/service/products/create",
|
|
dataType: "jsonp"
|
|
},
|
|
parameterMap: function (options, operation) {
|
|
if (operation !== "read" && options.models) {
|
|
return { models: kendo.stringify(options.models) };
|
|
}
|
|
}
|
|
}
|
|
})
|
|
});
|
|
kendo.bind($("#example"), viewModel);
|
|
</script>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|