Getting started with SlickGrid

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

by Leonardo Trimarchi

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="https://threedubmedia.googlecode.com/files/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>
<script src="https://github.com/mleibman/SlickGrid/blob/master/slick.editors.js"></script>
<link rel="stylesheet" href="https://github.com/mleibman/SlickGrid/blob/master/css/smoothness/jquery-ui-1.8.16.custom.css">
<script src="https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.cellrangedecorator.js"></script>
<script src="https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.cellrangeselector.js"></script>
<script src="https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.cellselectionmodel.js"></script>
<script src="https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.rowselectionmodel.js"></script>
<script src="https://github.com/mleibman/SlickGrid/blob/master/slick.formatters.js"></script>
This was based on rniemeyer's excellent jsfiddle
<br>http://jsfiddle.net/rniemeyer/A9NrP/
<br>
<br>App to lead incentive program
<br>
<br>
<br>
<br>
<div id="grid" data-bind="slickGrid: { data: items, columns: columns  }"></div>
<a href="#" data-bind="click: addItem">Add Item</a> 
<form data-bind="submit: sendrequest">
    <button type="submit">Submit</button>
</form>
<br>
<br>
<br>
<div class='Agent Form'>
    <p>First name:
        <input data-bind='value: firstName' />
    </p>
    <p>Last name:
        <input data-bind='value: lastName' />
    </p>
    <p>Agent NPN:
        <input data-bind='value: NPN' />
    </p>
    <p>Lead Location:
 ...

CSS

#grid {
    height: 300px;
}
.cell-title {
    font-weight: bold;
}
.cell-effort-driven {
    text-align: center;
}

JavaScript

var grid;
var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: false
};


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, policynumber, IssueDate, InsuredName, PolicyStatus, PolicyType, RequestDate, RequestStatus) {
    this.id = id;
    this.name = policynumber;
    this.IssueDate = IssueDate;
    this.InsuredName = InsuredName;
    this.PolicyStatus = PolicyStatus;
    this.PolicyType = PolicyType;
    this.RequestDate = RequestDate;
    this.RequestStatus = RequestStatus;
}

var viewModel = {
    items: ko.observableArray([]),
    addItem: function () {
        this.items.push(new Item(0, "New", Date()));
    },
    columns: [{
        id: "id",
        name: "ID",
        field: "id"
    }, {
        id: "policynumber",
        name: "Policy number",
        field: "policynumber"
    }, {
        id: "IssueDate",
        name: "Issue Date",
        field: "IssueDate"
    }, {
        id: "InsuredName",
        name: "Insured Name",
        field: "InsuredName"
    }, {
        id: "PolicyStatus",
        name: "Policy Status",
        field: "PolicyStatus"
    }, {
        id: "PolicyType",
        name: "Policy Type",
        field: "PolicyType"
    }, {
        id: "RequestDate",
        name: "Request Date",
 ...