Add a sparkline column to a grid

5 posts, 2 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 10 Apr 2013 Link to this post

    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
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 12 Apr 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 15 Apr 2013 Link to this post

    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")
            )
            )
             
       
           )

  5. Ric
    Ric avatar
    5 posts
    Member since:
    Sep 2015

    Posted 04 Sep 2015 Link to this post

    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?
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 08 Sep 2015 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready