Sparkline chart in a grid column

[Eliezer]

I am trying to put a sparkline bullet chart in one column of my grid, and I can't figure out how to pass in the data that is currently in my grid. Do you have an example of using a sparkline in a grid in this manner?

Here is what I currently have. However, 1) I had to hardcode the data as an example, since I have not yet figured out how to pass in the data, and 2) it doesn't work, as it's complaining there is a runtime error of an Invalid template

@(Html.Kendo().Grid<LabResult>(Model.LabResults)
    .Name("grLabResult")
    .Pageable()
    .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
    .Columns(columns => {
        columns.Bound(a => a.Name);
        columns.Bound(a => a.Value).ClientTemplate("#= Value # #= Unit #");
        columns.Bound(a => a.Range);
        columns.Bound(a => a.Unit).Visible(false);
        columns.Bound(a => a.MaxValue).ClientTemplate(
            Html.Kendo().Sparkline()
            .Name("varSpark_#=LabResultId#")
            .Type(SparklineType.Bullet)
            .Series( series => series.Bullet(new double[]{70}))
            .ValueAxis(axis => axis
                .Numeric()
                .Min(25)
                .Max(75)
                .PlotBands(bands =>
                    {
                        bands.Add().From(0).To(25).Color("#2890cc").Opacity(0.6);
                        bands.Add().From(25).To(75).Color("#2890cc").Opacity(0.8);
                        bands.Add().From(75).To(100).Color("#2890cc").Opacity(0.6);
                    })
                )
            .ToClientTemplate()
            .ToHtmlString()
        );
        })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(a => a.LabResultId);
        })
        .Events(events => events.Error("error_handler"))
        .Sort(sorting => sorting.Add("Name"))
    )
)

This was my attempt to pass in the data, which failed:

.Series( series => series.Bullet(new double[]{Double.Parse("#=Value#")}))
.ValueAxis(axis => axis
            .Numeric()
            .Min(Double.Parse("#=MinValue#"))
            .Max(Double.Parse("#=MaxValue#"))
            .PlotBands(bands =>
            {
                bands.Add().From(0).To(Double.Parse("#=MinValue#")).Color("#2890cc").Opacity(0.6);
                bands.Add().From(Double.Parse("#=MinValue#")).To(Double.Parse("#=MaxValue#")).Color("#2890cc").Opacity(0.8);
                bands.Add().From(Double.Parse("#=MaxValue#")).To(100).Color("#2890cc").Opacity(0.6);
            })
            )

Thanks for your help!

[Petur Subev]

Hello Eliezer,

I posted a reply in the support ticket that you opened. For reference I will paste it here.

Feel free to continue our conversation here or in the support ticket that you opened.

-------------------------------------------------------------------------------------------------------------------------


Using the Kendo MVC wrappers wrappers has its limitations - you cannot create the chart dynamically based on the data in the Grid.
If you change the Chart widget to be initialized with JavaScript you can manage to achieve your goal. 

Basically the idea is to use the dataItem method and the dataBound event  of the Grid to retrieve the record for a specific record and use it to pass the data for the chart widget.

To demonstrate what I mean please check the following demo I created:

http://jsbin.com/oletef/7/edit


Kind Regards,
Petur Subev
the Telerik team

[Nick Gerne]

How would you do this in the MVC wrapper version?

[Petur Subev]

Hello,

As I explicitly covered in my previous post this is not possible with the MVC wrappers.

Kind Regards,
Petur Subev
Telerik

[Will]

Is this still not possible with the Kendo helpers?

I've tried it with a client template and javascript, returning the html of the chart, but the lines on my chart are missing.

[Will]

What about a Template rather than ClientTemplate?

I tried something like: 
Html.Kendo().Chart<ForecastProduction>(@item.ForecastProductions)

[Nikolay Rusev]

Hello Will,

 

As my colleague Peter Subev explained you could created chart or any other widget inside column template. See the following article - How do I use a Kendo UI widget inside a Grid client column template?

 

However you will not be able to dynamically initialize, as this was the original question in this thread., these widgets. They are defined on server and the column templates are initialized on client while the Grid widget is initialized. Thus if you need to create them based on the data in the row in which they reside, you should be using JavaScript for their initialization.

 

Regards,
Nikolay Rusev
Telerik