Add a sparkline column to a grid

[AP]

I'm trying to add a sparkline column into a grid.
I've tried using a client template to do this, but it just shows [object HTMLScriptElement] in the column, rather than the chart.

I have a template:-

<script id="sparkTemplate" type="text/kendo-tmpl">

     @(Html.Kendo().Sparkline()
                        .Name("temp-log_#=ID#")
                        .Type(SparklineType.Column)
                        .Tooltip(tooltip => tooltip.Format("{0} °C"))

                        .Data(ViewBag.TemperatureData)
                        .ToClientTemplate()
               )

</script>

This doesn't yet have pass any parameters to the controller - but obviously this will be needed as well.
The grid is:-

        @(Html.Kendo().Grid<CMS_2013.Models.CMSSummaryOne>()
.Name("tabGrid")
.Columns(columns=>
    {columns.Bound(p=>p.DivisionName).Title("Division");
    columns.Bound(p => p.Specialty).Title("Specialty");
    columns.Bound(p => p.Activity).Title("Activity");
    columns.Bound(p => p.Plan).Title("Plan");
    columns.Bound(p => p.Variance).Title("Variance").ClientTemplate("#= formatNumber(Variance) #");
    columns.Bound(p => p.Variance).Title("Variance").ClientTemplate("#=sparkTemplate#");
    })



    .Pageable()
    .Sortable()
    .Selectable()

    .DataSource(dataSource=>dataSource
        .Ajax()
        .PageSize(5)

        .Read(read=>read.Action("GetTableData","Dashboard")
        .Data("chartFilter")
        )
        )


       )

What's the best way to embed a chart into a column - I specifically want the chart in a column and not a detail template - something a sparkline looks ideal for.

Thanks

[Daniel]

Hi,

You should include the template HTML to the column ClientTemplate(currently only a parameter with name "sparkTemplate" is evaluated). Also, the initialization script in the template will not be executed by default so you should use the dataBound event to find the scripts and evaluate them e.g.

columns.Bound(p => p.Variance).Title("Variance").ClientTemplate(
    Html.Kendo().Sparkline()
                        .Name("temp-log_#=ID#")
                        .Type(SparklineType.Column)
                        .Tooltip(tooltip => tooltip.Format("{0} °C"))
                        .Data(ViewBag.TemperatureData)
                        .ToClientTemplate()
                        .ToHtmlString()
);

function dataBound(e){
    this.tbody.find("script").each(function(){
        eval(this.innerHTML);
    });
}

Regards,
Daniel
the Telerik team

[AP]

Thanks,

I've got it working now:-

        @(Html.Kendo().Grid<CMS_2013.Models.CMSSummaryOne>()
.Name("tabGrid")
.Events(e=>e.DataBound("dataBound"))
.Columns(columns=>
    {columns.Bound(p=>p.DivisionName).Title("Division");
    columns.Bound(p => p.Specialty).Title("Specialty");
    columns.Bound(p => p.Activity).Title("Activity");
    columns.Bound(p => p.Plan).Title("Plan");
    columns.Bound(p => p.Variance).Title("Variance").ClientTemplate("#= formatNumber(Variance) #");

    columns.Bound(p => p.Variance).Title("Variance by Month").ClientTemplate(Html.Kendo().Sparkline()
                   .Name("varSpark_#=ID#")
                   .Type(SparklineType.Column)
                    .ChartArea(x => x.Background("Transparent"))
                   .Tooltip(t => t.Shared(false))

                  .DataSource(ds => ds
       .Read(r => r
           .Action("GetSparkBarData", "Dashboard", new { SpecCode = "#=SpecialtyCode#", PGroup = "#=PatGroup#", DivisionID = "#=DivisionID#" }))

           )
           .Series(s => s
               .Column("Variance").Color("Green").NegativeColor("Red")
       )





                   .ToClientTemplate()
                   .ToHtmlString());

    })

    .Events(e=>e
            .Change("onChange")
            )

    .Pageable()
    .Sortable()
    .Selectable()

    .DataSource(dataSource=>dataSource
        .Ajax()
        .PageSize(5)

        .Read(read=>read.Action("GetTableData","Dashboard")
        .Data("chartFilter")
        )
        )


       )

[Ric]

i've been trying to do the same, but haven't managed to get it working so far, even after reading the above posts.

i have this grid.

<div class="actualGrid">
    @(Html.Kendo().Grid<project.Models.Bench>()
        .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.name).Title("Bench").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(p => p.seatsCount).Title("Total Seats");
        columns.Bound(p => p.bookedSeats).Title("Booked Seats"); //i want to replace this
        columns.Bound(p => p.freeSeats).Title("Free Seats");     //and this
                                                                                                                                     //with a sparkline using its two int values

        columns.Command(command => { command.Custom("checkBench").Text("Check in").Click("ShowTimePopup"); }).Width(160).Title("Check in");

    })

    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable()
    .Sortable()
    .Scrollable()
            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .HtmlAttributes(new { style = "height:530px;" })
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.id))
    .Read(read => read.Action("GetBenches", "Home"))

    )
    )
</div>

 

 

i want to replace my last 2 columns with a sparkline ( pref. a pie one ) , and using p.bookedSeats and p.freeSeats values for the pie.

could anyone help?

[Dimiter Madjarov]

Hello Ric,

It is not clear what issue are you experiencing with the approach demonstrated in the second post. You should use the ClientTemplate() method of the Grid column builder to include the Pie Chart mark up and then evaluate the scripts in the dataBound event handler of the Grid.

Regards,
Dimiter Madjarov
Telerik