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

2 posts, 0 answers
  1. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 05 Jun 2013 Link to this post

    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?
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 07 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top