This is a migrated thread and some comments may be shown as answers.

Add a sparkline column to a grid

4 Answers 296 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 10 Apr 2013, 10:52 AM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 12 Apr 2013, 09:03 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 15 Apr 2013, 07:24 AM
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")
        )
        )
         
   
       )

0
Ric
Top achievements
Rank 1
answered on 04 Sep 2015, 04:43 PM
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?
0
Dimiter Madjarov
Telerik team
answered on 08 Sep 2015, 01:38 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Sparkline
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Daniel
Telerik team
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Ric
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Share this question
or