Getting started with SlickGrid

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

by ericjohannsen

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.5.custom.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<div id="grid" data-bind="slickGrid: { data: items, columns: columns  }"></div>
<a href="#" data-bind="click: addItem">Add Item</a>

CSS

#grid { height: 500px; }

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.render();   
    }
}

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

var viewModel = {
    items: ko.observableArray([
        new Item(1, "One", 4.50),
        new Item(2, "Two", 5.00),
        new Item(3, "Three", 7.50)
        ]),
    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"}
    ]
};

ko.applyBindings(viewModel);