Collapse Kendo Columns

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.default.min.css">
<div id="grid"></div>
<br /><br />

<div id='hidden'>
    <strong>Other Styles</strong>
    <br /><br />
    .k-grid tr td{ border: 0 !important;}
    .k-grid td:odd {border-width: 0;}
</div>

CSS

body{padding: 20px; font-family: sans-serif}
#container{margin: 20px 0px;}
.hidden{display: none;}
button{border: none; background-color: transparent;}
.k-grid tr td { border-left: 0;}
#hidden{display: none;}

JavaScript

var myDataSource = new kendo.data.DataSource({
    data: {
        "people": [
            { 
                "firstName":"John",
                "toggleFN": "",
                "lastName":"Doe",
                "toggleFN": "",
                "city": "Seattle",
                "toggleC": ""
            },
            { 
                "firstName":"Anna",
                "toggleFN": "",
                "lastName":"Smith",
                "toggleFN": "",
                "city": "Redmond",
                "toggleC": ""
            },
            { 
                "firstName":"Peter",
                "toggleFN": "",
                "lastName":"Jones",
                "toggleFN": "",
                "city": "Vancouver",
                "toggleC": ""
            }
        ]
    },
    schema : {
        data: "people"
    }
});

$("#grid").kendoGrid({
    dataSource: myDataSource,
    scrollable: false,
    dataBound: OnGridLoad,
    columns: [
        {
            field: "firstName",
            title: "<div align=center>First Name</div>",
            template: "<div align=center>#:firstName#</div>",
            width: 200
        },
        {
            field: "toggleFN",
            title: "<button class='btn-toggle' data-toggle-type='hide' data-bound-col-name='firstName'>-</button><button class='btn-toggle hidden' data-toggle-type='show' data-bound-col-name='firstName'>+</button>",
            width: 10
        },
        {
            field: "lastName",
            title: "<div align=center>Last Name</div>",
            template: "<div align=center>#:lastName#</div>",
            width: 200
        },
        {
            field: "toggleLN",
            title: "<button class='btn-toggle' data-toggle-type='hide' data-bound-col-name='lastName'>-</button><button class='btn-toggle hidden' data-toggle-type='show' data-bound-col-name='lastName'>+</button>",
            width: 10
        },
        {
            field: "city",
            title: "<div...