CODEWITHSUNDEEP
c#kendo-uikendo-gridkendo-asp.net-mvc
André
André

Reputation: 53

Kendo grid aggregate column

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?

Upvotes: 2

Views: 13007

Answers (3)

Shazhad Ilyas
Shazhad Ilyas

Reputation: 1193

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

Upvotes: 2

CSharper
CSharper

Reputation: 5590

Are you using LinQ or ADO for data access??? Whichever it is it doesn't really matter but you can just return the sum using your LinQ query or in your stored procedure and tie the sum to a property of your model class

Upvotes: 0

knikolov
knikolov

Reputation: 1800

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)

Upvotes: 1

Related Questions