Kendo Grid - 客户端行模板用法

时间:2015-11-18 12:51:26

标签: asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

这是剃刀构建我的网格:

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

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

提前致谢,

1 个答案:

答案 0 :(得分:2)

您不需要使用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))
)

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

<强>更新

对于服务器绑定网格,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))
)