kendo grid mvc calculated column not formating

Question

MVC 5, Kendo 2017.2.504

I can't get a calculated column to format properly (to currency).

I've tried using a javascript function call in the ClientTemplate but the js function is never called.

   .ClientTemplate("#=formatCurrency(TotalAmount*Deductibility)#")

   function formatCurrency(value) {
    var result = kendo.toString(value, "c");
    return result;
  }

Also tried using kendo.toString directly:

  .ClientTemplate("#= kendo.toString(TotalAmount*Deductibility, 'C') #")

  .ClientTemplate("#= kendo.toString(TotalAmount*Deductibility, 'c') #")

Here's the grid definition (only showing column needed). One thing to note, the grid has expandable rows (defined in the DetailTemplate), the expandable rows use an ajax datasource but the outer grid does not. I think that is part of the issue, I'm using a ClientTemplate (in the outer grid) but the data source is not Ajax. Everything else about the grid is working as expected:

  Html.Kendo().Grid(Model)
              .Name("TaxClass")
              .Columns(columns =>
              {
                 ...
                columns.Template(c => c.TotalAmount * c.Deductibility).Title("Amount Deductible").ClientTemplate("#=formatCurrency(TotalAmount*Deductibility)#")
                            .HtmlAttributes(new {@class = "currency"}).Width(110);
                    })
             .DetailTemplate(
                 ...

             )
             .Filterable()
             .DataSource(dataSource => dataSource.Server())
             .Render();

         }

I have prepared a sample dojo for you Is this what you are after? dojo.telerik.com/IbUKI if this is what you want I will expand out a full answer for you. — David Shorthose
@DavidShorthose nice example, appreciate the dojo - very useful — Will Lopez

Steve Greene Steve Greene · Accepted Answer · 2017-07-11T19:33:01

My preferred way is to do the calc in the viewmodel, but you could do something like this:

columns.Template(c => { })
       .ClientTemplate("#= kendo.toString(deductibleAmount(data),'c')#")
       .HtmlAttributes(new {@class = "currency"}).Title("Amount Deductible").Width(110);

Then add the script:

<script type="text/javascript">
    //Passed data contains current row model
    function deductibleAmount(data) {
        return data.TotalAmount * data.Deductibility;
    }
</script>

kendo grid mvc calculated column not formating

1 Answers