kendo grid sample

by jwstott

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<input data-bind="value: countOfOpen" />
<input data-bind="value: isDirty" />
<button data-bind="click: submit">Save</button>
<button data-bind="click: changeItem">Change</button>

<div id="grid" >
</div>
 <script id="rowTemplate" type="text/x-kendo-tmpl">
                <tr>
                    <td>#= idx #
                    </td>
                    <td>
                        <div style="float:left;">
                            
                        </div>
                    </td>
                </tr>
            </script>

JavaScript

asmt = function(obj) {
    this.id = undefined;
    this.idx = 0;
    this.answers = ['A','B','C','D'];
    this.answerKey = undefined;
    this.question = undefined;
    this.focusHandler = function(e) {
      console.log('focus');  
    };
   
};

var examModel = kendo.observable({
    idx:8,
    id: undefined,
    logicalId: undefined,
    examName: undefined,
    enableCorrectFeedback: false,
    examStarted: false,
    participant: undefined,
    assessments: [],
    addAssessment: function(item) {
        this.assessments.push(item);
    },
    focusHandler : function(e) {
        console.log("got me");
    },
    countOfOpen: function() {
        this.assessments.bind("change", function(e) {
            var par = this.parent();
            console.log(e.action);

            var asmts = par.get('assessments') || [];
            var result = [],
                i = 0,
                j = asmts.length;
            for (i = 0; i < j; i++) {
                if (!asmts[i].answerKey) {
                    result.push(asmts[i]);
                }
            }
            par.set('countOfOpen', result.length);

        });
        return 0;
    },
    pageSize: 10,
    dirtyCallback: undefined,
    saveCallback: undefined,
    isDirty: function() {
        this.assessments.bind("change", function(e) {
            var par = this.parent();
            if (e.action == 'itemchange') {
                par.set('isDirty', true);
            }
        });

        return false;
    }

});



examModel.addAssessment(new asmt({
    id: 123,
    idx: 1,
    question: 'Presidents'
}));
examModel.addAssessment(new asmt({
    id: 123,
    idx: 2,
    question: 'Actors'
}));

kendo.bind(document.body, examModel);
$("#grid").kendoGrid({
    dataSource: {
        data: examModel.assessments,
        pageSize: 10
    },
    groupable: false,
    sortable: false,
    pageable: true,
    rowTemplate: kendo.template($("#rowTemplate").html()),
    columns: [{
        field: "idx",
   ...