Ryan Overview Fiddle

by stevescotthome

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">

        <div id="capacity-header">
            <div class="pod">
               Capacity Overview
            </div>
            <div class="pod" data-bind="text: getCompletionStatus">
               64% Complete
            </div>
            <div id="loading">LOADING...</div>
            <div class="clear">
            </div>
        </div>

        <div class="filter">
            <input class="filterIt" />
            
        </div>

        <div class="selection">

            <div class="clear"></div>

            <div class="results">

                <ul class="resultsUL" data-template="blockTemplate" data-bind="source: getBlocks">
            

                </ul>

                <div class="clear"></div>

            </div>

        </div>

        <div class="overview">
                    
            <div class="region-wrapper">
            
                <div class="region-header">
                    
                    <div class="pod-left">
                        <h1>Hamilton Campus</h1>
                    </div>

                    <div class="pod-right">
                    58% Complete
                    </div>

                    <div class="pod-button add">
                    Add New
                    </div>
                    <div class="pod-button release">
                    Release
                    </div>

                    <div class="clear"></div>

                </div>

                <div class="rotation">
                    <div class="site deleteable">
                        <span class="name">St.Joseph Hospital</span> 
                        <span...

CSS

#main-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  font-family: Arial;
}
#clekership-header .range {
  color: #999999;
  font-size: 14px;
}
#capacity-header {
  width: 100%;
  border-bottom: 1px solid #d0d0d0;
  background: #f0f0f0;
  font-family: Arial;
}
#capacity-header .pod {
  float: left;
  padding: 10px;
  border-right: 1px solid #d0d0d0;
  border-left: 1px solid #fff;
  background: #f5f5f5;
  font-size: 13px;
  font-weight: bold;
}
#capacity-header .pod:first-child {
  border-left: 0;
}
#capacity-header #loading {
  padding: 12px 0px 0px 10px;
  float: left;
  font-size: 11px;
  font-weight: bold;
  opacity: .5;
}
.region-wrapper {
  padding: 10px;
}
.region-wrapper .region-header {
  border: 1px solid #d0d0d0;
  background: #f5f5f5;
  margin-bottom: 10px;
}
.region-wrapper .region-header h1 {
  margin: 0;
  padding: 0;
  font-size: 18px;
  color: #fff;
}
.region-wrapper .region-header .pod-left {
  float: left;
  padding: 10px;
}
.region-wrapper .region-header .pod-right {
  float: right;
  padding: 13px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0px -1px 0px #c65b5b;
  border-left: 1px solid #c65b5b;
}
.region-wrapper .region-header .pod-button {
  float: right;
  padding: 12px;
  padding-bottom: 13px;
  font-weight: bold;
  padding-left: 40px;
  cursor: pointer;
  color: #fff;
}
.region-wrapper .region-header .pod-button.add {
  background: url("../../../images/apps/scheduling/cps/plus_x1.png") no-repeat 10px 10px;
}
.region-wrapper .region-header .pod-button.release {
  background: url("../../../images/apps/scheduling/cps/check_x1.png") no-repeat 10px 10px;
}
.region-wrapper .region-header {
  background: #ff6e6e;
  height: 42px;
  border: 1px solid #c65b5b;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.region-wrapper .region-header h1 {
  text-shadow: 0px -1px 0px #c65b5b;
}
.region-wrapper .region-header .pod-button {
  border-left: 1px solid...

JavaScript

var viewModel = null;

$(document).ready(function(){
    //So this would probably get called after an $.ajax success call
    createModel(getJSONData());
    
    $(".filterIt").searchCreate({
        placeholder: "Filter Column",
        width: '137px', // specify pixel width
        showSearchIcon: true,
        //color: 'dark', // only choice is dark
        clearAfterSearch: false,
        change: function (e) {
            console.log("change " + e);
            viewModel.filter();
        },
        search: function (e) {
           
        }
    });    
    
});

function createModel(jsonData){
    //Add in custom functions here
    viewModel = kendo.observable({
        getStatus: function(rotation){
            
        },
        filter: function(rotation){            

            this.getBlocks();

        },
        getCompletionStatus: function(){
            
            
            return "hey";
            
        },
        getBlocks: function(){
            var blocks = this.Blocks;
            
            return blocks;            
        }
        
    });
    
    //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 {        
        Blocks: [
            { Name: "Pediatrics", Date: "JAN 2012", Status: 0 },
            { Name: "Psychiatry", Date: "JAN 2012", Status: 2 },
            { Name: "Medicine", Date: "JAN 2012", Status: 1 },
        ]
    }        
}