JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ericmbarnard.github.com/KoGrid/css/KoGrid.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://ericmbarnard.github.com/KoGrid/lib/KoGrid.debug.js"></script>
<h3>KO Test</h3>
<div class="datagrid" data-bind="koGrid: gridOptions "></div>
CSS
.datagrid {
border: 1px solid rgb(212, 212, 212);
width: 600px;
height: 300px;
}
JavaScript
$(function () {
"use strict";
// vm
function ItemsViewModel() {
"use strict";
var self = this;
self.dummyArray = ko.observableArray([{
name: "Goofy",
age: 27
}, {
name: "Mickey",
age: 33
}]);
self.items = ko.observableArray([]);
// filter
self.filterOptions = {
filterText: ko.observable(""),
useExternalFilter: true
};
// paging
self.pagingOptions = {
pageSizes: ko.observableArray([5, 10]),
pageSize: ko.observable(20),
totalServerItems: ko.observable(0),
currentPage: ko.observable(1)
};
// subscriptions
self.filterOptions.filterText.subscribe(function (data) {
self.refresh();
});
self.pagingOptions.pageSizes.subscribe(function (data) {
self.refresh();
});
self.pagingOptions.pageSize.subscribe(function (data) {
self.refresh();
});
self.pagingOptions.currentPage.subscribe(function (data) {
self.refresh();
});
// grid
self.gridOptions = {
data: self.items,
enablePaging: true,
multiSelect: false,
filterOptions: self.filterOptions,
pagingOptions: self.pagingOptions,
columnDefs: [{
field: "id",
displayName: "ID"
}, {
field: "title",
displayName: "Title"
}]
};
self.refresh();
}
ItemsViewModel.prototype.refresh = function () {
"use strict";
// TODO: add filterOptions
var...