我遵循了剑道的C#MVC(razor)http://demos.telerik.com/aspnet-mvc/grid/detailtemplate的例子 用于构建嵌套的'grid-tabstrip-grid'。这正是我的意思:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(120);
columns.Bound(e => e.LastName).Width(120);
columns.Bound(e => e.Country).Width(120);
columns.Bound(e => e.City).Width(120);
columns.Bound(e => e.Title);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
)
.Events(events => events.DataBound("dataBound"))
)
<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>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
<style scoped="scoped">
.k-detail-cell .k-tabstrip .k-content {
padding: 0.2em;
}
.employee-details ul
{
list-style:none;
font-style:italic;
margin: 15px;
padding: 0;
}
.employee-details ul li
{
margin: 0;
line-height: 1.7em;
}
.employee-details label
{
display:inline-block;
width:90px;
padding-right: 10px;
text-align: right;
font-style:normal;
font-weight:bold;
}
</style>
我的问题是当我尝试在第二个(最深)网格中为我的一个布尔值添加一个复选框时(参见上面的.Name(“grid _#= EmployeeID#”)网格)。它不会接受我发现的常见答案。我该怎么做:
columns.Bound(o => o.ShortListedFlag).Title("Short Listed").ClientTemplate("<input type='checkbox' #= ShortListedFlag ? checked='checked': '' # class='chkbx' />");