Question

我正在处理Asp.Net MVC 5 Web Pages项目，其中一个部分视图生成一个Html表。它当然将Razor语法与Html混合在一起。

现在我需要将此表格实现为Kendo UI Grid，其中HTML表格用作DataSource（请参阅此作为参考 - http://demos.telerik.com/kendo-ui/grid/from-table）。

到目前为止很棒 - 是的，我的新Kendo网格确实很好地呈现了。

EX /

唯一的问题是剑道网格现在似乎正在覆盖我注入每行的<tr> data-id属性。

那我怎么把它变成剑道rowTemplate？

在实施Kendo Grid之前，这是呈现的Html表：

＆＃13;

<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>

＆＃13;

以下是新表，现在呈现为Kendo网格（Kendo添加了data-uid，但我丢失了我的自定义＆＃39;数据 - ＆＃39;行attribs）：

＆＃13;

<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>

＆＃13;

这是partial.cshtml文件摘要：

＆＃13;

@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"><a href="#" onclick="SU.showChart('@i');return false;"><i class="fa fa-bar-chart"></i></a></td>
            </tr>
        }
    </tbody>
</table>

＆＃13;

最后，在我的onReady javascript函数中配置的Kendo网格：（注意：下面的rowTemplate已被注释，如果取消注释，肯定会导致脚本错误。）

＆＃13;

// 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="#= #" >'*@
});

＆＃13;

最后，我想添加自定义的data-行attribs。我当时认为kendo template会起作用，但我无法在Web Pages Razor上下文中找到它。

感谢帮助...

鲍勃

Kendo UI Grid - 创建数据ID行属性的问题

0 个答案: