Show hidden delete buttons

by Zacc206

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="show" class="k-button">Show delete</button>
<div id="grid"></div>

JavaScript

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

$("#grid").kendoGrid({
    dataSource: myDataSource,
    columns: [
        {
            command: "destroy"
        },
        {
            field: "firstName",
            title: "First Name "
        },
        {
            field: "firstName_",
            title: "<button id='hide' data-column='firstName'>Hide Me</button>"
        
        },
        {
            field: "lastName",
            title: "Last Name"
        }]
});

$(".k-grid-delete", "#grid").hide();

$("#show").on("click", function() {
    $(".k-grid-delete", "#grid").show();
});

$('#hide').on('click', HideColumn(2));

function HideColumn(n){
    var grid = $("#grid").getKendoGrid();
    grid.columns[n].width = 20;
    grid.setOptions({columns: grid.columns});
}