Using Chart in column of a Grid
Description
How can I use a Telerik UI for ASP.NET Core Chart in a column of a Grid?
Solution
- Declare the Telerik UI for ASP.NET Core 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()
)
)
@addTagHelper *, Kendo.Mvc
@{
var categories = new string[] { "2000", "2001", "2002", "2003" };
}
<kendo-grid name="grid2" data-binding="onDataBinding" data-bound="onDataBound" >
<datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false" data="@Model">
<schema>
<model id="ID">
</model>
</schema>
</datasource>
<columns>
<column field="ID" title="ID"></column>
<column title="Chart Remote Data">
<column-template>
<kendo-chart name="ID">
<category-axis>
<category-axis-item categories="categories">
</category-axis-item>
</category-axis>
<series>
<series-item type="ChartSeriesType.Bar"
name="Example Series"
data="new double[] { 200, 450, 300, 125 }">
</series-item>
</series>
<chart-legend position="ChartLegendPosition.Bottom">
</chart-legend>
<chart-title text="Kendo Chart Example">
</chart-title>
</kendo-chart>
</column-template>
</column>
</columns>
</kendo-grid>
<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.