Summary by checkbox

HTML

<script src="http://dl.dropbox.com/u/3234184/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<script src="http://dl.dropbox.com/u/27620640/searchPlugin.js"></script>
<div id="overview">
    <ul class="resultsUL" data-template="itemTemplate" data-bind="source: Items">


    </ul>
</div>


<script id="itemTemplate" type="text/x-kendo-template">
    <li>
        <span data-bind="text: Name"></span><input type="checkbox" data-bind="checked: Active, visible: Visible, click: increaseCount" />
        <div class="count">
            <span data-bind="text: count"></span>
        <div>
    </li>
</script>
            
<p>So Item 1 needs to always have the count of 2&3 if they are checked...on load and change it when the items select or deselect.</p>

CSS

li{
  margin-bottom: 20px;   
}

.totalcount{
 color:salmon;   
}

JavaScript

var viewModel = null;

$(document).ready(function(){
    createModel(getJSONData());
});

function createModel(jsonData){
    //Add in custom functions here
    viewModel = kendo.observable({
        count: 0,
        increaseCount: function(item){
            var current = this.get("count");
            this.set("count", current + 1);
            console.log(this.get("count"));
        }
    });
    
    //This is how you put the "jsonData" onto the model to be "observable"
    for (var field in jsonData) {
        viewModel.set(field, jsonData[field]);
    }

    //Now tell kendo to apply your data to this div in the markup
    kendo.bind($("#overview"), viewModel);
}


function getJSONData(){
    return {        
        Items: [
            { Name: "Item 1", Active: true, Visible: false},
            { Name: "Item 2", Active: true, Visible: true },
            { Name: "Item 3", Active: false, Visible: true},
        ]
    }        
}