Kendo Grid 客户端详细信息模板本地数据绑定答案

【问题标题】：Kendo Grid Client Detail Template Local Data BindingKendo Grid 客户端详细信息模板本地数据绑定
【发布时间】：2015-05-03 09:37:35
【问题描述】：

我有一个带有 Kendo ListView 的 Kendo Grid 用于其客户端详细信息模板。这是网格：

@(Html.Kendo().Grid<ITS.BusinessModel.TaskManager.TaskItem>()
        .Name("grdPackage" + Model + "sTasks")
        .Columns(columns =>
        {
            columns.Bound(taskModel => taskModel.WorkflowInstanceId);
            columns.Bound(taskModel => taskModel.WorkflowInstanceName);
            columns.Bound(taskModel => taskModel.Name).ClientTemplate("<a onclick='openTasksForm(#= ID#)' > #= Name # </a>");
        }
        .ClientDetailTemplateId("TaskSumeriesListViewTemplate")
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(true)
            .Model(model => model.Id(Task => Task.ID))
            .Read(read => read.Action("TaskItemsList_Read", "Task", new { packageGroupID = Model, packageType = (Model == -2) ? 0 : (Model == -1) ? 1 : 2 }))
        )
)

这是客户端模板：

<script type="text/x-kendo-tmpl" id="TaskSumeriesListViewTemplate">

    @(Html.Kendo().ListView<ITS.BusinessModel.TaskManager.WorkflowInstanceSummaryItem>("#=TaskSumaries#")
        .Name("listViewPackage")
        .TagName("div")
        .ClientTemplateId("SummeriesTemplate")
        .ToClientTemplate()
        )
</script>

这是 ListView 的模板：

<script type="text/x-kendo-tmpl" id="SummeriesTemplate">
    <div>
        #=ColumnName# : #=ColumnValue#
    </div>
</script>

Grid 读取的每个TaskItem 都有一个TaskSumariesList，它是一个List。我想在 ListView 的网格客户端详细信息中使用此列表。我该怎么做？

【问题讨论】：

标签： data-binding kendo-ui kendo-grid kendo-listview

【解决方案1】：

在您的网格事件调用中，使用如下内容：

.Events(e => e.DetailInit("detailInit")

然后，你可以这样做：

function detailInit(e) {
    var list= $("#listViewPackage").data("kendoGrid");      

    list.dataSource.data(e.data.TaskSumariesList) 
}

将会发生的情况是，列表在展开时将填充适当的数据。

您可能需要为您的列表名称执行以下操作：

.Name("listViewPackage#=WorkflowInstanceId#")

这样，您可以确保您拥有正确列表的正确数据：

function detailInit(e) {
    var list= $("#listViewPackage" + e.data.WorkflowInstanceId).data("kendoGrid");      

    list.dataSource.data(e.data.TaskSumariesList) 
}

【讨论】：

谢谢你的回答肖恩我不明白你的方式。我想为 GridView 中的每个项目打开一个 ListView。在我的模型中，我拥有我想要的一切。对于我在 GridView 中显示的模型中的每个项目，我都有一个详细信息列表。对于求解，我必须将每个 GridView 项目的每个 detailsItem 发布到服务器，然后再次将其发布到客户端以在 GridViewDetail 中打开 ListView。但我想不发帖就这样做。

【解决方案2】：

其实肖恩是对的。更多信息请参考： Kendo UI Grid: Detail Template Binding

您还可以将 DataSource(ds => ds.Ajax()) 添加到您的第二个网格中。

@(Html.Kendo().ListView<ITS.BusinessModel.TaskManager.WorkflowInstanceSummaryItem>("#=TaskSumaries#")
        .Name("listViewPackage")
        .TagName("div")
        .ClientTemplateId("SummeriesTemplate")
        .DataSource(ds => ds.Ajax()) 
        .ToClientTemplate()
        )

似乎客户端模板不适用于本地绑定网格。

【讨论】：