Kendo Grid - Client Row Template Usage

Question

Here is the razor builds my grid:

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

But my last column is not rendered as expected. The data provides the necessary columns but the column is always empty. Why? How can I fix it?

Thanks in advance,

Because your last column is an empty column (ClientTemplate(" ")). — ataravati

ataravati ataravati · Accepted Answer · 2015-11-18T15:14:56

You don't need to use ClientRowTemplate. Use column's ClientTemplate instead, like this:

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

However, this is not how I would design my grid. There's too much information in your last column. I would use a Detail template, as demonstrated here, and move all the data in the last column to the Detail template.

UPDATE:

For server-binding grid, ClientTemplate doesn't work. You need to use server template, like this:

@(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 Grid - Client Row Template Usage

1 Answers