can.ui.Grid API

## Purpose:
- a lightweight scrollable table, hooked up to an observe.list for auto-updating
## Learn from:
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
- https://github.com/mleibman/SlickGrid/wiki/API-Reference
## Options:
- list - Can be
- `can.Observe.List` - Uses the list passed
- `Array` - Will be converted to a can.Observe.List
- `Deferred` - Will set the grid to loading state and render with the resolved data
- `can.compute` - A compute that returns any of the above
- `emptyText` - what to show when nothing is visible
- `loadingText` - The text to show when waiting for a `can.Deferred` to resolve
- `columns` - columns to display. Format: `{ header : 'Header text', attr : 'attribute' }` `attr` can be either the attribute name or a `function(element, index)` which gets the current element and index passed to generate computed properties.
## Events:
- `init` - Will be triggered after the grid initialized (will reinitialize when the columns update)
- `redraw` - Fired after the grid rendered all its content
## Methods:
- `list` - updates the list. Same as in options
- `emptyText` - updates the emptyText
- `loadingText` - updates the loading text (shown when a can.Deferred is passed as list)
- `columns` - updates the columns
- `rows([observes])` - Returns a list of all row elements or a list of rows that represent the given observe(s)
- `items([rows])` - Returns the currently displayed `can.Observe.List` or a `can.Observe.List` with the Observes represented by the given row element(s)
## Theming:

Default views Twitter Bootstrap themed. Include stylesheets with `steal('canui/style')`.
## Examples:
### Ajax loading

Passing `can.Deferred`:

``` javascript
var grid = new can.ui.Grid('#grid', {
columns : [
{
header : 'Name',
attr : 'name'
},
{
header : 'Age',
attr : 'age'
},
{
header : 'Stuff',
attr : function(element, index, data) {
return element.attr('name') + ' (' + element.attr('age') + ')';
}
}
],
list : Model.findAll()
});
```

**Computed Deferred:**

Automatic pagination with `can.Observe` and `can.compute`:

``` javascript
var pager = new can.Observe({ offset : 10, limit : 10 }),
listLoader = can.compute(function() {
var offset = pager.attr('offset'),
limit = offset + pager.attr('limit');

return Model.findAll({ limit : limit, offset : offset });
}),
grid = new can.ui.Grid('#grid', {
columns : [
{
header : 'Name',
attr : 'name'
},
{
header : 'Age',
attr : 'age'
}
],
list : listLoader
});
```
### Computed properties in columns

``` javascript
var grid = new can.ui.Grid('#grid', {
columns : [
{
header : 'Name',
attr : 'name'
},
{
header : 'Person',
attr : function(element) {
return element.attr('name') + ' (' + element.attr('age') + ')';
}
}
],
list : Model.findAll()
});
```
### Getting models from columns and vice versa

``` javascript
var people = Model.models([ ... ]);
var grid = new can.ui.Grid('#grid', {
columns : [
{
header : 'Name',
attr : 'name'
},
{
header : 'Person',
attr : function(element) {
return element.attr('name') + ' (' + element.attr('age') + ')';
}
}
],
list : people
});

grid.find('row').click(function() {
var model = grid.items(this);
});

$('button').click(function() {
var folks = [
people[1],
people[3]
];
var rowElements = grid.rows(folks);
// [ , ]
});
```
### Forever Scroll

``` javascript
var items = new can.Observe.List();

var grid = new can.ui.Grid("#todos", {
list : items
});

$(grid.elements().scrollBody).bind("scroll", function(){
if( atBottom ){
Task.findAll(nextSet).then(function(tasks){
items.push(tasks);
})
}
})
```
### Editable Grid
- hook up controls in the template?
### Filters

With filter Observe and `can.compute`:

``` javascript
var people = new Model.list(), // expect to have Model instances in here
filter = new can.Observe({
min : 70,
max : 90
}),
filterCompute = can.compute(function () {
var folks = new can.Observe.List(), age;
for (var i = 0; i < people.attr('length'); i++) {
age = people.attr(i + '.age');
if (age >= filter.attr('min') && age <= filter.attr('max')) {
folks.push(people[i]);
}
}
return folks;
}),
grid = new can.ui.Grid('#grid', {
columns : [ ... ],
list : filterCompute
});
```
### Multi-select
### alternating row colors w/o CSS
- listen to repaint event and draw it?
## Notes
- Provide `activate / select` events?