Kendo UI Grid Totals MVVM Using Arrays

by darrenarbell

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<script src="https://raw.github.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.js"></script>
<div id="example" class="k-content">
    <table id="grid" data-bind="source: tasks">
    </table>
    <div class="k-grid k-widget">
        <table class="k-focusable" id="footer" >
        </table>
    </div>
</div>

<script id="footerTemplate" type="text/x-kendo-template">
     <tr>
                <td/>
                <td/>
                <td/>
                <td/>
         #for (var i = 0; i < data; i++) {#
                <td>
                    Total: <span data-bind="text: priceTotal(#= kendo.toString(i)#)" />
                </td>
         #}#
            </tr>
</script>

JavaScript

// Set up the dropdown data that will eventually be remote data
var projectData = [];
for (var i = 0; i < 100; i++)
projectData.push({
    Name: "Project #" + i,
    Id: i
});


var taskData = [];
for (var i = 0; i < 5; i++) {
    var timeEntryArray = [];
    for (var j = 0; j < 5; j++) {
        timeEntryArray.push(kendo.observable({entry : 2}));
    }
    taskData.push(kendo.observable({
        projectId: i,
        categoryId: i,
        activityId: i,
        timeEntries: timeEntryArray
    }));
}

$(document).ready(function() {
    /*var projectDataSource = new kendo.data.DataSource({
        data: projectData
    });*/

    var viewModel = kendo.observable({
        tasks: taskData,
        priceTotal: function() {
            var columnIndex = arguments[0];
            var sum = 0;

            $.each(this.get("tasks"), function(index, task) {
                sum += task.timeEntries[columnIndex].entry;
            });
            // Add a bonus of 10
            sum = sum + 10;
            return sum;
        }
    });


    function timeEditor(container, options) {
        $('<input data-bind="value:' + options.field + '"/>').appendTo(container).kendoNumericTextBox();
    }

    function projectEditor(container, options) {
        $('<input data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "Id",
            dataSource: projectDataSource
        });
    }

    var columns = [{
        field: "projectId",
        title: "Reference",
        editor: projectEditor},
    {
        field: "categoryId",
        title: "Category"},
    {
        field: "activityId",
        title: "Activiy"},
    {
        title: "Button"}];

    for (var i = 0; i < 5; i++) {
        var timeEntryIndex = "timeEntries[" + i + "].entry";
        columns.push({
            editor: timeEditor,
            field: timeEntryIndex,
            title: "Day " + i
        });
    }

    var...