Demonstrate col model property "align"

Demonstrate col model property "align"

by craigcav

HTML

<script src="http://dl.dropbox.com/u/16870890/jsgrid/json2.min.js"></script>
<script src="http://dl.dropbox.com/u/16870890/jsgrid/knockout.js"></script>
<script src="http://dl.dropbox.com/u/16870890/jsgrid/grid.locale-en.js"></script>
<script src="http://dl.dropbox.com/u/16870890/jsgrid/jquery.jqGrid.js"></script>
<script src="https://rawgithub.com/CraigCav/Knockout-jqGridBinding/master/src/ko.gridBinding.js"></script>
<h2>Knockout JQgrid binding - Demonstrate col model property "align"</h2>

<div id="pager"></div>
<table id="workflow" data-bind="jqGrid: { data: items, selectedItem: editModel }">
    <caption>Example</caption>
    <thead> 
        <tr> 
            <th data-field="col1" data-align="left">First</th> 
            <th data-field="col2" data-align="center">Second</th> 
            <th data-field="col3" data-align="right">Third</th> 
        </tr> 
    </thead> 
</table>
<button type="submit" data-bind='click: addItem'>Add item</button>

CSS

table {
 width: 100%;
 border-collapse:collapse;
}
table, th, td
{
border: 1px solid black;
}

#pg_pager, .ui-jqdialog-content {
  display: none;
}

JavaScript

$(function () {
    var viewModel = {
        items: ko.observableArray([]),
        editModel: ko.observable(),
        addItem: function () {
            this.items.push({ col1: '1', col2: '2', col3: '3'});
        }
    };

    viewModel.addItem();
    viewModel.addItem();
  
    ko.applyBindings(viewModel);
});