在 Kendo 网格详细信息模板中访问客户端数据
Accessing clientside data in a Kendo Grid Detail Template
给定 this UI for MVC example,我如何在客户端模板中引用 详细信息模板 的数据源中的项目?
例如,示例中的详细信息模板如下所示....
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=EmployeeID#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Orders").Content(@<text>
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Title("ID").Width(56);
columns.Bound(o => o.ShipCountry).Width(110);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.ShipName).Width(190);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);
items.Add().Text("Contact Information").Content(
"<div class='employee-details'>" +
"<ul>" +
"<li><label>Country:</label>#= Country #</li>" +
"<li><label>City:</label>#= City #</li>" +
"<li><label>Address:</label>#= Address #</li>" +
"<li><label>Home Phone:</label>#= HomePhone #</li>" +
"</ul>" +
"</div>"
);
})
.ToClientTemplate())
</script>
假设绑定到 ShipAddress 的列需要使用 ClientTemplate 显示,写作
columns.Bound(o => o.ShipAddress).ClientTemplate("#=ShipAddress#")
简单地导致 "Uncaught ReferenceError: ShipAddress is not defined"
那么,如何获取详细信息模板的数据源项?
显然,诀窍是 延迟 详细信息模板中的客户端模板的处理,方法是像这样用 '\' 引用 '#' 符号 ...
columns.Bound(o => o.ShipAddress).ClientTemplate("\#=ShipAddress\#")
给定 this UI for MVC example,我如何在客户端模板中引用 详细信息模板 的数据源中的项目?
例如,示例中的详细信息模板如下所示....
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=EmployeeID#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Orders").Content(@<text>
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Title("ID").Width(56);
columns.Bound(o => o.ShipCountry).Width(110);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.ShipName).Width(190);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);
items.Add().Text("Contact Information").Content(
"<div class='employee-details'>" +
"<ul>" +
"<li><label>Country:</label>#= Country #</li>" +
"<li><label>City:</label>#= City #</li>" +
"<li><label>Address:</label>#= Address #</li>" +
"<li><label>Home Phone:</label>#= HomePhone #</li>" +
"</ul>" +
"</div>"
);
})
.ToClientTemplate())
</script>
假设绑定到 ShipAddress 的列需要使用 ClientTemplate 显示,写作
columns.Bound(o => o.ShipAddress).ClientTemplate("#=ShipAddress#")
简单地导致 "Uncaught ReferenceError: ShipAddress is not defined"
那么,如何获取详细信息模板的数据源项?
显然,诀窍是 延迟 详细信息模板中的客户端模板的处理,方法是像这样用 '\' 引用 '#' 符号 ...
columns.Bound(o => o.ShipAddress).ClientTemplate("\#=ShipAddress\#")