Collapse Kendo Columns (multiple grids)

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.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.material.min.css">
<div id="grid1"></div>
<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; cursor: pointer;}
.k-grid tr td { border-left: 0;}
table[role='grid'] {border: 1px solid #c5c5c5}
#hidden{display: none;}
.k-grid {border: 0 !important}
.grid-header-cell, .grid-data-cell {text-align: center; margin-left: 20px;}
.grid-super-column {text-align: center;}

JavaScript

var myDataSource = new kendo.data.DataSource({
    data: {
        "accounts": [
            { 
                "firstName":"$2,000.00",
                "toggleFN": "",
                "lastName":"$2,250.00",
                "toggleFN": "",
                "city": "$4,000.00",
                "toggleC": ""
            },
            { 
                "firstName":"$3,000.00",
                "toggleFN": "",
                "lastName":"$2,350.00",
                "toggleFN": "",
                "city": "$6,000.00",
                "toggleC": ""
            },
            { 
                "firstName":"$4,000.00",
                "toggleFN": "",
                "lastName":"$2,450.00",
                "toggleFN": "",
                "city": "$8,000.00",
                "toggleC": ""
            }
        ]
    },
    schema : {
        data: "accounts"
    }
});

$("#grid1").kendoGrid({
    dataSource: myDataSource,
    scrollable: false,
    dataBound: OnGridLoad,
    selectable: true,
    columns: [{
        title: "<div class='grid-super-column'>Common Header</div>",
        columns:[
            {
                field: "firstName",
                title: "<div class='grid-header-cell'>Account 1</div>",
                template: "<div class='grid-data-cell'>#:firstName#</div>",
                width: 200
            },
            {
                field: "toggleFN",
                title: "<button class='btn-toggle col-hide-001' data-toggle-class-id='001' data-toggle-type='hide' data-bound-col-name='firstName' title='Hide Account 1'>-</button><button class='btn-toggle col-show-001 hidden' data-toggle-class-id='001' data-toggle-type='show' data-bound-col-name='firstName' title='Show Account 1'>+</button>",
                width: 10
            },
            {
                field: "lastName",
                title: "<div class='grid-header-cell'>Account 2</div>",
                template: "<div class='grid-data-cell'>#:lastName#</div>",
                width:...