Is it possible to add a Sparkline inside a ClientRowTemplate in a Grid?

[Nicklas]

I'm trying to add a column of sparklines inside a grid, using a ClientRowTemplate that is based on a partial view. So far, this is what I've got;
Index view (holding grid):

<div>
    @(Html.Kendo().Grid(Model.UnitDetails)
          .Name("Grid")
          .DataSource(ds => ds
              .Ajax()
              .Read(read => read.Action("Index", "Home"))
          )
          .HtmlAttributes(new { style = "height:430px;" })
          .Columns(columns =>
              {
                  columns.Bound(p => p.UnitContract.Name).Title("Unit");
                  columns.Bound(p => p.UnitContract.CurrentRun.Operation.WellContract.Location).Title("Site");
                  columns.Bound(p => p.UnitContract.CurrentRun.Operation.WellContract.Name).Title("Well");
                  columns.Bound(p => p.UnitContract.CurrentRun.Id).Title("Run");
                  columns.Bound(p => p.UnitContract.CurrentRun.RunTask).Title("Task");
                  columns.Bound(p => p.UnitContract.CurrentRun.Operation.Description).Title("Operation");
                  columns.Bound(p => p.UnitContract.Status.StatusText).Title("Status");
                  columns.Bound(p => p.UnitContract.CurrentRun.LatestWellLogEntry.Depth).Title("Depth (m)");
                  columns.Bound(p => p.UnitContract.CurrentRun.LatestWellLogEntry.Speed).Title("Speed (m/min)");
                  columns.Bound(p => p.UnitContract.CurrentRun.LatestWellLogEntry.Tension).Title("Weight (kg)");
                  columns.Bound(p => p.UnitContract.CurrentRun.Name);
                  columns.Template(p => { }).ClientTemplate(" ").Width(75);
              })
          .ClientRowTemplate(Html.Partial("_ClientRowTemplate", Model).ToHtmlString())
          .Pageable()
          .Scrollable(builder => builder.Height(250))
          .Sortable())
</div>

Next, I added a partial view, looking like this:

<tr>
    <td>#: UnitContract.Name#
    </td>
    <td>#: UnitContract.CurrentRun.Operation.WellContract.Location#
    </td>
    <td>#: UnitContract.CurrentRun.Operation.WellContract.Name#
    </td>
    <td>#: UnitContract.CurrentRun.Id#
    </td>
    <td>#: UnitContract.CurrentRun.RunTask#
    </td>
    <td>#: StatusMessage#
    </td>
    <td class='text-center'>
        <span class='label label-#:StatusColor #' style='width: 25px;'> </span>
    </td>
    <td>
        <div>
            @(Html.Kendo().Sparkline()
                  .Name("depth")
                  .Data(#: UnitContract.CurrentRun.LatestWellLogEntry.Speed#)
                  .Type(SparklineType.Bar)
                  .Tooltip(false)
                  .ValueAxis(axis => axis.Numeric().Max(5000).Min(-5000).Visible(false))
                  .CategoryAxis(c =>
                                c.MajorTicks(ticks => ticks.Visible(false))
                                 .Visible(true))
                  .ChartArea(ca => ca.Background("transparent"))
                  .HtmlAttributes(new { style = "width: 75px;" }))
        </div>
    </td>
    <td>
        <div>
            <!-- DataWiz Sparkline -->
        </div>
    </td>
    <td>
        <div>
            <!-- DataWiz Sparkline -->
        </div>
    </td>
    <td>#: UnitContract.CurrentRun.Name#
    </td>
    <td>
        <form method='POST' action='@Url.Content("~/UnitDetails/Index/")#: UnitContract.Id#'>
            <input type='submit' class='k-button' value='Details' />
        </form>
    </td>


</tr>

I've tried several different approaches as far as the part with .Data(source) goes.
 Is there another way to go that lets me utilize the Sparkline inside a Grid, or is this combination not possible?

[Vladimir Iliev]

Hi Nicklas,

 
Basically current approach to render the data using KendoUI template syntax is not possible as the data will be rendered as string. Possible solutions are:

• Load the SparkLine data from remote source - for example you can pass the current record ID as additional parameter to the controller. In this scenario you should also manually execute the SparkLine scripts on the client side using the DataBound event of the Grid.  Please check the example below:

  @(Html.Kendo().Sparkline()
      //generate unique ID for each SparkLine
      .Name("spark#=OrderID#")
      //Send the model ID as additional parameter (OrderID in current case)
      .DataSource(d => d.Read(a => a.Action("ReadSparkLine", "Home").Data("{OrderID: #=OrderID#}")))

  //use the Grid DataBound event to execute the generated SparkLine scripts on the client side
  function onDataBound(e) {
      this.tbody.find("script").each(function () {
          eval($(this).html());
      })
  }

• Another option is to initialize the SparkLine using JavaScript and use the data from the model - please check the example below:  

  <tr>
      <td
          <!-- generate unique id for each SparkLine (render only span)-->
          <span id="spark#=OrderID#"></span>

  //use DataBound event to initialize the SparkLIne
  //from each rendered span element from the row template
  //using the data from the current model
  function onDataBound(e) {
      var data = this.dataSource.view();
      for (var i = 0; i < data.length; i++) {
          var element = $("#spark" + data[i].OrderID);
          element.kendoSparkline({
              type: "area",
              //OrderPriceChange field in the model contains array with data for the SparkLine
              data: data[i].OrderPriceChange
          })
      }
  }

    
        

Kind Regards,
Vladimir Iliev
Telerik