Kendo Grid Aggrigate

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.3.930/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2015.3.930/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.3.930/styles/kendo.bootstrap.min.css">
<div id="myGrid"></div>

JavaScript

var rawData = {
    allData: [
        { employeeId: 1, departmentId: 2, hourlyWage: 10.25 },
        { employeeId: 2, departmentId: 1, hourlyWage: 12.35 },
        { employeeId: 3, departmentId: 3, hourlyWage: 11.00 },
        { employeeId: 4, departmentId: 2, hourlyWage: 15.80 }
    ],
	employees: [
        { value: 1, text: 'John Smith' },
        { value: 2, text: 'Jane Smith' },
        { value: 3, text: 'John Doe' },
        { value: 4, text: 'John White' },
    ],
    departments: [
        { value: 1, text: 'Dept A' },
        { value: 2, text: 'Dept B' },
        { value: 3, text: 'Dept C' },
    ]
};

var vm = {
    dsAllData: new kendo.data.DataSource({
    	data: rawData.allData
    })
};

$(document).ready(function() {
	//kendo.bind($('#ui'), vm);
    $('#myGrid').kendoGrid({
    	dataSource: vm.dsAllData,
        groupable: true,
        columns: [
            { field: 'employeeId', title: 'Employee', 
             values: rawData.employees, width: 200 },
            { field: 'departmentId', title: 'Department',
              values: rawData.departments, width: 200, 
              aggregates: ['count'], groupFooterTemplate: 'Count: #= count #' },
            { field: 'hourlyWage', title: 'Hourly Wage', width: 110,
              aggregates: ['sum'], groupFooterTemplate: 'Total: #= sum #' }
        ]
    });
});