This document provides an overview of Backgrid.js, a Backbone plugin for building semantic and stylable data grids. It discusses what Backbone and frameworks are, demonstrates how to initialize a Backgrid with models and collections in Backbone, and highlights key Backgrid features like filtering, pagination, and cell types. Advantages mentioned are being lightweight, having an overridden Backbone render function for easier changes, and event handling.

1. Backgrid.js A Backbone Plugin

2. Hello!
I am Neerav
I work as a UI Developer at MetricStream.

3. AGENDA
• A quick look at Backbone.js
• Backgrid.js
• Usage
• Advantages
• Disadvantages
• Questions

4. What is a Framework?

5. “
A framework structures your App.
A library fits into existing structure

6. Backbone.js – A quick overview
Backbone.js is a
JavaScript framework with
a RESTful JSON interface
and is based on the
model–view–presenter
(MVP) application design
paradigm
Backbone is known for
being lightweight, as its
only dependency is on one
JavaScript
library Underscore.js
Designed for developing
single-page web
applications and for
keeping various parts of
web applications (e.g.
multiple clients and the
server) synchronized

7. A picture is worth a thousand words

8. Backgrid.js
Backgrid.js is a set of components for
building semantic and easily
stylable data grid widgets.

9. Backgrid - Model
var Territory = Backbone.Model.extend({ });

10. Backgrid - Collection
var Territories = Backbone.Collection.extend({
model: Territory,
url: "examples/territories.json"
});

11. Backgrid – Where magic happens
var grid = new Backgrid.Grid({
columns: columns,
collection: territories
});
// Render the grid and attach the root to your HTML document
$("#example-1-result").append(grid.render().el);

12. What features do you
expect from a grid?

13. Expected Features from a Datagrid
Sorting
Filtering
Support Different Data types
Editing on the go
and…

14. Backgrid.js - Filtering
var filter = new
Backgrid.Extension.ClientSideFilter({
collection: pageableTerritories,
fields: ['name']
});
// Render the filter
$example2.before(filter.render().el);

15. Backgrid.js - Pagination
// Initialize the paginator
var paginator = new
Backgrid.Extension.Paginator({
collection: pageableTerritories
});
// Render the paginator
$example2.after(paginator.render().el);

16. Backgrid.js – Cell Types
{
name: "percentage",
label: "% of World Population",
cell: "number" // A cell type for floating point value, defaults to have a
precision 2 decimal numbers
}, {
name: "date",
label: "Date",
cell: "date"
}, {
name: "url",
label: "URL",
cell: "uri”
}

17. Why Backgrid.js?
Is it Browser Compatible
Learning Curve
Stylable
Documentation And Size
Is It secure
Is it Production ready

18. Why Backgrid.js?
Backgrid implementation is highly inspired from Marionette.js
Like Marionette , Backgrid has overridden the Backbone render
function to make changes to the view easier for the developer.
Event Handling
Overrides backbone Render().

19. Thanks!
Any questions?