Getting started with SlickGrid

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

by Schnapz

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.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/examples/examples.css">
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div id="grid" class="grid-canvas" data-bind="slickGrid: { 
                                                        data: viewModel.items, 
                                                        columns: viewModel.columns, 
                                                        options: { 
                                                                    enableColumnReorder: false,
                                                                    rowHeight: 20, 
                                                                    enableAddRow: true,
                                                                    autoHeight: true
                                                                 } }"></div>
<a href="#" class="btn-link" data-bind="click: viewModel.addItem">Add Item</a>

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.setData(data, true);
        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() {
        viewModel.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();