Kendo Grid Template with JQuery sparklines

Question

Does anyone have an example of how to integrate the JQuery Sparklines plugin into the Kendo Grid template?

JQuery Sparklines

I would think this is rather simple to do, but every time I do something like: template:<span class="inlinebar">75,25,0,100</span> only the values 75,25,0,100 are displayed in the grid, not the actual sparkline.

I would appreciate if someone could post a sample or solution. Thanks!

Code Example:

<script>
$('.inlinebar').sparkline('html', {type: 'bullet'});    
$(document).ready(function() {                                              
        $("#grid").hide();

        var grid = $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "/Services/testService",
                            dataType: "json",
                            type: "GET",
                            data: {                                
                            }
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                field1: {type: "number"},
                                field2: {type: "number"},
                                field3: {type: "number"}
                            }
                        }                
                    },
                    pageSize: 15
                },
                selectable:"cell",
                toolbar: kendo.template($("#template").html()), 
                height: 350,                
        filterable: true,        
        scrollable: true,
        sortable: true,                
        pageable: true,
                columns: [
                    {field: "field1", title: "Field 1"},
                    {field: "field2", title: "Field 2", template:'<span class="inlinebar">75,25,0,100</span>'},
                    {field: "field3", title: "Field 3"}
                    ]                          
                    });

Answer 1

There are a couple problems with your code.

1. $('inlinebar').sparkline('html', {type: 'bullet'}); you are not using the correct jQuery selector for class (missing . in front of inlinebar)
2. Since you're loading your data via ajax, sparkline executes before your Kendo UI grid ever had a chance to initialize, hence how it is now it will never work. You need to execute sparkline code inside Kendo's dataBound event (see here http://docs.kendoui.com/api/web/grid#events). That way the data and your span is there by the time sparkline executes.