mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 09:25:40 +00:00
110 lines
4.2 KiB
HTML
Executable File
110 lines
4.2 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Cascading DropDownList</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="demo-section k-content">
|
|
|
|
<h4>Categories:</h4>
|
|
<input id="categories" style="width: 100%;" />
|
|
|
|
<h4 style="margin-top: 2em;">Products:</h4>
|
|
<input id="products" disabled="disabled" style="width: 100%;" />
|
|
|
|
<h4 style="margin-top: 2em;">Orders:</h4>
|
|
<input id="orders" disabled="disabled" style="width: 100%;" />
|
|
|
|
<button class="k-button k-primary" id="get" style="margin-top: 2em; float: right;">View Order</button>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.k-readonly
|
|
{
|
|
color: gray;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var categories = $("#categories").kendoDropDownList({
|
|
optionLabel: "Select category...",
|
|
dataTextField: "CategoryName",
|
|
dataValueField: "CategoryID",
|
|
dataSource: {
|
|
type: "odata",
|
|
serverFiltering: true,
|
|
transport: {
|
|
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
|
|
}
|
|
}
|
|
}).data("kendoDropDownList");
|
|
|
|
var products = $("#products").kendoDropDownList({
|
|
autoBind: false,
|
|
cascadeFrom: "categories",
|
|
optionLabel: "Select product...",
|
|
dataTextField: "ProductName",
|
|
dataValueField: "ProductID",
|
|
dataSource: {
|
|
type: "odata",
|
|
serverFiltering: true,
|
|
transport: {
|
|
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
|
|
}
|
|
}
|
|
}).data("kendoDropDownList");
|
|
|
|
var orders = $("#orders").kendoDropDownList({
|
|
autoBind: false,
|
|
cascadeFrom: "products",
|
|
optionLabel: "Select order...",
|
|
dataTextField: "Order.ShipCity",
|
|
dataValueField: "OrderID",
|
|
dataSource: {
|
|
type: "odata",
|
|
serverFiltering: true,
|
|
transport: {
|
|
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
|
|
}
|
|
}
|
|
}).data("kendoDropDownList");
|
|
|
|
$("#get").click(function() {
|
|
var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
|
|
productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
|
|
orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";
|
|
|
|
alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|