我正在尝试创建一个嵌套的网格,该网格将获取数据并填充为2个网格(父级和子级)。
类似于此http://dojo.telerik.com/UqURE
但最终应该看起来像这样https://photos.app.goo.gl/X6fcZ79779bgjrRZ8
答案 0 :(得分:1)
您需要在视图中具有两个kendo网格和两个javaScript方法来获取其他数据az方法参数:
父网格及其子网格应如下所示:
<div class="row">
<div class="col-md-12">
@(Html.Kendo().Grid<ProjectName.Models.ViewModel.TasksStaticViewModel>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadActionName", "ControllerName").Data("additionalData"))
)
.Columns(columns =>
{
columns.Bound(c => c.Column1).HtmlAttributes(new { style = "text-align:center; overflow: hidden; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).Width(130);
columns.Bound(c => c.Column2).HtmlAttributes(new { style = "text-align:center; overflow: hidden; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).Width(135);
})
.ToolBar(tool => tool.Template(
@"<a id='lnkexportExcel' class='k-button k-button-icontext ' href='/Report/Tasks'><span></span>ExportToExcel</a>))
.Pageable()
.AutoBind(false)
.Sortable()
.Scrollable(s => s.Enabled(true))
.ClientDetailTemplateId("template")
)
</div>
<div class="col-md-12">
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<ProjectName.Models.ViewModel.MyViewModel>()
.Name("grid_#=Id#")
.Columns(columns =>
{
columns.Bound(c => c.SubColumn1).HtmlAttributes(new { style = "text-align:center; overflow: hidden; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).Width(100);
columns.Bound(c => c.SubColumn2).HtmlAttributes(new { style = "text-align:center; overflow: hidden; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).Width(100);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadActionName", "ControllerName",
new { AgentSelectedId = "#=AgentId#", TaskHeaderSelectedId = "#=TaskHeaderId#"})
.Data("additionalData2"))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
</div>
以及js JavaScript代码的另外两个数据:
function additionalData() {
return someModel;}
function additionalData2() {
return someModel;}
如果有用,请检查它是否可以作为答案