Getting started with SlickGrid

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

by darrenarbell

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: {items:gridViewModel.items  ,columns:gridViewModel.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 = function() {
    this.items = ko.observableArray([
        new Item(1, "One", 4.50),
        new Item(2, "Two", 5.00),
        new Item(3, "Three", 7.50)
        ]);
 
    this.gridViewModel = {
        data: this.items,
        columns: [
        {
        id: "id",
        name: "ID",
        field: "id"},
    {
        id: "name",
        name: "Name",
        field: "name"},
    {
        id: "price",
        name: "Price",
        field: "price"}
    ]};
};

ko.applyBindings(viewModel);