Kendo grid aggregate column

Question

I'm binding a kendo grid with 12 Columns (12 months), i want a last column that will be the aggregation of all the 12 months (total of the year).. i have this:

@(Html.Kendo().Grid<WebAnalise.Models.map_sel_fabr_prod>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.nameFabr).Visible(true).Width(50).Title("Fabr");
    columns.Bound(p => p.nameProd).Width(100).Title("Prod");
    columns.Bound(p => p.tot01).Width(30).Title("Jan");
    columns.Bound(p => p.tot02).Width(30).Title("Fev");
    columns.Bound(p => p.tot03).Width(30).Title("Mar");
    columns.Bound(p => p.tot04).Width(30).Title("Abr");
    columns.Bound(p => p.tot05).Width(30).Title("Mai");
    columns.Bound(p => p.tot06).Width(30).Title("Jun");
    columns.Bound(p => p.tot07).Width(30).Title("Jul");
    columns.Bound(p => p.tot08).Width(30).Title("Ago");
    columns.Bound(p => p.tot09).Width(30).Title("Set");
    columns.Bound(p => p.tot10).Width(30).Title("Out");
    columns.Bound(p => p.tot11).Width(30).Title("Nov");
    columns.Bound(p => p.tot12).Width(30).Title("Dez");

//I want to add the new column here! Something like this, but aggregation! (tot01 + tot02 + tot03 ... + tot12)!! not only value from one column:

    columns.Bound(p => p.tot01).Width(30).Title("TOT");

})

Can anyone help?

Solution 1

Try this

• First Make sure your model columns are decimal
• Add the Total Column in the end of the grid if you want to use the footer then add client footer.
• Add Aggregate as shown
• Add Javascript
• Finally total column will sum total of given columns dynamically and will show grand total in footer as well.

**************Grid********

 @(Html.Kendo().Grid<WebAnalise.Models.map_sel_fabr_prod>()
    .Name("grid")
    .Columns(columns =>
    {
      columns.Bound(p => p.tot11).Width(30).Title("Nov");
      columns.Bound(p => p.tot12).Width(30).Title("Dez");
      columns.Bound(c => c.Total).Title("Total")
      .ClientTemplate("#= kendo.format('{0:c}',Total) #")  
      .ClientFooterTemplate("<div>Grand Total: #= kendo.format('{0:c}',sum) #</div>");
   }
    .DataSource(dataSource => dataSource
          .Ajax()
          .Aggregates(aggregates =>
          {

             aggregates.Add(p => p.Total).Sum();                         
           })
          .PageSize(20)
          .Events(events => events.Error("error_handler"))
          .ServerOperation(false)                       
          .Events(e=>e.Edit("onEdit").Save("onSave"))
        )

*********Javascript*******************

function onEdit(e)
        {

            var indexCell = e.container.context.cellIndex;           
            if (typeof indexCell != "undefined") {              

                var input = e.container.find(".k-input");
                input.blur(function () {

                    e.model.set("Total", (e.model.tot01 * e.model.tot02 *e.model.tot03);


                });

                var texbox = e.container.find(".text-box");
                texbox.change(function () {                    
                   e.model.set("Total", (e.model.tot01 * e.model.tot02 *e.model.tot03);

                });               
             }           

        }

        function onSave(e)
        {
            //update the aggregate columns
            var dataSource = this.dataSource;
            e.model.one("change", function () {
                dataSource.one("change", function () {
                    dataSource.aggregates().Total.sum;
                });
                dataSource.fetch();
            });

        }

Regards

Shaz

Solution 2

You can use the built-in aggregate functionality of the Kendo UI Grid as shown in this demo:

http://demos.telerik.com/kendo-ui/web/grid/aggregates.html

You can display the aggregate information in the footer template of the last column (shown in the demo)

Comments

[André]

I see that example, but i can't understand how use that on my code?.. i want a aggregation column of the other columns..

[André]

LINQ , i'm trying to solve that with kendo methods.. but creating a property in model like u said.. solve the problem :) tks!!