JSGrid Button Field

by Danish Farman

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>

JavaScript

var data = [
    { "Name": "Otto Clay" },
    { "Name": "Connor Johnston" },
    { "Name": "Lacey Hess" },
    { "Name": "Timothy Henson" },
    { "Name": "Ramona Benton" },
    { "Name": "Ezra Tillman" },
    { "Name": "Dante Carter" },
    { "Name": "Christopher Mcclure" }
];

$("#jsGrid").jsGrid({
        height: 300,
        width: "100%",
 
        autoload: true,
 
        controller: {
            loadData: function() {
                return data;
            }
        },
 
        fields: [
            { name: "Name", type: "text", width: 150 },
            { 
                itemTemplate: function(_, item) {
                    return $("<button>").text("Click Me")
                    	.on("click", function() {
                        	alert(item.Name);
                    	});
              	}
            }
        ]
    });