calculate grid column total problem

[Seaman]

hi all:
I have a problem, I have 10 column of the grid, 6 lines, now I want to calculate  this grid value of the column third total,pls help me ,thanks.

[Iliana Dyankova]

Hello Seaman,

In order to calculate the Kendo UI Grid column value you need to use aggregates and footerTemplate. 
I believe you might find this online demo helpful as it discusses the same subject.

Regards,

Iliana Nikolova
the Telerik team

[Lee]

Is there not a way to simply sum a complete column and display it in the footer of the grid?

For example.. I have a grid with 5 columns, 4 of which display numbers (integers).  I would like to have a "Totals" line at the bottom of the grid, and under the 4 columns with the numbers I would like to sum each column.

Grouping does not work for this, as they are simple output of daily counts.. and grouping on each one would mean that each and every row would become a group.

Thanks...

[Iliana Dyankova]

Hello Christian,

You could achieve this using footerTemplate for each of the columns. As an example: 

$("#grid").kendoGrid({
  //....
  columns: [
    { field: "UnitPrice", title: "Unit Price", footerTemplate: "Total: #=sum#"},
    { field: "UnitsOnOrder", title: "Units On Order", footerTemplate: "Total: #=sum#"}
     //....
  ]
});

Regards,

Iliana Nikolova
the Telerik team

[Marvin]

I have a similar problem, I'm creating a shopping list grid. There's a Price (bound column) and I need to calculate the Total Price dynamically based on the Quantity that the user will input. Am I missing something? Or do I need events here? The Total Price is always 0..

var gridResult = $("#grid").kendoGrid({
    dataSource: {
        type: "aspnetmvc-ajax",
        //                     type: "json",
        transport: {
            read: "Home/Products_Read"
        },
        schema: {
            data: "data",
            total: "total",
            model: {
                id: "Id",
                fields: {
                    Number: { editable: false },
                    Name: { editable: false },
                    Supplier: { editable: false },
                    Price: { editable: false, type: "number" },
                    Quantity: { editable: true, type: "number" }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    selectable: "row",
    sortable: true,
    pageable: true,
    columns: [
        { field: "Number", title: "Number", width: "100px" },
        { field: "Name", title: "Name" },
        { field: "Supplier", title: "Supplier", width: "100px" },
        { field: "Price", title: "Price", width: "100px", format: "{0:n}" },
        { field: "Quantity", title: "Quantity", width: "100px", template: '<input data-role="numerictextbox" data-bind="value: Quantity" data-max-value="100" class="quantityTextArea" />' },
        { title: "Total Price", width: "100px", template: "#= Price * Quantity #" }
        ]
});

[Nathan]

A full code sample would be nice, not just a fragment of code.  So annoying

[Luciano]

Here I edited the online demo and removed grouping. Scroll down to the bottom and check the second column, it has a total sum in the footer.

[Nathan]

Luciano, thanks for the reply.  I don't use jquery to load my grids.  Plus I use a lot of razor syntax.    I was able to figure out a temporary workaround without having to do a lot of jquery

thanks