Wijmo Grid Formatting

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.4.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.4.min.js"></script>
<script src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.4.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<table id="t1" data-bind="wijgrid: {
    data: gridData,
    columns: [
    {  dataKey: 'AssetCode', dataType: 'string'},
    { headerText: 'Owner name', dataKey: 'Owner'},
    { headerText: 'VIN', dataKey: 'VIN', dataType: 'string' },
    { headerText: 'Odometer', dateKey: 'Odo', dataType: 'number' },
    { headerText: 'Time', dataKey: 'TimeStamp', dataType: 'datetime', dataFormatString: timePattern }
]}"></table>

<div>
    <span>Model time pattern: </span>
    <span data-bind="text: timePattern"></span>
</div>

<button data-bind="click: changePattern24">24 Hour</button>
<button data-bind="click: changePattern12">12 Hour</button>

CSS

table { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif;
        font-size: 0.75em;}

JavaScript

var someData =[ { AssetCode: "Truck 5",
                  Owner: {
                     id: 1,
                     name: 'Pete'},
                  VIN: "T3SN2ADN",
                  Odo: 232109,
                  TimeStamp: "2012-07-21T09:13:12Z"},
                { AssetCode: "Car 8",
                  Owner: {
                     id: 3,
                     name: 'Brian'},
                  VIN: "COFAQ211",
                  Odo: 433299,
                  TimeStamp: "2012-07-17T15:34:54Z"},
                { AssetCode: "Boat 7",
                  Owner: {
                     id: 4,
                     name: 'Gary'},
                  VIN: "B9AH22K",
                  Odo: 92938,
                  TimeStamp: "2012-07-14T18:47:33Z"} ];

function ViewModel()
{
    var self = this;
    self.gridData = ko.observableArray(someData);
    self.timePattern = ko.observable("yyyy-M-d h:mm tt");
   
    self.changePattern12 = function() {
        self.timePattern("yyyy-M-d h:mm tt");
    };
    
    self.changePattern24 = function() {
        self.timePattern("yyyy-m-d HH:mm");
    };
}

ko.applyBindings(new ViewModel());