Resize Kendo Column (2)

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">
<div id="container">
    <button id="shrink" class="k-button">Shrink First Name Column</button>
    <button id="expand" class="k-button">Expand First Name Column</button>
</div>
<div id="grid"></div>

CSS

body{padding: 0px 20px;}
#container{margin: 20px 0px;}
.hidden{display: none;}

JavaScript

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

$("#grid").kendoGrid({
    dataSource: myDataSource,
    scrollable: false,
    dataBound: OnGridLoad,
    columns: [
        {
            field: "firstName",
            title: "First Name"
        },
        {
            field: "toggleFN",
            title: "<button id='hide1'>-</button><button id='show1' class='hidden'>+</button>",
            width: 10
        },
        {
            field: "lastName",
            title: "Last Name"
        },
        {
            field: "toggleLN",
            title: "<button id='hide1'>-</button><button id='show1' class='hidden'>+</button>",
            width: 10
        }]
});

$('#shrink').on('click', function(){
    ResizeColumn(20);
});

$('#expand').on('click', function(){
    ResizeColumn(500);
});

function OnGridLoad(){
    alert("Grid Loaded");
    AttachToggleEvents();
}

function ResizeColumn(myWidth){
    var grid = $("#grid").getKendoGrid();
    grid.columns[0].width = myWidth;
    grid.setOptions({columns: grid.columns});
}

function AttachToggleEvents(){
    $('#hide1').on('click', function(){
        $('#show1').removeClass('hidden');
        $(this).addClass('hidden');

        HideColumn("firstName");
    });

    $('#show1').on('click', function(){
        $('#hide1').removeClass('hidden');
        $(this).addClass('hidden');

        ShowColumn("firstName");
   ...