Column template in kendo grid gets overwritten

Question

I have a kendo grid in cshtml view and I am trying to set a custom template for the Payments column, here is the code:

@model IEnumerable<Models.YearlyRow>

<div class="boxcenter">
    <div id="header">
        <h2>Title</h2>
    </div>
    <div id="kendo_grid">
    @(Html.Kendo()
    .Grid(Model)
    .Name("grid")
    .ToolBar(toolbar => toolbar.Excel())
    .Columns(columns =>
    {
        columns.Bound(c => c.Account.AccountName).Title("Account Name");
        columns.Bound(c => c.PlanName).Title("Plan Name");
        columns.Bound(c => c.Payments).Title("Payments").Template(
             @<text>
                <strong>@item.Payments.Count</strong>
             </text>
        );
    })
    .DataSource(datasource =>
        datasource.Ajax().ServerOperation(false)
    )
)
    </div>
</div>

And here is the YearlyRow Model:

public class YearlyRow
    {
        public Account Account { get; set; }
        public string PlanName { get; set; }
        public List<Payment> Payments { get; set; }
        public YearlyRow()
        {
            Payments = new List<Payment>();
        }
    }

The Payments column should display all the Payment records in a custom fashion not yet implemented and is just displaying the Payment Count for the moment.

The problem is that the Count is displayed very briefly and then replaced by "[Object object]" which seems to be returned by Payments.ToString(). How to avoid this behaviour? I just to display what I specified in the Template.

Answer 1

You are using Ajax binding so you need a client template:

columns.Bound(c => c.Payments).Title("Payments")
       .ClientTemplate(@"<text><strong>@item.Payments.Count</strong></text>");