Kendo UI Grid - issue creating data-id row attributes - asp.net-mvc

Question

I'm working on a Asp.Net MVC 5 Web Pages project, where one of the partial views generates an Html table. It of course mixes the Razor syntax in with Html.
Now I need to implement this table as a Kendo UI Grid, where the HTML table is used as the DataSource (see this as a reference - http://demos.telerik.com/kendo-ui/grid/from-table).
Great so far - and yes, my new Kendo grid does in fact render nicely.
ex/
Only problem is that the Kendo Grid now seems to be overwriting the <tr> data-id attributes I'm injecting into each row.
So how would I turn this into a Kendo rowTemplate ?
Before implementing the Kendo Grid, here is the Html table as rendered:
<table id="summary-table" class="table table-hover table-extra-condensed">
<tr data-id="80" data-nodes="2008-08-08" data-title="EUREX IRS" data-subtitle="All">
<td class="hidden">80</td>
<td><i class="fa fa-chevron-right"></i> EUREX IRS</td>
<td class="text-right">USD</td>
</tr>
<tr data-id="50" data-nodes="2008-08-08" data-title="EUREX IRS" data-subtitle="IRS-EUR">
<td class="hidden">50</td>
<td><span class="indent">IRS-EUR</span></td>
<td class="text-right">USD</td>
</tr>
</tbody>
</table>
Here is the new table, now rendered as a Kendo grid (Kendo added data-uid but I lost my custom 'data-' row attribs):
<table id="summary-grid" class="table table-hover table-extra-condensed" data-role="grid" role="grid">
<tr data-uid="fcc1ffab-f1e7-4ea4-9b79-7c4149bbbfa3" role="row">
<td style="display:none" role="gridcell">80</td>
<td role="gridcell"><i class="fa fa-chevron-right"></i> EUREX IRS</td>
<td role="gridcell">USD</td>
</tr>
</table>
Here's the partial.cshtml file snippet:
#model IEnumerable<WhatifSummaryViewModel>
#{
string guid = Guid.NewGuid().ToString();
}
<table id="summary-grid" class="table table-hover table-extra-condensed">
<thead>
<tr>
<th data-field="id" hidden class="hidden">Id</th>
<th data-field="product">#Settings.Whatif.SummaryPortfolioName1 - #Settings.Whatif.SummaryPortfolioName2</th>
<th data-field="currency" class="text-right">Currency</th>
<th data-field="margin" class="text-right">#Settings.Whatif.SummaryCurrentExposureName</th>
<th data-field="wi" class="text-right hidden-xs">What-If</th>
<th data-field="impact" class="text-right">Impact</th>
<th data-field="chart" class="text-center hidden-xs">View</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count(); ++i)
{
string title;
if (Model.ElementAt(i).SubTitle.Equals("ALL", StringComparison.OrdinalIgnoreCase))
{
title = "<i class='fa fa-chevron-right'></i> " + Model.ElementAt(i).Title;
}
else
{
title = "<span class='indent'>" + Model.ElementAt(i).SubTitle + "</span>";
}
<tr data-id="#Model.ElementAt(i).PortfolioId" data-nodes="#String.Join(",", Model.ElementAt(i).NodeDates)" data-title="#Model.ElementAt(i).Title" data-subtitle="#Model.ElementAt(i).SubTitle">
<td class="hidden">#Model.ElementAt(i).PortfolioId</td>
<td>#Html.Raw(title)</td>
<td class="text-right">#Model.ElementAt(i).Currency</td>
<td class="text-right">#String.Format("{0:#,0}", Model.ElementAt(i).Utilisation)</td>
<td class="text-right hidden-xs">#(Model.ElementAt(i).WhatIfRun ? String.Format("{0:#,0}", Model.ElementAt(i).WhatifExposure) : "")</td>
<td class="text-right">#(Model.ElementAt(i).WhatIfRun ? String.Format("{0:#,0}", Model.ElementAt(i).ImpactToExposure) : "")</td>
<td class="text-center actions hidden-xs"><i class="fa fa-bar-chart"></i></td>
</tr>
}
</tbody>
</table>
and finally, the Kendo grid which is configured in my onReady javascript function:
(NOTE: the rowTemplate below is commented, and certainly does cause a scripting error if uncommented).
// Kendo UI grid
$("#summary-grid").kendoGrid({
resizable: true,
toolbar: ["pdf","excel"],
columns: [
{ field: "PortfolioId", hidden: true },
{ field: "title"},
{ field: "Currency", title: "Currency" },
{ field: "Utilisation", title: "Margin" },
{ field: "WhatifExposure", title: "What-if"},
{ field: "ImpactToExposure", title: "Impact" },
{ field: "Chart", title: "View" }
]
#*rowTemplate: '<tr data-uid="#= uid #" data-id="#= #Model.ElementAt(i).PortfolioId #" data-title="#= #" >'*#
});
In the end, I'd like to add my custom data- row attribs. I was thinking that the kendo template would work, but I can't figure it out in this Web Pages Razor context.
Help is appreciated...
Bob