使用Kendo UI網格的列中的局部視圖

Question

我想在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的調用。 但是，有最簡單的方法嗎？

提前致謝。

Answer 1

我使用ClientRowTemplate來實現與上述相似的功能。

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

基本上，我在局部視圖中定義行模板，然后像這樣渲染局部：

@(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>

最終結果如下所示：