New to Kendo UI for jQuery? Download free 30-day trial

Calculate Custom Aggregates by Unique Value in Grid


Product Progress® Kendo UI® Grid for jQuery


How can I display the count of each unique value in the current view of the Grid as custom aggregate?


  1. Create a wrapping element with a specific selector in the footer or in the groupFooter template.
  2. Within the dataBound event of the Grid, go through the view or the data collection for the custom calculations.
  3. Manually populate the element in the template.
<div id="example">
    <div id="grid"></div>
        $(document).ready(function () {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: ""
                    pageSize: 5
                height: 550,
                groupable: true,
                sortable: true,
                dataBound: function(e){
                  var items = e.sender.items();
                  var summary = {};
                    var dataItem = e.sender.dataItem(this);
                      summary[dataItem.ContactTitle] = 1;
                      summary[dataItem.ContactTitle] ++;

                  var wrapper = e.sender.element.find(".summaryWrapper");
                  for (var prop in summary) {
                    wrapper.append("<div>"+ prop + "total: "+summary[prop]+"</div>");
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                columns: [{                    
                    field: "ContactTitle",
                    title: "Contact Title",
                  footerTemplate: "<div class='summaryWrapper'></div>"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
In this article