Resize Kendo Grid Column

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<button id="shrink" class="k-button">Shrink First Name Column</button>
<button id="expand" class="k-button">Expand First Name Column</button>

<div id="grid"></div>

JavaScript

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

$("#grid").kendoGrid({
    dataSource: myDataSource,
    scrollable: false,
    columns: [
        {
            field: "firstName",
            title: "First Name "
        },
        {
            field: "lastName",
            title: "Last Name"
        }]
});

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

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

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