Search code examples
sumkendo-uifooterkendo-grid

Kendo UI: Sum in footertemplate


I'm trying to get my footerTemplate working with a Kendo UI grid. I want to get the sum of 'hours_worked' in the footer of the tabel. I've tryed several options from the Kendo UI example but it doesn't work for me. What im doing wrong?

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      transport: 
        read: {
          url: "mods/hours/data/get_hours.php?id=<?php echo $volunteer_id; ?>",
          dataType: "json"
        }
      },
      schema: {
        model: {
          fields: {
            hours_id: { type: "number" },
            volunteer_first_name: { type: "string" },
            volunteer_last_name: { type: "string" },
            hours_date: { type: "date" },
            location_name: { type: "string" },
            work_type_name: { type: "string" },
            volunteer_id: { type: "number" },
            hours_worked: { type: "number" }
          }
        }
      },
      aggregate:[{ field:"hours_worked", aggregate:"sum" }],
      pageSize: 10
    },
    height: 350,
    filterable: true,
    sortable: true,
    pageable: true,
    selectable:true,
    columns: [
      {
        title:"Naam",
        template:"#=volunteer_last_name#, #=volunteer_first_name#",
      },{
        title:"Locatie",
        field:"location_name",
      },{
        title:"Werkzaamheden",
        field:"work_type_name",
      },{
        title:"Uren",
        field:"hours_worked",
        footerTemplate:"Sum: #=sum#",
      },{
        title:"Datum",
        field:"hours_date",
      },{
        width:"200px",
        title:"Opties",
        filterable: false,
        template:"<a href='?p=edit_reported_hours&id=#=volunteer_id#&hours_id=#=hours_id#' class='k-button'>Bewerken</a> <a href='?p=manage_reported_hours&o=delete&id=#=volunteer_id#&hours_id=#=hours_id#' class='k-button'>Delete</a>"
      },
    ]
  });
});
</script>

Solution

  • Add a curly bracket after transport and it will work.

    transport: {
        read: {
           url: "mods/hours/data/get_hours.php?id=<?php echo $volunteer_id; ?>",
           dataType: "json"
        }
    },
    

    See it here: http://jsfiddle.net/OnaBai/bWS7C/