2

我想在 KendoUI Grid 内显示一个 KendoUI DataViz 网格（在 Kendo Grid 内显示一个 Kendo 图表），我在这个问题上举步维艰。我在想我需要在网格的 Template 或 ClientTemplate 区域工作，但我什至无法显示最简单的控件。

这是我到目前为止的地方......

@(Html.Kendo().Grid<StructurePurchaseDTO>()
              .Name("someGrid")
              .Columns(c =>
                           {
                               c.Bound(x => x.Structure)
                                   .Groupable(true);                                   
                               c.Bound(x => x.DomesticRatingEffect)
                                   //.ClientTemplate("#=createChart(data)#"); 
                                   //.Template(@<text>$('#numericTemplate').html()</text>);                                       
                                   //.ClientTemplate("#=createChart(data)#");
                           })
               //....removed for brevity                 
              .DataSource(ds => ds
                                    .Ajax()
                                    .PageSize(10)
                                    .Events(e=>
                                                {
                                                    e.Change("Grid_Changed");
                                                })
                                    .Read(r => r.Action("GetData", "Home"))
                                    .Model(m=>m.Id(x =>x.SimulationStructureID))

              )
  )

//这直接来自 Telerik 

function createChart(data) {   //I added data b/c I will eventually need to wire this up to a DB
    $("#chart").kendoChart({
        title: {
            text: "Gross domestic product growth /GDP annual %/"
        },
        legend: {
            position: "top"
        },
        seriesDefaults: {
            type: "column"
        },
        series: [{
            name: "India",
            data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
        }, {
            name: "Russian Federation",
            data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
        }, {
            name: "Germany",
            data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
        }, {
            name: "World",
            data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
        }],
        valueAxis: {
            labels: {
                format: "{0}%"
            },
            line: {
                visible: false
            },
            axisCrossingValue: 0
        },
        categoryAxis: {
            categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
            line: {
                visible: false
            },
            labels: {
                padding: { top: 145 }
            }
        },
        tooltip: {
            visible: true,
            format: "{0}%",
            template: "#= series.name #: #= value #"
        }
    });
}
4

1 回答 1

1 
@(Html.Kendo().Grid<StructurePurchaseDTO>()
              .Name("someGrid")
              .Columns(c =>
                           {
                               c.Bound(x => x.Structure)
                                   .Groupable(true);
                               c.Bound(x => x.ResourceRequirements)
                                   .ClientTemplate("#=ResourceRequirementText(data)#")
                                   .Groupable(false);
                               c.Bound(x => x.DomesticRatingEffect)
                                   .ClientTemplate("<div class='chart' style='width: 200px; height: 200px;'></div>");
                           })
              .Pageable(p => p.Numeric(false)
                                 .ButtonCount(5)
                                 .Refresh(true)
                                 .Input(false)
                                 .Info(true)
                                 .Enabled(true)
              )
              .Events(e =>
                          {
                              e.DataBound("Grid_DataBound");
                          })
              .Reorderable(r => r.Columns(true))
              .Resizable(r => r.Columns(true))
              .Sortable()
              .Groupable()
              .DataSource(ds => ds
                                    .Ajax()
                                    .PageSize(5)
                                    .Events(e =>
                                                {
                                                    e.Change("Grid_Changed");
                                                })
                                    .Read(r => r.Action("GetStructuresWithGraphs", "Structure"))
                                    .Model(m => m.Id(x => x.SimulationStructureID))

              )
  )


function Grid_DataBound(e) {
    var data = this.dataSource.view();

    //this.tbody.find("script").each(function () {
    //    //debugger;
    //    eval($(this).html());
    //});

    //debugger;

    $('.chart').each(function () {

        var chart = $(this);

        chart.kendoChart({
            chartArea:{
                background: "transparent",

            },
            legend: {
                visible: false,
                position: "top"
            },
            seriesDefaults: {
                type: "column",
                stack: false
            },
            series: [{
                name: "Culture",
                data: [7],
                color: "lime"

            }, {
                name: "Education",
                data: [2],
                color: "#ff0000",
            }, {
                name: "Environment",
                data: [1],
            }, {
                name: "Health",
                data: [0],
                color: "red",
            }, {
                name: "Safety",
                data: [-5],
                color: "green",
            }, {
                name: "Welfare",
                data: [0],
            }],
            valueAxis: {
                labels: {
                    visible: false,
                    format: "{0}"
                },
                line: {
                    visible: false
                },
                majorTicks: {
                    color: "#000",
                    width: 0
                },
                majorGridLines: {
                    width: 0,
                },
                axisCrossingValue: 0,
            },
            categoryAxis: {
                line: {
                    visible: true
                },
                majorGridLines: {
                    width: 0,
                },
                majorTicks: {
                    visible: false,
                    //width: 0
                },
                labels: {

                }
            },
            tooltip: {
                visible: true,
                format: "{0}",
                template: "#= series.name #: #= value #"
            }
        });
    });

}
于 2013-10-17T23:09:37.467 回答