带有 Kendo UI 网格的列中的部分视图答案

【问题标题】：Partial View in a column with Kendo UI grid带有 Kendo UI 网格的列中的部分视图
【发布时间】：2014-05-07 19:37:39
【问题描述】：

我想在 Kendo UI 网格单元格中显示部分视图。

例如，我想象它是这样的（我知道它不起作用）：

@(Html.Kendo().Grid<ViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.Id);
        columns.Bound(x => x.Name);
        columns.Bound(x => x.Field1);
        columns.Template(@<text></text>)
            .ClientTemplate(
                "<div>'" + Html.Partial("_MyPartialView", x.SubViewModel) + "</div>");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(x => x.Id))
        .Read(read => read.Action("Read", "Home"))
    )
)

我发现我可以使用 jQuery 来实现，它会呈现对 Action Method 的调用。但是有没有最简单的方法呢？

提前致谢。

【问题讨论】：

你想在单元格中渲染什么？我无法想象在单元格中渲染局部视图是最好的方法。
我正在尝试从我的原始视图模型中渲染一些子属性。它看起来像是可以着色或不着色的日期列表。
我一直在尝试做一些非常相似的事情但失败了。据我所知，剑道网格只喜欢平面数据。我能想到的唯一方法是创建一个子网格。我知道这是不久前发布的，希望您找到解决方案
对此有什么好处吗？我想我也想做同样的事情。
遗憾的是，目前还没有实际的 Kendo UI 版本。

标签： jquery asp.net-mvc kendo-ui kendo-asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

我使用 ClientRowTemplate 来实现与上述类似的功能。

查看此文档：http://demos.telerik.com/aspnet-mvc/grid/rowtemplate

基本上我在局部视图中定义我的 Row 模板，然后像这样渲染局部：

@(Html.Kendo().Grid(Model).Name("usersManageGrid")
          .Columns(columns =>
          {
              columns.Bound(c => c.LoginId).Visible(false);
              columns.Bound(c => c.FullName).Title("Name").Width(120);      
              columns.Bound(c => c.Email).Title("Username");
          }).ClientRowTemplate(Html.Partial("_TestPartial").ToHtmlString()))

您仍然可以指定并绑定到文档显示的其他列。如果您愿意，也可以照常传入您的子视图模型；

.ClientRowTemplate(Html.Partial("_TestPartial",x.SubViewModel).ToHtmlString())

包含行模板的局部视图如下所示：

<tr data-uid='#: LoginId #'>
    <td>
       <span class='description'><b>Name</b> : #: FullName# </span>
    </td>
    <td>
      @Html.Partial("_Test2Partial")
    </td>
</tr>

然后你会看到我为第二列渲染了另一个部分视图，其中只是包含了这个：

<span style="color:purple;"><b>Email</b> : #: Email# </span>

最终结果如下所示：

【讨论】：