Displaying Chart in a Column of a Grid

Environment

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

Description

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

Solution

1. Declare the Grid component.
2. Use the Template() option of the Grid column to define the Charts.
3. Handle the DataBinding and DataBound events of the Grid.
4. 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()
        )
    )

Razor

    @addTagHelper *, Kendo.Mvc

    @model IEnumerable<TelerikAspNetCoreApp26.Models.ViewModel>
    
    <kendo-grid name="grid" on-data-binding="onDataBinding" on-data-bound="onDataBound">
        <columns>
            <column field="ID" title="ID"></column>
    
            <column title="Chart Remote Data">
                <column-template>
                    <kendo-chart name="remote${data.ID}">
                        <series-defaults type="ChartSeriesType.Column">
                            <stack enabled="true" />
                        </series-defaults>
                        <datasource>
                            <transport>
                                <read type="post" url="@Url.Action("ReadChartData", "Home", new {id = "${data.ID}"})" />
                            </transport>
                        </datasource>
                        <series>
                            <series-item type="ChartSeriesType.Column" field="Value" category-field="Category" name="Value Series"></series-item>
                            <series-item type="ChartSeriesType.Column" field="Value1" category-field="Category" name="Value1 Series"></series-item>
                        </series>
                        <tooltip template="#:category# - #: value #" visible="true"></tooltip>
                    </kendo-chart>
                </column-template>
            </column>
    
            <column title="Chart Local Data">
                <column-template>
                    <kendo-chart name="local${data.ID}" class="chart-local">
                        <series-defaults type="ChartSeriesType.Column">
                            <stack enabled="true" />
                        </series-defaults>
                        <series>
                            <series-item type="ChartSeriesType.Column" field="Value" category-field="Category" name="Value Series"></series-item>
                            <series-item type="ChartSeriesType.Column" field="Value1" category-field="Category" name="Value1 Series"></series-item>
                        </series>
                    </kendo-chart>
                </column-template>
            </column>
        </columns>
        <datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false" data="@Model">
            <schema>
                <model id="ID">
                </model>
            </schema>
        </datasource>
    </kendo-grid>

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. You can use this as a starting point to configure the same setup in an ASP.NET Core project.

More ASP.NET Core Chart Resources

• ASP.NET Core Chart Documentation

• ASP.NET Core Chart Demos

• ASP.NET Core Chart Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Chart for ASP.NET Core

• Telerik UI for ASP.NET Core Grid Templates

• Server-Side API Reference of the Chart for ASP.NET Core

• Server-Side TagHelper API Reference of the Chart for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base