JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.debug.js"></script>
<script src="http://dl.dropbox.com/u/61956288/koGrid-2.1.1.debug.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/61956288/KoGrid.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"></script>
<div style="height: 300px; width: 500px" class="gridStyle" data-bind="koGrid: gridOptions"></div>
JavaScript
function viewModel() {
var self = this;
self.Events = ko.observableArray([
{ FirstName: "Jenny", LastName: "Jones" },
{ FirstName: "Henry", LastName: "Howe" }
]);
self.gridOptions = {
data: self.Events,
columnDefs: [
{ field: 'FirstName' },
{ field: 'LastName' },
{ field: 'ActionField0', displayName: ' ',
cellTemplate:
'<div>' +
'<a href="#" data-bind="click: $userViewModel.save">Save</a> ' +
'<a href="#" data-bind="click: $userViewModel.edit">Edit</a>' +
'</div>'
}
],
autogenerateColumns: false,
canSelectRows: false,
showColumnMenu: false,
multiSelect: false,
enableColumnResize: false,
enablePaging: false,
enableSorting: ko.observable(true)
};
self.edit = function() {
alert("Edit");
}
self.save = function() {
alert("Save");
}
}
$(function () {
var peopleViewModel = new viewModel();
ko.applyBindings(peopleViewModel);
});