Display chart inside KendoUI Grid - telerik

Question

I want to display a KendoUI DataViz grid inside of a KendoUI Grid (display a Kendo chart inside of the Kendo Grid) and I am floundering in the wind on this one. I'm thinking that I need to be working in either the Template or ClientTemplate area of the grid, but I can't even get the most simple of controls to display.
Here is where I am so far...
#(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))
)
)
//this comes direct from 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 #"
}
});
});
}