How to use a Telerik RadHtmlChart inside a Knockout foreach template

Question

When placing a Telerik RadHtmlChart inside a Knockout foreach template, I encounter "Uncaught TypeError: Cannot set property 'control' of undefined" JavaScript error, but only if I include runat="server" (which I'd like to include since I want my C# codebehind to configure the control).

<tbody data-bind="foreach: Measures">
    <td class="trendCell">
        <div class="sparklineWrapper">
            <telerik:RadHtmlChart data-bind="attr: { id: 'sparkline_' + $index }" runat="server" Layout="Sparkline" class="sparkline" />
        </div>
    </td>
    ...

Bottom line: how to include a Telerik RadHtmlChart inside a Knockout foreach template while still enabling codebehind access?

Thanks for your time.

Troy S.

p.s. Databinding the templated control is a whole other story which I have yet to tackle. I have previously placed 14 RadHtmlChart controls (each with a unique, static ID) onto a page and manually databound them each time a web api AJAX call is made, but I expect the templated control to be challenging.

RESOLUTION:

After a few hours of experimenting, I have successfully used the client-side (duh!) Kendo sparkline control inside the Knockout foreach template (instead of bashing my head against the wall by trying to use the server-side Telerik sparkline control). Works like a charm.

<div class="sparkline" data-bind="attr: { id: 'sparkline_' + $index() }"></div>
...
for (var i = 0; i < self.Items().length; i++) {
    // convert comma-delimited trend string into an int[] array
    var data = [ ];
    data.push.apply(data, self.Items([i].TrendData().split(",").map(Number));

    var id = "#sparkline_" + i;
    $(id).kendoSparkline(data);
}