使用Kendo UI网格的列中的部分视图

时间:2014-05-07 19:37:39

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

我想在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方法。但有最简单的方法吗?

提前致谢。

1 个答案:

答案 0 :(得分: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>

最终结果如下:

enter image description here