Using Chart in column of a Grid
Description
How can I use a Telerik UI for ASP.NET MVC Chart in a column of a Grid?
Solution
- Declare the Telerik UI for ASP.NET MVC Grid.
- Use column
Templatesfor the columns of the Grid. - Add the declarations for the Charts in the Templates.
- Use the
DataBindingandDataBoundEvents of the Grid. - In the Event handlers, use the
destroyandevalmethods to render the Charts.
@model IEnumerable<ViewModel>
@(Html.Kendo().Grid<ViewModel>(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(v => v.ID);
columns.Template(@<text>
@(Html.Kendo().Chart<ChartItem>()
.Name("chart_#=ID#")
.SeriesDefaults(defaults => defaults.Column().Stack(true))
.DataSource(dataSource => dataSource
.Read(read => read.Action("ReadChartData", "Home").Data("function() { return { id: #=ID# }; }"))
)
.Series(series =>
{
series.Column(s => s.Value).CategoryField("Category");
series.Column(s => s.Value1).CategoryField("Category");
})
.Tooltip(tooltip => tooltip.Template("\\#: category \\# - \\#: value \\#").Visible(true))
.ToClientTemplate())
</text>).Title("Chart Remote Data");
columns.Template(@<text>
@(Html.Kendo().Chart<ChartItem>()
.Name("local_#=ID#")
.HtmlAttributes(new { @class = "chart-local" })
.SeriesDefaults(defaults => defaults.Column().Stack(true))
.Series(series =>
{
series.Column(s => s.Value).CategoryField("Category");
series.Column(s => s.Value1).CategoryField("Category");
})
.ToClientTemplate())
</text>).Title("Chart Local Data");
})
.Events(e => e.DataBinding("onDataBinding").DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
)
)
<script>
function onDataBinding() {
kendo.destroy(this.tbody);
}
function onDataBound() {
var grid = this;
grid.tbody.find("script").each(function () {
eval($(this).html());
});
$(function () {
grid.tbody.children().each(function () {
var item = grid.dataItem(this);
$(this).find(".chart-local").data("kendoChart").dataSource.data(item.ChartData);
});
});
}
</script>
<style>
#grid .k-chart {
height: 150px;
}
</style>
For the complete implementation of the suggested approach refer to the project on how to use a Chart in the ClientTemplate of a Grid column and bind the Chart based on the row data.