JSGrid Insert Button

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsgrid"></div>

CSS

.ui-widget {
    font-size: 12px;
}

JavaScript

var data = [
    { Name: "John" },
    { Name: "Jimmy" },
    { Name: "Tom" },
    { Name: "Frank" },
    { Name: "Peter" }
];

$("#jsgrid").jsGrid({
    autoload: true,
    width: 200,
    controller: {
        loadData: function() {
            return data;
        }
    },
    fields: [
        { type: "text", name: "Name" },
        { 
            type: "control",
            editButton: false,
            headerTemplate: function() {
                var grid = this._grid;
                var isInserting = grid.inserting;

                var $button = $("<input>").attr("type", "button")
                    .addClass([this.buttonClass, this.modeButtonClass, this.insertModeButtonClass].join(" "))
                    .on("click", function() {
                    
                        isInserting = !isInserting;
                        grid.option("inserting", isInserting);
                        alert('reza');
                    });

                return $button;
            }
        }
    ]
});