Kendo Grid - Dynamic aggregrate footer template value

1
votes

I'm building a grid that needs to have a sum in the footer, but the built in sum aggregate doesn't quite work for my needs.

As an example, say I am building a grid with a list of products that I am selling. I also have a field that says "Eligible for discount". I want to display a sum of the prices of the products, but only for the items that are eligible for discount.

Ideally, I'd love to be able to pass in a function like below, but I don't think the Kendo grid supports it.

function(seed, model){
  if(model.EligibleForDiscount === true){
      return seed.Price + model.Price;
  }

  return seed.Price;
}

It would also have to automatically be refreshed upon updates to the grid.

Is the only way to do this by manually handling the events on the grid and using the help of jQuery to update the footer template?

4
kendo-uikendo-grid

4 Answers

2
votes

Try Below Example:

$("#SearchDetails").kendoGrid({
        scrollable: true,
        resizable: true,
        sortable: true,
        pageable: false,
        navigatable: true,
        filterable: false,
        groupable: true,
        selectable: "row",
        schema: {
            fields: {
                Duration: { type: "number" }
            }                      
        },
        columns: [
                { title: ' Name', field: 'CustName'},
                { title: ' Event Name', field: 'ServiceName'},
                { title: 'Resource Name', field: 'ResourceName', footerTemplate: '<span style=\'float:right;\'>Total</span>' },
                { title: 'Duration(Min)', field: 'Duration', template: '<span style=\'float:right;\'>#=Duration#</span>', aggregates: 'sum', footerTemplate: '<span id=\'footerPlaceholder\' style=\'float:right;font-weight: bold;\'>#=calc(sum)#</span>' },
                { title: 'Total Amount (' + currencySymbol + ')', field: 'TotalAmount', template: '<span style=\'float:right;\'>#=TotalAmount#</span>', aggregates: 'sum', footerTemplate: '<span style=\'float:right;font-weight: bold;\'>#=kendo.toString(sum,\'n\')#</span>' }
        ],
        dataSource: {
            data: viewModel.AppintDetails(),
            aggregate: [{ field: 'Duration', aggregate: 'sum', format: 'n' }, { field: 'TotalAmount', aggregate: 'sum', format: 'n' }]
        }
    });

Below that we have create a function in the html section

<script type="text/javascript">
    function calc(val) {
        var hour = Math.floor(val / 60);
        var min = val % 60;
        val = hour + ":" + min + " hrs";
        return val;
    }
</script>

i am just using for display the Duration total in proper date Format.This code works for me... Below Grid Show this...detail enter image description here

2
votes

Hello I'm late but if it can help someone.

I've faced the same problem once and I implemented a solution which can help you to use custom aggregate function in groupFooterTemplate.

Link to the project here

function myAggregate(data){
 // Data here is a list of data by group (brilliant right! :-) )
 // Do anything here and return result string
}

var grid = $('#grid').kendoGrid({
  ...
  columns: [
    { field: '', title: '', groupFooterTemplate: myAggregate
  ]
  ...
});
<!DOCTYPE html>
<html>
  <head>
    <!-- YOUR CSS HERE -->
  </head>
  <body>
    ...
    <div id="#grid"></div>
    ...
    <script>// jQuery here </script>
    <script>// kendo.all.min.js here </script>
    <script src="kendo.aggregate.helper.js"></script>
  </body>
</html>
1
votes

Unfortunately the Kendo DataSource doesn't provide a way to add a custom aggregate function, but you could probably accomplish this by just using a custom column footerTemplate like:

var gridDataSource = new kendo.data.DataSource({...});

window.calculatePriceAggregate = function () {
    var data = gridDataSource.data();
    var total = 0;
    for(var i = 0; i < data.length; i++) {
        if (data[i].EligibleForDiscount === true) {
            total += data[i].Price;
        }
    }
    return total;
};

$("#grid").kendoGrid({
    data: gridDataSource,
    ...
    columns: [
        {
            field: 'Price',
            footerTemplate: '#=window.calculatePriceAggregate()#'
        }

    ]
});
0
votes

Or else use like this code...

 $("#grid").kendoGrid({

        scrollable: true,
        sortable: true,
        pageable: true,
        navigatable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        dataSource: {
            data: viewModel.UserWithoutGUID(),
        },
        groupable: false,
        selectable: "row",
        columns: [
               { title: "ID", field: "ResourceID", template: '<span>#= ResourceID #</span> <input type="hidden" value="#= ResourceID #"/>', width: 40 },
               { title: "Photo", filterable: false, field: "Image", template: '<span class="image"><img id="#=ResourceID #" height="50" width="50" src="#=Image#" onerror="#=LoadDefaultImage()#"/></span>', width: 40 },
               { title: "Name", field: "Name", width: 100 },
               { title: "Email", field: "Email", width: 100 },
               { title: "Mobile", field: "Mobile", width: 100 }
        ]

    });

LoadDefaultImage = function () {
    return "null";
}

i am here loading a image via template binding by calling this function.