Kendo Grid Custom Command in headerTemplate

- adds a new row

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
<div id="grid"></div>

CSS

.btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #63c2de;
}

JavaScript

function createDummyData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        data.push({
            Id: i + 1,
            FirstName: "firstName"+i,
            LastName: "lastname"+i,
            City: "city"+i
        });
    }
    return data;
}



$(document).ready(function () {
    var grid = $("#grid").kendoGrid({
        dataSource: {
            data: createDummyData(5),
            schema: {
                model: {
                    fields: {
                        FirstName: {
                            type: "string"
                        },
                        LastName: {
                            type: "string"
                        },
                        City: {
                            type: "string"
                        }
                    }
                }
            },
            pageSize: 20
        },
        height: 500,
        scrollable: true,
        sortable: true,
        selectable: true,
        filterable: true,
        pageable: true,
        editable: {
            createAt: "bottom",
            mode: "popup"
        },
        columns: [{
            command: {
                text: "View",
                className: "btn"
            },
            headerTemplate: "<a id='create' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"
        }, {
            field: "FirstName",
            title: "First Name"
        }, {
            field: "LastName",
            title: "Last Name"
        }, {
            field: "City"
        }]
    }).data("kendoGrid");

    $("#create").click(function () {
        var grid = $("#grid").data("kendoGrid");
        if (grid) {
            var dataSource = grid.dataSource;
            var total = dataSource.data().length;
            dataSource.insert(total, {});
            dataSource.page(dataSource.totalPages());
           ...