KendoUI Grid內顯示圖表

Question

我想在KendoUI網格內顯示KendoUI DataViz網格（在Kendo網格內顯示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 #" 
     } 
    }); 
} 

Answer 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 #" 
      } 
     }); 
    }); 

}