Question

我正在使用Kendo UI MVC

@(Html.Kendo().Chart<Admin.Models.SiteActivityDaily>()
        .Name("chart")
        .Legend(l => l
           .Position(ChartLegendPosition.Bottom)
        )
        .Tooltip(true)
        .DataSource(ds => ds.Read(read => read.Action("GetSiteActivity", "Site")))
        .CategoryAxis(a => a
            .Categories(model => model.SiteDescription)
            .MajorGridLines(lines => lines.Visible(false))
        )
        .Series(series =>
        {
            series.Bar(d => d.ActivityCount).Name("Today");
        })

    )

在单击每个栏时，是否可以以某种方式显示带有详细信息的剑道窗口，将变量“SiteID”传递给装有ajax的局部视图？

Answer 1

您可以使用kendo detailtemplate，但想要在窗口中显示详细信息。

因此，将详细信息模板包装在kendo窗口中。

http://demos.telerik.com/kendo-ui/grid/detailtemplate

Answer 2

您应该使用plotAreaClick事件来捕获点击的值。见Docs

    <div id="chart"></div>
    <script>
      function chart_plotAreaClick(e) {
        console.log(e.value);
        //Here u open kendo window with value parameter
      }

      var chart = $("#chart").data("kendoChart");
      chart.bind("plotAreaClick", chart_plotAreaClick);
    </script>

Answer 3

您需要处理SeriesClick event，然后将值传递给Kendo窗口。 Kendo Window执行的操作将返回需要显示的局部视图。

<script>
    function handleSeriesClick(e) {
        var wnd = $("#MyWindow").data("kendoWindow");
        wnd.refresh({
            url: "someUrl",
            data: { serieValue: e.value) }
        });
        wnd.bind("refresh", function () {
            wnd.center();
            wnd.open();
        });
    }
</script>

@(Html.Kendo().Chart<Admin.Models.SiteActivityDaily>()
    .Name("chart")
    .Legend(l => l
       .Position(ChartLegendPosition.Bottom)
    )
    .Tooltip(true)
    .DataSource(ds => ds.Read(read => read.Action("GetSiteActivity", "Site")))
    .CategoryAxis(a => a
        .Categories(model => model.SiteDescription)
        .MajorGridLines(lines => lines.Visible(false))
    )
    .Series(series =>
    {
        series.Bar(d => d.ActivityCount).Name("Today");
    })
    .Events(e => e.SeriesClick("handleSeriesClick"))
)

@(Html.Kendo().Window()
    .Name("MyWindow")
    .Visible(false)
)

从Kendo UI Chart中显示详细信息窗口

3 个答案: