SparkLine in Kendo Grid

[CM]

Hello,

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.

[CM]

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); #
    # } #
</script>

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.

[Petur Subev]

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:

http://jsbin.com/oletef/7/edit?html,output

Regards,
Petur Subev
Telerik