SparkLine in Kendo Grid

3 posts, 0 answers
  1. CM
    CM avatar
    12 posts
    Member since:
    Nov 2012

    Posted 02 Dec 2014 Link to this post


    I have a Kendo grid connected to a DataSource. One of the data members of the DataSource is an array of integers and I'd like to set them in a grid cell in the row for the entity as a SparkLine.

    <div id="otdQaGrid"></div>
    <!-- JavaScript -->
    $(document).ready(function () {
      dash.grid = $("#otdQaGrid").kendoGrid({
        dataSource: {
          type: "json",
          transport: {
            read: {
              url: "/api/GetOtdAndQuality",
        columns: [{
        field: "CustomerName",
        title: "Customer",
        width: 200
      }, {
        field: "QualityAverage",
        title: "Avg. Quality"
      }, {
        field: "OtdAverage",
        title: "Avg. OTD"
      }, {
        field: "TotalParts",
        title: "# of Parts",
        width: 150
      }, {
        field: "MeetsOtd",
        title: "MeetsOtd"
      }, {
        field: "YtdQuality",
        title: "YTD Quality",
        template: "<span class='inlinespark'>#: YtdQuality #</span>"
        height: 550,
        dataBound: function (e) {

    You can see the 'YtdQuality' field. This is the array of integers. I'd like to make this array of 12 integers be the datasource for the SparkLine in each column. 

    Any idea on how to do this? I tried to make it a SparkLine in the dataBound function, but I was getting an error about the HTML template not working correctly. Without the function there it simply puts [Object object] in the cell for YtdQuality.
  2. CM
    CM avatar
    12 posts
    Member since:
    Nov 2012

    Posted 02 Dec 2014 in reply to CM Link to this post

    I have tried a column template as well:

    <script id="ytd-qa-sparkline-template" type="text/x-kendo-tmpl">
        <span id="#: uid #-spark"></span>
        # if (YtdQuality.length > 0) { #
        # var id = "\#" + uid + "-spark"; #
        # $(id).kendoSparkline(YtdQuality); #
        # } #

    This code runs, but doesn't create the SparkLine. When in the Chrome console if I grab the span div that I created in this template and create a SparkLine with an arbitrary array:

    $('#156c6b74-b266-4eaf-8581-2b01227905d9-spark').kendoSparkline([56, 57, 43, 22, 11]);

    It renders in the column. 

    I'm also sure that my YtdQuality variable is an array.
  3. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 04 Dec 2014 Link to this post

    Hello CM,

    Basically if you position another widget inside a column template, the most important thing to cover is to initialize those nested widgets when the dataBound event of the Grid is triggered. Also if you want to get reference to the demo associated with that row you need to use the dataItem method and pass the TR element to it in order to retrieve it.

    Here is an example which I assume you will find useful:,output

    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top