Kendo grid not filled correctly

Question

HI,

 

Ive got the following gridview with totals.

However if I want to fill, the last two columns , its shows the results, but it is removing the totals. What am I doing wrong ?

 

 

here is my input ( gridview above) 

 

here is my code for the kendo gridview to show the other two colums

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h4>Organisatiebreed</h4>
        @(Html.Kendo().Grid<OrderLine>()
              .HtmlAttributes(new { @class = "table-responsive" })
              .Name("OrderLinesGrid")
              .Selectable(s => s.Enabled(false))
              .Reorderable(r => r.Columns(false))
              .Resizable(r => r.Columns(true))
              .Scrollable(s => s.Height("auto").Enabled(false))
              .Sortable(s => s.Enabled(false))
              .Pageable(p => p.Enabled(false))
              .Filterable(f => f.Enabled(false))
              .BindTo(Model.OrderLines.Where(x => x.LocationCode == null))
              .Columns(columns =>
              {
                  columns
                      .Bound(c => c.NrOfUnits);
                  columns
                      .Bound(c => c.ProductCode);
                  columns
                      .Bound(c => c.Description);
                  columns
                      .Bound(c => c.NrcPerUnit)
                      .Format("{0:C}")
                      .ClientFooterTemplate("Totaal: #=sum#");
                  columns
                      .Bound(c => c.MrcPerUnit)
                      .Format("{0:C}")
                      .ClientFooterTemplate("Totaal: #=sum#");
                  columns
                      .Template(f => string.Format("<div style=\"text-align: right\">€ {0:n2}</div>", f.NrOfUnits*f.NrcPerUnit))
                      //.Template(c => {}).ClientTemplate("#=calculateField(data)#")
                      .Title("Totaal per stuk");
                      //.ClientFooterTemplate("Totaal: #=sum#");
                  columns
                      .Template(f => string.Format("<div style=\"text-align: right\">€ {0:n2}</div>", f.NrOfUnits * f.MrcPerUnit))
                      .Title("Totaal per stuk per maand");
              }
              )
            // vanaf hier
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                    .Aggregates(aggregates =>
                    {

                        aggregates.Add(c => c.MrcPerUnit).Sum();
                        aggregates.Add(c => c.NrcPerUnit).Sum();
                    })
                    .Read(read => read.Action("Aggregates_Read", "Order").Data("getParameters"))
                )
        // tot hier

 however when I used the uncommenced code .Template(c => {}).ClientTemplate("#=calculateField(data)#")   and //.ClientFooterTemplate("Totaal: #=sum#");   , it is showing the result of the column but it has removed my totals...... ( see picture)

 

 

 Soo.. How can I fix this ??? or tell me what i'm doing wrong.

 

thnx guys .