Getting started with SlickGrid

https://groups.google.com/d/topic/knockoutjs/OsvpsIfI_fs/discussion

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
This was based on rniemeyer's excellent jsfiddle<br>
    http://jsfiddle.net/rniemeyer/A9NrP/
<br>
<br>
However, when adding lots of rows in that version, the scrollbar breaks.
<br>
<br>
This version ensures that when rows are added and the vertical scrollbar appears,
the scrollport view size is recalculated. Add some rows and see the scrollbar works correctly.

<br><br>
<div id="grid" data-bind="slickGrid: { data: items, columns: columns  }"></div>
<a href="#" data-bind="click: addItem">Add Item</a>

CSS

#grid { height: 300px; }

JavaScript

var grid;

ko.bindingHandlers.slickGrid = {
    init: function(element, valueAccessor) {
        var settings = valueAccessor();
        var data = ko.utils.unwrapObservable(settings.data);
        var columns = ko.utils.unwrapObservable(settings.columns);
        var options = ko.utils.unwrapObservable(settings.options) || {};
        grid = new Slick.Grid(element, data, columns, options);
    },
    update: function(element, valueAccessor, allBindingAccessor, viewModel) {
        var settings = valueAccessor();
        var data = ko.utils.unwrapObservable(settings.data); //just for subscription
        grid.resizeCanvas(); // NB Very important for when a scrollbar appears
        grid.render();
    }
}

function Item(id, name, price) {
    this.id = id;
    this.name = name;
    this.price = price;
}

var viewModel = {
    items: ko.observableArray([]),
    addItem: function() {
        this.items.push(new Item(0, "New", 5.00));
    },
    columns: [
        {
        id: "id",
        name: "ID",
        field: "id"},
    {
        id: "name",
        name: "Name",
        field: "name"},
    {
        id: "price",
        name: "Price",
        field: "price"}
    ]
};

for (var i = 0; i < 10; i++) {
    viewModel.items.push(
    new Item(i, "A row", 4.50));
}

ko.applyBindings(viewModel);