Knockout-jqGridBinding

HTML

<script src="http://rawgithub.com/CraigCav/Knockout-jqGridBinding/master/examples/lib/jquery-1.6.1.min.js"></script>
<script src="http://rawgithub.com/CraigCav/Knockout-jqGridBinding/master/examples/lib/jquery.jqGrid.js"></script>
<script src="http://rawgithub.com/CraigCav/Knockout-jqGridBinding/master/src/ko.gridBinding.js"></script>
<link rel="stylesheet" href="http://rawgithub.com/CraigCav/Knockout-jqGridBinding/master/examples/content/ui.jqgrid.css">
<link rel="stylesheet" href="http://rawgithub.com/CraigCav/Knockout-jqGridBinding/master/examples/content/jquery-ui-1.8.1.custom.css">
<table id="animals" data-bind="grid: { data: animals }" >
    <thead> 
        <tr> 
            <th data-field="actions" style="width:27px;"></th>
            <th data-field="name" width="150px">Item Name</th> 
            <th data-field="sales">Sales Count</th> 
            <th data-field="price">Price</th> 
        </tr> 
    </thead> 
    <tbody>
        <tr>
            <td data-field="actions">
                <a class="grid-edit" data-bind="attr:{ href: 'animals/' + id, title: name }, text: id"></a>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

var dataService = {
        GetAnimals: function(callback){
            var initialData = [
                { id:1, name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                { id:2, name: "Speedy Coyote", sales: 89, price: 190.00 },
                { id:3, name: "Furious Lizard", sales: 152, price: 25.00 },
                { id:4, name: "Indifferent Monkey", sales: 1, price: 99.95 },
                { id:5, name: "Brooding Dragon", sales: 0, price: 6350 },
                { id:6, name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                { id:7, name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];
            callback(initialData);
        }
    };
    var viewModel = {
        animals: ko.observableArray([
                { id:1, name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                { id:2, name: "Speedy Coyote", sales: 89, price: 190.00 },
                { id:3, name: "Furious Lizard", sales: 152, price: 25.00 },
                { id:4, name: "Indifferent Monkey", sales: 1, price: 99.95 },
                { id:5, name: "Brooding Dragon", sales: 0, price: 6350 },
                { id:6, name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                { id:7, name: "Optimistic Snail", sales: 420, price: 1.50 }
            ]),
    };
    
    dataService.GetAnimals(function (result) {
        viewModel.animals(result);
    });
    
    ko.applyBindings(viewModel);