0

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"}
                    ]                          
                    });

n00begon
  • 3,503
  • 3
  • 29
  • 42
RizcoTech
  • 265
  • 1
  • 3
  • 12

1 Answers1

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.
Marek Karbarz
  • 28,956
  • 6
  • 53
  • 73
  • 1) Fixed that was fixed in the actual code. 2) OK, I see what you are saying, but I am not sure how to add the template to a specific column of the grid, in this event. Do you have any snippet or sample that would show that? Very close this would be very helpful. – RizcoTech Aug 27 '12 at 19:48
  • You don't need to change anything about your template setup, just move the sparkline init code (`$('inlinebar').sparkline('html', {type: 'bullet'});` inside the `dataBound` event. – Marek Karbarz Aug 27 '12 at 20:37