SlickGrid with Backbone.js

An example of using slickgrid with an MVC framework, in this example, using Backbone.js

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.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/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>

CSS

#grid { height: 500px; width: 300px;}

JavaScript

var element = $('#grid');

var columns = [
    {
    id: 'id',
    name: 'ID',
    field: 'id'},
{
    id: 'title',
    name: 'TITLE',
    field: 'title'}
];

var options = {
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: true,
    forceFitColumns: false,
    topPanelHeight: 25
};

var dataView = new Slick.Data.DataView();

var grid = new Slick.Grid(element, dataView, columns, options);

dataView.addItem({
    id: 1,
    title: 'My Title'});

grid.render();