New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Displaying Chart in a Column of a Grid

Environment

Product	Telerik UI for ASP.NET MVC Chart
Product Version	Created with version 2024.4.1112

Description

How can I initialize a Chart into a specified Grid column?

Solution

Declare the Grid component.
Use the Template() option of the Grid column to define the Charts.
Handle the DataBinding and DataBound events of the Grid.
Within the event handlers, call the destroy method and the jQuery eval method to render the Charts. By design, the script tags are not automatically evaluated inside the Grid column template, so the scripts must be evaluated manually in the DataBound event of the Grid..

Razor
    @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()
        )
    )
JavaScript
<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>
Html
  <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.

Displaying Chart in a Column of a Grid

Environment

Description

Solution

More ASP.NET MVC Chart Resources

See Also