Kendo 网格 - 客户端行模板用法

Question

这是构建我的网格的剃刀：

@(Html.Kendo().Grid(Model.ResultList)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Login).Title("Hesap No");
            columns.Bound(c => c.FullName).Title("İsim");
            columns.Bound(c => c.CreatedDate).Title("İşlem Tarihi");
            columns.Bound(c => c.Amount).Title("Tutar");
            columns.Bound(c => c.MonetaryUnit).Title("Kur");
            columns.Template(e => { }).ClientTemplate(" ").Title("Hesap Bilgileri");
        })
        .ClientRowTemplate(
           "<tr>" +
                "<td>" +
                    "<span>#: Login #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: FullName #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: CreatedDate #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: Amount #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: MonetaryUnit #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: AccountName #</span>" +
                    "<span>#: BankName #</span>" +
                    "<span>#: BranchOfficeName # </span>" +
                    "<span>#: BranchOfficeCode # </span>" +
                    "<span>#: AccountNumber # </span>" +
                    "<span>#: IBAN # </span>" +
                    "<span>#: AccountType # </span>" +
                "</td>" +
             "</tr>"
        )
        .ClientAltRowTemplate(
            "<tr class='k-alt'>" +
                "<td>" +
                    "<span>#: Login #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: FullName #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: CreatedDate #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: Amount #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: MonetaryUnit #</span>" +
                "</td>" +
                "<td>" +
                    "<span>#: AccountName #</span>" +
                    "<span>#: BankName #</span>" +
                    "<span>#: BranchOfficeName # </span>" +
                    "<span>#: BranchOfficeCode # </span>" +
                    "<span>#: AccountNumber # </span>" +
                    "<span>#: IBAN # </span>" +
                    "<span>#: AccountType # </span>" +
                "</td>" +
            "</tr>"
        )
        .HtmlAttributes(new { style = "height: 700px;" })
        .Scrollable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
    )

但是我的最后一列没有按预期呈现。数据提供了必要的列，但该列始终为空。为什么？我该如何解决？

提前致谢，

Answer 1

您不需要使用 ClientRowTemplate。改为使用列的 ClientTemplate，如下所示：

@(Html.Kendo().Grid(Model.ResultList)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Login).Title("Hesap No");
        columns.Bound(c => c.FullName).Title("İsim");
        columns.Bound(c => c.CreatedDate).Title("İşlem Tarihi");
        columns.Bound(c => c.Amount).Title("Tutar");
        columns.Bound(c => c.MonetaryUnit).Title("Kur");
        columns.Template(e => { }).ClientTemplate(
                "<span>#: AccountName #</span>" +
                "<span>#: BankName #</span>" +
                "<span>#: BranchOfficeName # </span>" +
                "<span>#: BranchOfficeCode # </span>" +
                "<span>#: AccountNumber # </span>" +
                "<span>#: IBAN # </span>" +
                "<span>#: AccountType # </span>" 
        ).Title("Hesap Bilgileri");
    })
    .HtmlAttributes(new { style = "height: 700px;" })
    .Scrollable()
    .Sortable()
    .Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5))
)

但是，这不是我设计网格的方式。您上一栏中的信息太多了。我会使用 Detail 模板，如 here 所示，并将最后一列中的所有数据移至 Detail 模板。

更新：

对于服务器绑定网格，ClientTemplate 不起作用。您需要使用服务器模板，如下所示：

@(Html.Kendo().Grid(Model.ResultList)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Login).Title("Hesap No");
        columns.Bound(c => c.FullName).Title("İsim");
        columns.Bound(c => c.CreatedDate).Title("İşlem Tarihi");
        columns.Bound(c => c.Amount).Title("Tutar");
        columns.Bound(c => c.MonetaryUnit).Title("Kur");
        columns.Template(
            @<text>
                <span>@item.AccountName</span>
                <span>@item.BankName</span>
                <span>@item.BranchOfficeName</span>
                <span>@item.BranchOfficeCode</span>
                <span>@item.AccountNumber</span>
                <span>@item.IBAN</span>
                <span>@item.AccountType</span>
            </text>
        ).Title("Hesap Bilgileri");    
    })
    .HtmlAttributes(new { style = "height: 700px;" })
    .Scrollable()
    .Sortable()
    .Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5))
)

Kendo 网格 - 客户端行模板用法

Kendo Grid - Client Row Template Usage

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc