如何集成KendoGrid和图表

Question

<input id="btnSearch" type="button" value="search" />
<div id="grid">


<div id="chart"/>

$("#chart").kendoChart({});
var gridResult = $("#grid").kendoGrid({
    dataSource: { data: database },
    columns: [
        {
            field: "id",
            title: "ID"
        },
        {
            field: "x",
            title: "x"
        },
        {
            field: "y"
        },
        {
            field: "z"
        },
        {
            field: "p"
        }
    ]
});

$("#btnSearch").click(function () {
    $filter = new Array();
    $x = $("#txtSearch").val();
    if ($x) {
        $filter.push({ field:"x", operator:"contains", value:$x});
    }
    gridResult.data("kendoGrid").dataSource.filter($filter);
});

现在基于我在文本框中搜索的值，它显示在网格中，而我在网格中得到的结果应更新为图表。我正在努力将剑道网格和图表集成到HTML5中。

我是HTML5的新手。

因为我需要过滤网格中的值，并且基于过滤后的值的图表应该更新。

Answer 1

首先初始化网格，您是否可以在文本框中显示搜索到的内容？您在网格中写入更改事件并获取值。在更改功能中，您可以初始化图表并进行更新。

Answer 2

您应该使用共享的数据源。请检查this demo。