Kendo Collapse (matched with Comp)
by Zacc206
HTML
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<div id="grid1"></div>
<br /><br />
<div id="grid2"></div>
CSS
body{padding: 20px; font-family: sans-serif}
#container{margin: 20px 0px;}
.hidden{display: none;}
button{border: none; background-color: transparent;}
.k-grid {border: 0 !important;}
.k-grid tr td { border-left: 0;}
#hidden{display: none;}
table[role='grid']{border: 1px solid #c5c5c5;}
.grid-super-column{text-align: center;}
.grid-header-cell, .grid-data-cell{text-align: center; margin-left: 25px;}
.grid-data-right {text-align: right;}
.btn-toggle {float: left; height: 50px; width: 20px; cursor: pointer; font-size: 20px !important; text-align: center;}
JavaScript
var myDataSource = new kendo.data.DataSource({
data: {
"sectionData": [
{
"categoryName": "Xbox 360",
"corpForecastCurrentFY":"$1,000.00",
"corpBudgetCurrentFY": "$1,000.00",
"targetForecastCurrentFY": "$1,000.00",
"targetBudgetCurrentFY": "$1,000.00",
"totalVTB": "$1,000.00",
"actualLastFY": "$1,000.00",
"yoy": "$1,000.00",
"accountGoalsSumCurrentFY": "$1,000.00",
"varianceTotalOverBudget": "$1,000.00",
"account1ForecastCurrentFY": "$1,000.00",
"account1GoalCurrentFY": "$1,000.00",
"account1Vtg": "$1,000.00",
"account1ActualLastFY": "$1,000.00",
"account1Yoy": "$1,000.00"
},
{
"categoryName": "PS3",
"corpForecastCurrentFY":"$1,000.00",
"corpBudgetCurrentFY": "$1,000.00",
"targetForecastCurrentFY": "$1,000.00",
"targetBudgetCurrentFY": "$1,000.00",
"totalVTB": "$1,000.00",
"actualLastFY": "$1,000.00",
"yoy": "$1,000.00",
"accountGoalsSumCurrentFY": "$1,000.00",
"varianceTotalOverBudget": "$1,000.00",
"account1ForecastCurrentFY": "$1,000.00",
"account1GoalCurrentFY": "$1,000.00",
"account1Vtg": "$1,000.00",
"account1ActualLastFY": "$1,000.00",
"account1Yoy": "$1,000.00"
},
{
"categoryName": "Wii",
"corpForecastCurrentFY":"$1,000.00",
"corpBudgetCurrentFY": "$1,000.00",
"targetForecastCurrentFY": "$1,000.00",
"targetBudgetCurrentFY": "$1,000.00",
"totalVTB": "$1,000.00",
"actualLastFY": "$1,000.00",
...