Kendo - triple grids

by johnpapa

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<ul id="profiles_ul">
    <li>
        <div id="profileWrapper">
            <div id="grid"></div>
        </div>
    </li>
    <li id="profilesListGrid">
        <div id="mainGrid"></div>
    </li>
</ul>
<script id="locationRowTemplate" type="text/x-kendo-tmpl">
    <tr class="selectable">
        <td>${ Name }</td>
    </tr>
</script>

CSS

.cellGREENdecor
{
    text-decoration: none;
    border-right: gray 1px solid;
    border-top: gray 1px solid;
    border-left: gray 1px solid;
    border-bottom: gray 1px solid;
    background-color: PaleGreen;
    color: black;
    display: inline-block;
    width:90%;
    white-space:nowrap;
}

#profilesListGrid 
{
    padding-left: 10px;
    width: 1400px;
}

#profileWrapper 
{
    width: 350px;
}

.selectable {
    cursor: pointer;
}

#profiles_ul
{
    width:100%;
    margin:0;
    padding:0;
}
#profiles_ul 
{
    display:table;
}
#profiles_ul li 
{
    display:table-cell;
    list-style:none;
    vertical-align: top;
    padding-top: 20px;
}

JavaScript

var my = my || {};

my.ProfilesViewModel = function() {
    var 
        campuses = [
            {
                "Code":"WDWPR",
                "Name":"Walt Disney World"
            }
        ],
        locations = [
            {"CampusCode":"WDWPR","Code":"EPCOT","Name":"EPCOT"}
        ],
        targets = [
            {
                "breakCount":1,
                "breakDuration":60,
                "breakEnd":"",
                "breakReason":"Break",
                "breakStart":"",
                "campusCode":"WDWPR",
                "colorCode":"GREEN",
                "enabled":"0",
                "endTime":"SNL_END|NMH_END",
                "extraHours":0,
                "futureEndDate":null,
                "futureStartDate":null,
                "locationCode":"EPCOT",
                "scheduleId":985,
                "startTime":"SNL_START|NMH_START",
                "sublocationCode":"AFROUTCHR",
                "sublocationName":"African Outpost - Character",
                "targetId":971,
                "value":30
          }
        ],
        selectedCampus = null,
        selectedLocation = null,
        loadLocationsGrid = function (e) {
            selectedCampus = e.data.Code;
            $("<div/>").kendoGrid({
                dataSource: {
                    type: "json",
                    data: locations
                },
                change: onChange,
                scrollable: false,
                sortable: true,
                pageable: false,
                selectable: true,
                rowTemplate: kendo.template($("#locationRowTemplate").html())
            }).appendTo(e.detailCell);
            $(".k-grid-header").hide();
        },
        loadCampusGrid = function () {
            $("#grid").kendoGrid({
                dataSource: campuses,
                height: 500,
                pageable: false,
                detailInit: loadLocationsGrid,
                columns: [ "Name" ]      
           ...