我必须在页面上放置一个与不同数据源绑定的kendochart和一个kendo网格,即来自sql数据库的表。我需要更新kendogrt点击kendochart的不同部分。假设kendochart为用户A,B,C,D,E,F显示5部分然后点击任何部分,说B将为用户B更新kendo网格。请建议如何在html中实现此功能。
答案 0 :(得分:1)
请尝试使用以下代码段。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script type="text/javascript">
var data = [
{
"source": "Hydro",
"percentage": 22
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
var gridData = null;
$(document).ready(function () {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
},
seriesClick: function (e) {
gridData = getDummyData(e.category);
bindGrid();
}
});
});
function getDummyData(catval) {
var dataG = [
{
"ID": 1,
"Name": catval
},
{
"ID": 2,
"Name": catval
}
];
return dataG
}
function bindGrid() {
$("#grid").kendoGrid({
dataSource: {
data: gridData,
schema: {
model: {
fields: {
ID: { type: "number" },
Name: { type: "string" }
}
}
},
pageSize: 1
},
height: 430,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"ID",
{ field: "Name" }
]
});
}
</script>
</head>
<body>
<div>
<div id="chart">
</div>
<div id="grid">
</div>
</div>
</body>
</html>