index.html | searchcode

/index.html

https://github.com/rhinoman/backgrid
HTML | 1903 lines | 1785 code | 103 blank | 15 comment | 0 complexity | e1de209f884b16cb7de88602fba882fc MD5 | raw file
Possible License(s): MIT

<!doctype html>
<!--
  backgrid
  http://github.com/wyuenho/backgrid

  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
  Licensed under the MIT @license.
 -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="keywords" content="backgrid,backgrid.js,backbone,backbone.js,datagrid,grid,paginator,javascript" />
    <meta name="description" content="A powerful widget set for building data grids with Backbone.js" />

    <title>Backgrid.js - A powerful widget set for building data grids with Backbone.js</title>

    <link rel="canonical" href="http://backgridjs.com" />

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/ambiance.min.css" />
    <link rel="stylesheet" href="lib/backgrid.min.css" />
    <link rel="stylesheet" href="lib/extensions/paginator/backgrid-paginator.min.css" />
    <link rel="stylesheet" href="lib/extensions/text-cell/backgrid-text-cell.min.css" />
    <link rel="stylesheet" href="lib/extensions/moment-cell/backgrid-moment-cell.min.css" />
    <link rel="stylesheet" href="lib/extensions/select2-cell/backgrid-select2-cell.min.css" />
    <link rel="stylesheet" href="lib/extensions/select-all/backgrid-select-all.min.css" />
    <link rel="stylesheet" href="lib/extensions/filter/backgrid-filter.min.css" />
    <link rel="stylesheet" href="assets/css/doc.css" />
    <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
        <![endif]-->
  </head>
  <body>
    <div id="main">
      <header>
        <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <a href="."
                 class="brand" title="A powerful widget set for building data grids with Backbone.js">Backgrid.js</a>
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <div class="nav-collapse collapse">
                <ul class="nav nav-pills">
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                      Introduction
                      <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a href="#features">Features</a></li>
                      <li><a href="#getting-started">Getting Started</a></li>
                      <li><a href="#examples">Examples</a></li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                      API Reference
                      <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a href="#api-grid">Grid</a></li>
                      <li><a href="#api-column">Column</a></li>
                      <li><a href="#api-cell">Cell</a></li>
                      <li><a href="#api-formatter">Formatter</a></li>
                      <li><a href="#api-header">Header</a></li>
                      <li><a href="#api-row">Row</a></li>
                      <li><a href="#api-body">Body</a></li>
                      <li><a href="#api-footer">Footer</a></li>
                      <li class="divider"></li>
                      <li><a href="#extensions"><strong class="muted">Extensions</strong></a></li>
                      <li class="divider"></li>
                      <li><a href="#api-select-all">SelectAll</a></li>
                      <li><a href="#api-paginator">Paginator</a></li>
                      <li><a href="#api-filter">Filter</a></li>
                      <li><a href="#api-text-cell">TextCell</a></li>
                      <li><a href="#api-moment-cell">MomentCell</a></li>
                      <li><a href="#api-select2-cell">Select2Cell</a></li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                      More Info
                      <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a href="#styling">Styling</a></li>
                      <li class="divider"></li>
                      <li><a href="#faq">FAQ</a></li>
                      <li><a href="https://github.com/wyuenho/backgrid/blob/master/CHANGELOG.md" target="_blank">Change Log</a></li>
                      <li><a href="#license">License</a></li>
                    </ul>
                  </li>
                  <li id="social-media">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://backgridjs.com" data-counturl="wyuenho.github.com/backgrid" data-via="wong_jim" data-hashtags="backgridjs,backbone_js">Tweet</a>
                    <div class="g-plusone" data-size="medium"></div>
                    <iframe src="http://ghbtns.com/github-btn.html?user=wyuenho&repo=backgrid&type=watch&count=true"
                            allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
                    <a href="https://coderwall.com/wyuenho"><img alt="Endorse wyuenho on Coderwall" src="http://api.coderwall.com/wyuenho/endorsecount.png" /></a>
                    <iframe allowtransparency="true" frameborder="0" scrolling="no"
                            style="border: 0; margin: 0 0 0 15px; padding: 0;"
                            src="https://www.gittip.com/wyuenho/widget.html" width="48pt" height="22pt"></iframe>
                  </li>
                </ul>
              </div>
            </div>
            <a class="visible-desktop" href="https://github.com/wyuenho/backgrid">
              <img style="position: absolute; top: 0; right: 0; border: 0;" src="assets/img/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
            </a>
          </div>
        </div>
      </header>
      <div class="container">
        <section class="hero-unit">
          <h1>Backgrid.js</h1>
          <p class="lead">
            Backgrid.js is a set of components for
            building <strong>semantic</strong> and <strong>easily
            stylable</strong> <strong>data grid</strong> widgets.</p>
          <p class="lead">It offers a simple, intuitive
              programming interface that makes easy things easy, but <em>hard things possible</em>
              when dealing with tabular data.</p>
          <p>
            <div class="btn-group">
              <a class="btn btn-large btn-success" href="#examples">See Examples</a>
              <a class="btn btn-large btn-primary hidden-phone hidden-tablet"
                 href="https://github.com/wyuenho/backgrid/tags">Download v0.2.6</a>
              <a class="btn btn-large btn-info"
                 href="https://github.com/wyuenho/backgrid/blob/0.2.6/CHANGELOG.md">What's new?</a>
            </div>
          </p>
        </section>
        <div id="features">
          <div class="page-header">
            <h1>Features</h1>
            <p>The goal of Backgrid.js is to produce a set of core Backbone UI
              elements that offer you all the basic displaying, sorting and
              editing functionalities you&apos;d expect, and to create an
              elegant API that makes extending Backgrid.js with extra
              functionalities easy.</p>
          </div>
          <div class="row-fluid">
            <div class="span6">
              <h2>Advantages</h2>
              <ul>
                <li>No Hungarian notations.</li>
                <li>Solid foundation. Based
                  on <a href="http://backbonejs.org">Backbone.js</a>.</li>
                <li>Semantic and <a href="#styling">easily stylable</a>. Just
                  style with plain CSS like you would a normal HTML table.</li>
                <li>Low learning curve. Works with plain old Backbone models and
                  collections. Easy things are easy, hards things possible.</li>
                <li>Highly modular and customizable. Componenets are just simple
                  Backbone View classes, customization is easy if you already
                  know Backbone.</li>
                <li>Lightweight. Extra features are separated
                  into <a href="#extensions">extensions</a>, which keeps the
                  bloat away.</li>
                <li>Good documentation.</li>
                <li>Well tested. Comes with <a href="test/" title="Jasmine Tests">100s of test cases</a>.</li>
              </ul>
            </div>
            <div class="span6">
              <h2>Supported browsers: <b style="font-size: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;">[1]</b></h2>
              <ul>
                <li>Internet Explorer 8+</li>
                <li>Chrome 4+</li>
                <li>Safari 4+</li>
                <li>Firefox 4+</li>
                <li>Opera 9+</li>
              </ul>
              <aside class="note">
                <h3>Notes:</h3>
                <div>1. Both the desktop and mobile versions of the above browsers are supported.</div>
              </aside>
            </div>
          </div>
        </div>
        <section id="getting-started">
          <div class="page-header">
            <h1>Getting Started</h1>
          </div>
          <div class="row-fluid">
            <div class="span6">
              <p>
                Backgrid.js depends on 3 libraries to function:
              </p>
              <ul>
                <li><a href="http://jquery.com">jquery &gt;= 1.7.0</a></li>
                <li><a href="http://underscorejs.org">underscore.js ~ 1.4.0</a></li>
                <li><a href="http://backbonejs.org">backbone.js >= 0.9.10</a></li>
              </ul>
              <aside class="note">
                <h5>Note:</h5> If you don&apos;t care about having the latest
                versions of the dependencies, you can use the bundled libraries
                in the download package.
              </aside>
            </div>
            <div class="span6">
              <p>
                Something like the following will get
                the <strong>Backgrid.js</strong> core loaded:
              </p>
              <textarea class="code-snippet" data-mode="htmlmixed">
                &lt;link rel="stylesheet" href="lib/backgrid.css" /&gt;
                &lt;script src="assets/js/jquery.js"&gt;&lt;/script&gt;
                &lt;script src="assets/js/underscore.js"&gt;&lt;/script&gt;
                &lt;script src="assets/js/backbone.js"&gt;&lt;/script&gt;
                &lt;script src="lib/backgrid.js"&gt;&lt;/script&gt;</textarea>
              <p>Adjust the paths as needed.</p>
            </div>
          </div>
        </section>
        <section id="examples">
          <div class="page-header">
            <h1>Examples</h1>
          </div>
          <div class="row-fluid">
            <div class="span12">
              <div class="row-fluid">
                <div class="span6">
                  <h2>Collection and Model</h2>
                  <p>Before you can display any tabular data in a grid, you must
                    first obtain the data.</p>
                  <p>At the most basic level, Backgrid pretends that every row
                    is a model object and the whole table is backed by a simple
                    Backbone collection.</p>
                  <p>Suppose we have a list of territory info objects:</p>
                </div>
                <div class="span6">
                  <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
                    var Territory = Backbone.Model.extend({});

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

                    var territories = new Territories();</textarea>
                </div>
              </div>
              <div class="row-fluid">
                <div class="span12">
                  <h2 id="example-1">Grid</h2>
                  <p>
                    The main entry point of the Backgrid package is the
                    Backgrid.Grid class. You can create a default Backgrid by
                    first defining some columns, and then put that list of
                    columns and the collection of data into the Grid constructor
                    like this:
                  </p>
                  <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
                    var columns = [{
                      name: "id", // The key of the model attribute
                      label: "ID", // The name to display in the header
                      editable: false, // By default every cell in a column is editable, but *ID* shouldn&apos;t be
                      // Defines a cell type, and ID is displayed as an integer without the &apos;,&apos; separating 1000s.
                      cell: Backgrid.IntegerCell.extend({
                        orderSeparator: &apos;&apos;
                      })
                    }, {
                      name: "name",
                      label: "Name",
                      // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
                      cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
                    }, {
                      name: "pop",
                      label: "Population",
                      cell: "integer" // An integer cell is a number cell that displays humanized integers
                    }, {
                      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" // Renders the value in an HTML anchor element
                    }];

                    // Initialize a new Grid instance
                    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);

                    // Fetch some countries from the url
                    territories.fetch({reset: true});</textarea>
                </div>
              </div>
              <div class="row-fluid">
                <div class="span12">
                  <h3>Result</h3>
                  <div id="example-1-result" class="backgrid-container"></div>
                  <aside class="note">See <a href="http://en.wikipedia.org/wiki/List_of_countries_by_population">Wikipedia</a></aside>
                  <br />
                  <p>The list of column definitions Backgrid.Grid expects is
                    simply a list of JSON objects, which you can hardcode into
                    your HTML templates or retrieve from a server when the DOM
                    is ready. Backgrid.js doesn&apos;t care where the column
                    definitions come from, as long as you supply the list to the
                    Grid constructor.</p>
                  <p>As expected, you now have a basic editable data grid
                    displayed. All the columns headers are labeled and sortable by
                    default. ID cells are not editable, and all other cell types
                    have reasonable validation built in. If the table gets too
                    large, you get a scroll bar.</p>
                  <p>Backgrid.js comes with <a href="#api-cell" title="Cells">10
                      basic cell types</a> in the core
                      and <a href="#api-text-cell" title="TextCell">many others
                      as extensions</a>. Cell types such as
                    <a href="#api-select2-cell"
                       title="Select2Cell">Select2Cell</a>
                       and <a href="#api-moment-cell"
                       title="MomentCell">MomentCell</a> give you a much richer
                       editing interface for option lists and datetime values on
                       desktop browsers. In addition, there&apos;s a wide range
                       of possibilities with how the data is converted for
                       display and persistence by using <a href="#api-formatter"
                       title="Formatter">formatters</a> or
                       customizing <a href="#api-cell">cell classes</a>.</p>
                </div>
              </div>
              <div class="row-fluid">
                <div class="span12">
                  <h2 id="example-2">A More Complete Example</h2>
                  <p>If you have a large result set like the above, you&apos;d
                    probably want to be able to paginate and filter your
                    results. This is easily achieved in Backgrid.js.</p>
                  <p>Backgrid.js comes with a number of filters and a paginator
                    extension which you can load by including the following into
                    your <code>head</code> tag:</p>
                  <textarea class="code-snippet" data-mode="htmlmixed">
                    &lt;link rel="stylesheet" href="lib/extensions/filter/backgrid-filter.css" /&gt;
                    &lt;link rel="stylesheet" href="lib/extensions/paginator/backgrid-paginator.css" /&gt;
                    &lt;script src="assets/js/backbone-pageable.js"&gt;&lt;/script&gt;
                    &lt;script src="lib/extensions/filter/backgrid-filter.js"&gt;&lt;/script&gt;
                    &lt;script src="lib/extensions/paginator/backgrid-paginator.js"&gt;&lt;/script&gt;</textarea>
                  <p>To use the paginator, you must first declare your
                    collections to be
                    a <a href="https://github.com/wyuenho/backbone-pageable/"
                         title="Backbone.PageableCollection">Backbone.PageableCollection</a>,
                    which is a simple subclass of the Backbone.js Collection with added
                    pagination behavior.</p>
                  <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
                    var PageableTerritories = Backbone.PageableCollection.extend({
                      model: Territory,
                      url: "examples/pageable-territories.json",
                      state: {
                        pageSize: 15
                      },
                      mode: "client" // page entirely on the client side
                    });

                    var pageableTerritories = new PageableTerritories();

                    // Set up a grid to use the pageable collection
                    var pageableGrid = new Backgrid.Grid({
                      columns: columns,
                      collection: pageableTerritories
                    });

                    // Render the grid
                    var $example2 = $("#example-2-result");
                    $example2.append(pageableGrid.render().$el)

                    // Initialize the paginator
                    var paginator = new Backgrid.Extension.Paginator({
                      collection: pageableTerritories
                    });

                    // Render the paginator
                    $example2.append(paginator.render().$el);

                    // Initialize a client-side filter to filter on the client
                    // mode pageable collection's cache.
                    var filter = new Backgrid.Extension.ClientSideFilter({
                      collection: pageableTerritories.fullCollection,
                      fields: ['name']
                    });

                    // Render the filter
                    $example2.prepend(filter.render().$el);

                    // Add some space to the filter and move it to the right
                    filter.$el.css({float: "right", margin: "20px"});

                    // Fetch some data
                    pageableTerritories.fetch({reset: true});</textarea>
                </div>
              </div>
              <div class="row-fluid">
                <div class="span12">
                  <h3>Result</h3>
                  <div id="example-2-result" class="backgrid-container"></div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div class="page-header">
            <h1>API Reference</h1>
          </div>
          <div class="row-fluid">
            <div class="span2">
              <h2 id="api-grid">Grid</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Grid">Backgrid.Grid</a></li>
              </ul>
              <h3>Events</h3>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Grid-method-render">backgrid:rendered</a></li>
              </ul>
            </div>
            <div class="span10">
              <h3>How to Use the Grid</h3>
              <p>As described in the <a href="#examples">examples</a> above, a
                basic grid needs only a collection and a list of column
                definitions.</p>
              <h3>Manipulating Columns and Rows</h3>
              <p>It is very easy to insert or remove a row in a grid, you just
                have to pass a model reference
                to <a href="api/index.html#!/api/Backgrid.Grid-method-insertRow">Grid#insertRow</a>
                or <a href="api/index.html#!/api/Backgrid.Grid-method-removeRow">Grid#removeRow</a>.</p>
              <textarea class="code-snippet" data-mode="javascript">
                // Inserting rows
                grid.insertRow([{
                  // model 1
                }, {
                  // model 2 ... etc
                }]);

                // Remove rows
                var musketeers = grid.collection.where({ job: "Musketeer" });
                grid.removeRow(musketeers);</textarea>
              <p>Inserting and remove columns is similarly easy. You just need
                to pass some definitions
                to <a href="api/index.html#!/api/Backgrid.Grid-method-insertColumn">Grid#insertColumn</a>
                or
                <a href="api/index.html#!/api/Backgrid.Grid-method-removeColumn">Grid#removeColumn</a>.</p>
              <textarea class="code-snippet" data-mode="javascript">
                // Insert a few new columns. Make sure your model has these attributes though.
                grid.insertColumn([{

                    name: "selected",
                    label: "",
                    cell: "boolean",
                    sortable: false,
                    headerCell: MySelectAllCell

                  }, {

                    name: "address",
                    label: "Address",
                    cell: "string"

                  }]);

                // Remove a column
                var genderCol = grid.columns.where({ name: "gender" });
                grid.removeColumn(genderCol);</textarea>
              <h3>Customization</h3>
              <p>The various ways of customizing a grid are described in the
                following sections.</p>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span2">
              <h2 id="api-column">Columns</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Column" title="Backgrid.Column">Backgrid.Column</a></li>
                <li><a href="api/index.html#!/api/Backgrid.Columns" title="Backgrid.Columns">Backgrid.Columns</a></li>
              </ul>
            </div>
            <div class="span10">
              <h3>Column Defaults</h3>
              <p>Column defaults and required parameters are defined in
                the <a href="api/index.html#!/api/Backgrid.Column-method-initialize">Backgrid.Column#initialize</a>
                method.</p>
              <h3>Column Definition</h3>
              <p>A Column is a placeholder for a column definition.</p>
              <p>You usually don&apos;t need to create an instance of this class
                yourself, as a collection of column instances will be created for
                you from a list of column object literals you provide to the
                Backgrid.js view class constructors.</p>
              <p>Internally, columns are stored as a collection in the form of
                Backgrid.Columns. In addition, all parent views will convert the
                column definition into
                a <a href="api/index.html#!/api/Backgrid.Columns">Backgrid.Columns</a>
                collection and pass a reference to any subviews that require
                it.</p>
              <h3>Listening to Column Attribute Changes</h3>
              <p>Occasionally, you may want to listen to column attribute change
                events. In that case, you can choose to initialize a
                Backgrid.Columns collection and listen to events from the
                individual models.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                var myColumns = new Backgrid.Columns({
                  name: "id", label: "ID", cell: "string"
                }, {
                  // ...
                });

                myColumns.on("change:renderable", function (col, colAttr) {
                  if (!colAttr) {
                    // hide the column
                  }
                });</textarea>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span2">
              <h2 id="api-cell">Cell</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Cell">Backgrid.Cell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.DatetimeCell">Backgrid.DatetimeCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.DateCell">Backgrid.DateCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.TimeCell">Backgrid.TimeCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.NumberCell">Backgrid.NumberCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.IntegerCell">Backgrid.IntegerCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.StringCell">Backgrid.StringCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.UriCell">Backgrid.UriCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.EmailCell">Backgrid.EmailCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.BooleanCell">Backgrid.BooleanCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.SelectCell">Backgrid.SelectCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.CellEditor">Backgrid.CellEditor</a></li>
                <li><a href="api/index.html#!/api/Backgrid.InputCellEditor">Backgrid.InputCellEditor</a></li>
                <li><a href="api/index.html#!/api/Backgrid.SelectCellEditor">Backgrid.SelectCellEditor</a></li>
              </ul>
              <h3>Events</h3>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Cell-method-enterEditMode">backgrid:edit</a></li>
                <li><a href="api/index.html#!/api/Backgrid.Cell-method-enterEditMode">backgrid:editing</a></li>
                <li><a href="api/index.html#!/api/Backgrid.InputCellEditor-method-saveOrCancel">backgrid:edited</a></li>
                <li><a href="api/index.html#!/api/Backgrid.InputCellEditor-method-saveOrCancel">backgrid:error</a></li>
              </ul>
            </div>
            <div class="span10">
              <h3>Demo</h3>
              <p class="label label-success">Try them</p>
              <div id="cell-demo-grid-1" class="backgrid-container" style="height: auto"></div>
              <div id="cell-demo-grid-2" class="backgrid-container" style="height: auto"></div>
              <aside class="note">
                <h5>Note:</h5>
                <p>Backgrid.js and its author are not associated with Santa and
                  santaclaus.com in any way.</p>
              </aside>
              <h3>Configuring Cells</h3>
              <p>While many built-in cells provide reasonable defaults, you may
                choose to configure them to suit your own needs.</p>
              <p>Cell types that you are most likely to configure are the
                NumberCell, DatetimeCell and SelectCell classes. Once
                configured, you may use them as the cell attribute values in
                column definitions.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                var grid = new Backgrid.Grid({

                  columns: [{
                    name: "id",
                    label: "ID",
                    editable: false,
                    // Dynamically defines a new cell type with new defaults.
                    // ID is displayed as an integer without &apos;,&apos;s.
                    cell: Backgrid.IntegerCell.extend({
                      orderSeparator: ''
                    })
                  }, {
                    name: "lastaccessed",
                    label: "Last Login Time",
                    editable: false,
                    cell: Backgrid.DatetimeCell.extend({
                      includeMilli: true
                    })
                  }, {
                    name: "gender",
                    label: "Gender",
                    cell: Backgrid.SelectCell.extend({
                      // It's possible to render an option group or use a
                      // function to provide option values too.
                      optionValues: [["Male", "m"], ["Female", "f"]]
                    })
                  }],

                  collection: col
                });
              </textarea>
              <p class="label label-info">Pro Tip</p>
              <p>SelectCell treats all option values as strings by default, if
                you need to persist a different type of values into your model,
                you should extend SelectCell to provide your
                own <a href="#api-formatter"
                title="Formatter">formatter</a>.</p>
              <p>See the <a href="api/index.html" title="API Doc">JSDoc</a> for
                the various Cell classes for details on what you can configure
                using this method.</p>
              <h3>Custom Cell</h3>
              <p>If the built-in and extension cell classes are not enough for
                you, you may choose to create your own cell class and supply it
                to a column definition.</p>
              <p>If your custom cell will still use a
                <code>&lt;input type="text" /&gt;</code> like the predefined
                ones for editing, you may choose to
                subclass <a href="api/index.html#!/api/Backgrid.Cell">Cell</a>
                or one of the predefined classes and simply define a className
                and a <a href="#api-formatter"
                title="Formatter">formatter</a>. In fact, most of the core cell
                classes are done this way.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                // This is how StringCell is defined.

                Backgrid.StringCell = Cell.extend({

                  // Cell default class names are the lower-cased and dasherized
                  // form of the the cell class names by convention.
                  className: "string-cell"

                  formatter: Backgrid.StringFormatter

                });</textarea>
              <p>If your cell class will render differently in display mode, you
                may simply
                override <a href="api/index.html#!/api/Backgrid.Cell-method-render">Cell#render()</a>
                in your subclass.</p>
              <h3>Custom CellEditor</h3>
              <p class="label label-warning">Advanced Usage</p>
              <p>Some cell types, like the
                <a href="#api-text-cell" title="TextCell">TextCell</a>
                extension, may only make sense if the editor is rendered in a
                modal dialog or a form element in a different part of the
                page. In that case the
                default <a href="api/index.html#!/api/Backgrid.InputCellEditor"
                title="InputCellEditor">InputCellEditor</a>, which renders a
                <code>&lt;input type="text" /&gt;</code>, will not be suitable
                and a new <a href="api/index.html#!/api/Backgrid.CellEditor"
                title="CellEditor">CellEditor</a> must be defined.</p>
              <p>A custom cell editor should subclass <a
                href="api/index.html#!/api/Backgrid.CellEditor">CellEditor</a>
                as it defines a number of required parameters in its initializer
                and clean up operations that are necessary for most cell
                editors. When a cell class enters edit mode, a new editor
                instance is constructed by given it the required parameters, and
                then a Backbone event <code>backgrid:edit</code> is fired from
                the cell instance itself. A custom cell class can act on this
                event to do anything before the cell editor is rendered.</p>
              <p>Once the cell has entered edit mode, a Backbone event
                <code>backgrid:editing</code> is fired. A custom cell class can
                then act on it to do anything after the cell editor has been
                rendered, e.g. placing the focus inside the editor.</p>
              <p>During editing, if an error is encountered (see the <a
                href="#api-formatter">formatter protocol</a> below), a cell
                editor should fire a Backbone event <code>backgrid:error</code>
                so that listeners&mdash;usually a cell instance&mdash;can
                respond appropriately. When editing is done, a cell editor
                should fire a Backbone <code>backgrid:done</code> event. A cell
                should be listening to this event so it can remove its editor
                and re-render itsef in display mode.</p>
              <p class="label label-important">Truely Advanced Hacking</p>
              <p>At the most basic level, Cells and CellEditors are simply
                <a href="http://backbonejs.org/#View"
                title="Backbone.View">Backbone.View</a> classes that are
                guaranteed to be given a number of parameters when constructed
                by <a href="api/index.html#!/api/Backgrid.Row"
                title="Row">Row</a>. You can use any Backbone.View as your Cell
                and CellEditor.</p>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span2">
              <h2 id="api-formatter">Formatter</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.CellFormatter">Backgrid.CellFormatter</a></li>
                <li><a href="api/index.html#!/api/Backgrid.DatetimeFormatter">Backgrid.DatetimeFormatter</a></li>
                <li><a href="api/index.html#!/api/Backgrid.NumberFormatter">Backgrid.NumberFormatter</a></li>
              </ul>
            </div>
            <div class="span10">
              <h3>Custom Formatters</h3>
              <p>In Backgrid.js, cell formatters serves the purpose of converting values
                between JSON value types and strings, and validation. Writing
                formatters for value conversion and validation is easy as you only
                have to conform to a very simple protocol.</p>
              <p>Any formatters must have the following two methods defined:</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                var formatter = {
                  // function (*): string
                  fromRaw: function (rawData) { },
                  // function (string): *|undefined
                  toRaw: function (formattedData) { }
                };</textarea>
              <p><code>fromRaw()</code> is called by Backgrid.Cell and its
                subclasses whenever a raw model value needs to be formatted into
                a humanized form for display.</p>
              <p><code>toRaw()</code> is called by Backgrid.CellEditor and its
                subclasses whenever a user input string needs to be converted back
                to a raw JSON value for model persistence.</p>
              <h3>Validation</h3>
              <p>In addition to user input conversion, toRaw() also validates
                the user input during conversion. If the user input is invalid
                or cannot be converted to a JSON value,
                toRaw() <strong>MUST</strong> return <code>undefined</code>
                instead of throwing an Error.</p>
              <p>In addition to using formatters to do simple yes or no
                validations, if your model class has
                a <a href="http://backbonejs.org/#Model-validate"
                title="Backbone.Model#validate">validate()</a> method defined,
                it will also be used for validation after trying with the
                formatter.</p>
              <h3>Using Custom Formatters</h3>
              <p>A custom formatter can be used instead of the cell's default by
                extending the cell:</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                var grid = new Backgrid.Grid({
                  columns: [{
                    name: "url",
                    cell: "uri",
                    formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                      fromRaw: function (rawValue) {
                        return rawValue.replace("http://", '');
                      }
                    })
                  }],
                  collection: col
                });</textarea>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span2">
              <h2 id="api-header">Header</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Header">Backgrid.Header</a></li>
                <li><a href="api/index.html#!/api/Backgrid.HeaderRow">Backgrid.HeaderRow</a></li>
                <li><a href="api/index.html#!/api/Backgrid.HeaderCell">Backgrid.HeaderCell</a></li>
              </ul>
              <h3>Events</h3>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.HeaderCell-method-sort">backgrid:sort</a></li>
              </ul>
            </div>
            <div class="span10">
              <h3>Understanding the Default Header</h3>
              <p>Backgrid.js comes with a default header section, a header row
                and a header cell implementation that renders a sorter if the
                column is sortable. The text inside the header cells comes from
                the column definitions. If a <em>label</em> is not defined in a
                column definition, its name is used as the label instead.</p>
              <p>The default header cell implementation supports sorting in
                ascending or descending order, using the column&apos;s natural
                ordering. The sorter will also allow cycling back to the
                table&apos;s default sorting order, which is sorting by the
                model <a href="http://backbonejs.org/#Model-id"
                title="Backbone.Model#id">server IDs</a>
                and <a href="http://backbonejs.org/#Model-cid"
                title="Backbone.Model#cid">client IDs</a>.</p>
              <h3>Customizing the Header</h3>
              <p>If you want to change the default sort behavior to only toggle
                between sorting in ascending or descending order, you do this
                by passing ```sortType: "toggle"``` as part of your column
                definition.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                var grid = new Backgrid.Grid({
                  columns: [{
                    name: "id",
                    label: "ID"
                  },{
                    name: "name",
                    label: "Name"
                  },{
                    name: "age",
                    label: "Age",
                    sortTye: "toggle"
                  }]
                });
              </textarea>
              <p class="label label-warning">Advanced Usage</p>
              <p>You are allow to use a different header cell class on
                columns. There is no restriction on what a header cell must do. In fact,
                any <a href="http://backbonejs.org/#View"
                title="Backbone.View">Backbone.View</a> class can be
                used. However, if you wish to modify how the sorter behaves, you
                must implement the sorting protocol. See
                the <a href="api/index.html#!/api/Backgrid.HeaderCell"
                title="Backgrid.HeaderCell API">JSDoc</a> for details.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                var SelectAllHeaderCell = Backgrid.HeaderCell.extend({
                  // Implement your "select all" logic here
                });

                var grid = new Backgrid.Grid({

                  columns: [{
                    name: "selected",
                    label: "",
                    sortable: false,
                    cell: "boolean",
                    headerCell: SelectAllHeaderCell
                  }],

                  collection: col
                });</textarea>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span2">
              <h2 id="api-row">Row</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Row">Backgrid.Row</a></li>
              </ul>
            </div>
            <div class="span10">
              <h3>Customizing Row</h3>
              <p class="label label-warning">Advanced Usage</p>
              <p>A row is simply an intermediary view class that constructs the
                appropriate Cell class instances for rendering the model
                columns.</p>
              <p>If you would like to override how a row is rendered, you may
                define your own Row subclass and give it to the Grid constructor
                as an option:</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                var ZebraStrippingRow = Backgrid.Row.extend({
                  // ...
                });

                var grid = new Backgrid.Grid({
                  row: ZebraStrippingRow, // <-- Tell the new Body class to use ZebraStrippingRow to render rows.
                  columns: [{
                    //...
                  }],
                  collection: col
                });</textarea>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span2">
              <h2 id="api-body">Body</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Body">Backgrid.Body</a></li>
              </ul>
              <h3>Events</h3>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Body-method-refresh">backgrid:refresh</a></li>
              </ul>
            </div>
            <div class="span10">
              <h3>Customizing Body</h3>
              <p class="label label-important">Truely Advanced Hacking</p>
              <p>Body is the intermediary view that coordinates between the
                various parts of the grid. Specifically, the default
                implementation is responsible for re-rendering the rows when any
                model is inserted into, removed from, or reordered in the
                underlying collection. See
                the <a href="api/index.html#!/api/Backgrid.Body">JSDoc</a> for
                details.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                var MyBody = Backgrid.Body.extend({
                  // I really don't know why you would do this, but you can if you want
                });

                var grid = new Backgrid.Grid({
                  body: MyBody,
                  columns: [{
                    // ...
                  }],
                  collection: col
                });</textarea>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span2">
              <h2 id="api-footer">Footer</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Footer">Backgrid.Footer</a></li>
              </ul>
            </div>
            <div class="span10">
              <h3>Putting Things at The End of a Table</h3>
              <p>The default Footer class is an abstract class that only defines
                a number of required constructor parameters. If you wish to
                append additional information to the end of a table you must
                subclass Footer and supply the class to the Grid
                constructor.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                var CaptionFooter = Backgrid.Footer.extend({

                  render: function () {
                    this.$el.html("&lt;tr&gt;&lt;td colspan=&apos;6&apos;&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;");
                    return this;
                  }

                });

                var grid = new Backgrid.Grid({
                  columns: [{
                    //...
                  }],
                  collection: col,
                  footer: CaptionFooter // <--
                });</textarea>
              <p>Very often, you&apos;ll want to append a paginator to the end
                of your table if there are too many rows. For this, there&apos;s already
                a <a href="#api-paginator">paginator extension</a> provided for you.</p>
            </div>
          </div>
        </section>
        <section id="extensions">
          <div class="page-header">
            <h1>Extensions</h1>
            <p>It is not necessary to create an extension project if you simply
              want to customize or extend some Backgrid.js classes for your own
              private use; however, if you have one or more Backgrid.js
              components that add new features to the core, you may consider
              packaging them up to share with the world.</p>
            <p>A Backgrid.js extension is a directory structure that packages
              the necessary JS, CSS, tests, and document files.</p>
            <p>To create an extension, clone the tree into your file system and
              type:</p>
            <textarea class="code-snippet" data-mode="shell">
              $ cd backgrid
              $ make extension</textarea>
            <p>A new extension directory structure should have been created for
              you under <code>src/extensions</code>. The current implementation
              of <code>make extension</code> only creates a blank directory
              filled with a number of blank files for you. You should take a
              look at other extensions to copy what you need. e.g. Makefile,
              .gitignore.</p>
            <h2>Extension Development Guide</h2>
            <p>The following is a guideline for extension development:</p>
            <ul>
              <li>There should be 1 .js file and 1 .css file. If your code base
                gets too large, consider breaking it into multiple extensions.</li>
              <li>There should be 1 .min.js file and 1 .min.css file produced
                for distribution.</li>
              <li>Your Makefile should emulate other extensions as closely
                as possible. Specifically, you should have a <code>dist</code>
                rule that will take a <code>DIST_DIR</code> variable from
                top-level make invocations and copy the output files to the
                destination directory.</li>
              <li>You should use recess to lint your CSS file(s).</li>
              <li>You should follow the JS coding style defined <a
                href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md#coding-style">here</a>.</li>
              <li>Your .gitignore file inside the extension directory should
                ignore all output files.</li>
              <li>You should wrap your JS file in an immediately invoked
                anonymous function that lists out your dependencies in the
                parameter list.</li>
              <li>Your extension should live under
                the <code>Backgrid.Extension</code> module.</li>
              <li>You should clearly specify your dependencies in the README
                file if your extension relies on any libraries other than
                Backgrid.js and its dependencies.</li>
              <li>When in doubt, look at the other extensions for clues in
                organizing your code.</li>
            </ul>
          </div>
          <div class="row-fluid">
            <div class="span3">
              <h2 id="api-select-all">SelectAll</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Extension.SelectRowCell">Backgrid.Extension.SelectRowCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.Extension.SelectAllHeaderCell">Backgrid.Extension.SelectAllHeaderCell</a></li>
              </ul>
              <h3>Events</h3>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Extension.SelectAllHeaderCell-method-initialize">backgrid:select</a></li>
                <li><a href="api/index.html#!/api/Backgrid.Extension.SelectAllHeaderCell-method-initialize">backgrid:selected</a></li>
              </ul>
              <h4>Best Used On</h4>
              <ul>
                <li>Desktop</li>
                <li>Mobile</li>
              </ul>
            </div>
            <div class="span9">
              <h3>When to Use</h3>
              <p>When you want to select multiple models at a time for batch operations.</p>
              <textarea class="code-snippet" data-mode="htmlmixed">
                &lt;link rel="stylesheet" href="lib/extensions/select-all/backgrid-select-all.css" /&gt;
                &lt;script src="lib/extensions/select-all/backgrid-select-all.js"&gt;&lt;/script&gt;</textarea>
              <h3>Usage</h3>
              <p>To enable the SelectAll extension, you simply have to add a new
              column to your column definition like so:</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
                var grid = new Backgrid.Grid({
                  columns: [{

                    // name is a required parameter, but you don't really want one on a select all column
                    name: "",

                    // Backgrid.Extension.SelectRowCell lets you select individual rows
                    cell: "select-row",

                    // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
                    headerCell: "select-all",

                  }].concat(columns),

                  collection: new Backbone.Collection([
                    {"name": "Afghanistan", "url": "http://en.wikipedia.org/wiki/Afghanistan", "pop": 25500100, "date": "2013-01-01", "percentage": 0.36, "id": 1},
                    {"name": "Albania", "url": "http://en.wikipedia.org/wiki/Albania", "pop": 2831741, "date": "2011-10-01", "percentage": 0.04, "id": 2}
                  ])
                });

                $("#select-all-example-result").append(grid.render().el);</textarea>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span9 offset3">
              <h3>Result</h3>
              <div id="select-all-example-result" class="backgrid-container" style="height: auto"></div>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span9 offset3">
              <h3>Manipulating Selections Programatically</h3>
              <p>At any point during the lifetime of your program, if you'd like
              to get an array of the currently selected models after you've
              rendered your grid, you can easily do so:</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
                // This method is only available on Backgrid.Grid after you've
                // include the SelectAll extension.
                var selectedModels = grid.getSelectedModels();

                // To deselect selected models
                _.each(selectedModels, function (model) {
                  model.trigger("backgrid:select", model, false);
                });

                // Selecting even numbered rows
                grid.collection.each(function (model, i) {
                  if (i % 2 == 0) model.trigger("backgrid:select", model, true);
                });
              </textarea>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span9 offset3">
              <p class="label label-info">Pro Tip</p>
              <p>Each SelectRowCell will trigger a <code>backgrid:select</code>
              event directly from the selected models when its checkbox value
              changes, so if you want to react to those events, you can attach
              your event handlers on the collection.</p>
              <p>See the <a
              href="api/index.html#!/api/Backgrid.Extension.SelectRowCell">API
              documentation</a> for details.</p>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span3">
              <h2 id="api-paginator">Paginator</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Extension.Paginator">Backgrid.Extension.Paginator</a></li>
              </ul>
              <h4>Best Used On</h4>
              <ul>
                <li>Desktop</li>
                <li>Mobile</li>
              </ul>
            </div>
            <div class="span9">
              <h3>When to Use</h3>
              <p>When you have more data than your grid can fit, you can use
                Paginator to break the display of your data into pages.</p>
              <h3>Prerequisites</h3>
              <p>Backgrid.Extension.Paginator needs a Backbone.Collection
                subclass that supports pagination. Luckily, there is already one
                available specially written for this purpose
                - <a href="https://github.com/wyuenho/backbone-pageable"
                title="backbone-pageable">Backbone.PageableCollection</a>.</p>
              <p>Backbone.PageableCollection is a strict superset of the vanilla
                Backbone.Collection with additional pagination and sorting
                functionality. If you like, you can use
                Backbone.PageableCollection throughout your application and it
                will work exactly the same as Backbone.Collection.</p>
              <textarea class="code-snippet" data-mode="htmlmixed">
                &lt;link rel="stylesheet" href="lib/extensions/paginator/backgrid-paginator.css" /&gt;
                &lt;script src="assets/js/backbone-pageable.js"&gt;&lt;/script&gt;
                &lt;script src="lib/extensions/paginator/backgrid-paginator.js"&gt;&lt;/script&gt;</textarea>
              <h3>Backbone.PageableCollection</h3>
              <p>Out of the box, Backbone.PageableCollection works with RESTful
                APIs that accept Ruby's will_paginate pagination query
                parameters but you are able to configure the query string
                mapping anyway you like. The following example works with
                <a href="http://developer.github.com/v3/" title="GitHub API
                v3">Github's API</a>:</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
                var Issue = Backbone.Model.extend({});

                // Works exactly like Backbone.Collection.
                var Issues = Backbone.PageableCollection.extend({
                  model: Issue,

                  // Enable infinite paging
                  mode: "infinite",

                  url: "https://api.github.com/repos/documentcloud/backbone/issues?state=closed",

                  // Initial pagination states
                  state: {
                    pageSize: 15,
                    sortKey: "updated",
                    order: 1
                  },

                  // You can remap the query parameters from `state` keys from
                  // the default to those your server supports
                  queryParams: {
                    totalPages: null,
                    totalRecords: null,
                    sortKey: "sort",
                    order: "direction",
                    directions: {
                      "-1": "asc",
                      "1": "desc"
                    }
                  }
                });

                var issues = new Issues();</textarea>
              <h3>Configuring Backgrid.Extension.Paginator</h3>
              <p>Backgrid.Extension.Paginator supports a few configuration
                options to adjust to the size of the result set.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
                var issueGrid = new Backgrid.Grid({

                  columns: [{
                    name: "number",
                    cell: Backgrid.IntegerCell.extend({ orderSeparator: '' }),
                    editable: false,
                    sortable: false
                  }, {
                    name: "title",
                    cell: "string",
                    sortable: false
                  }, {
                    name: "body",
                    cell: "text", // See the TextCell extension in the next section
                    sortable: false
                  }, {
                    name: "updated_at",
                    cell: "datetime",
                    editable: false,
                    sortable: false
                  }, {
                    name: "closed_at",
                    cell: "datetime",
                    editable: false,
                    sortable: false
                  }],

                  collection: issues
                });

                var $paginatorExample = $("#paginator-example-result");
                $paginatorExample.append(issueGrid.render().el);

                var GithubPaginator = Backgrid.Extension.Paginator.extend({

                  // If you anticipate a large number of pages, you can adjust
                  // the number of page handles to show. The sliding window
                  // will automatically show the next set of page handles when
                  // you click next at the end of a window.
                  windowSize: 20, // Default is 10

                  // If you anticipate a small number of pages, you can choose
                  // to disable the rendering of fast forward handles to save
                  // space.
                  hasFastForward: true, // true is the default

                  fastForwardHandleLabels: {
                    prev: "<",
                    next: ">"
                  }
                });

                var paginator = new GithubPaginator({
                  collection: issues
                });
                $paginatorExample.append(paginator.render().el);

                issues.getFirstPage();</textarea>
            </div>
            <div class="span12">
              <h3>Result</h3>
              <div id="paginator-example-result" class="backgrid-container" style="height: auto"></div>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span3">
              <h2 id="api-filter">Filter</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Extension.ServerSideFilter">Backgrid.Extension.ServerSideFilter</a></li>
                <li><a href="api/index.html#!/api/Backgrid.Extension.ClientSideFilter">Backgrid.Extension.ClientSideFilter</a></li>
                <li><a href="api/index.html#!/api/Backgrid.Extension.LunrFilter">Backgrid.Extension.LunrFilter</a></li>
              </ul>
              <h4>Best Used On</h4>
              <ul>
                <li>Desktop</li>
                <li>Mobile</li>
              </ul>
            </div>
            <div class="span9">
              <h3>When to Use</h3>
              <p>When you have lots of rows with lots of text, and you just want
              to quickly get to the row that only contain certain keywords.</p>
              <h3>Prerequisites</h3>
              <p>All three Filter classes have an optional dependency
                on <a href="http://twitter.github.com/bootstrap/"
                      title="Twitter Bootstrap">Twitter Bootstrap's CSS</a>.
                This dependency is optional because the filter extension only
                uses its CSS for rendering. You are free to override the default
                template and CSS if you don't like it.</p>
              <p>For LunrFilter, it has a hard dependency on <a
                href="http://lunrjs.com/" title="lunr.js">lunr.js</a> for
                full-text searching.</p>
              <textarea class="code-snippet" data-mode="htmlmixed">
                &lt;link rel="stylesheet" href="assets/css/bootstrap.css" /&gt;
                &lt;link rel="stylesheet" href="lib/extensions/filter/backgrid-filter.css" /&gt;
                &lt;script src="assets/js/lunr.js"&gt;&lt;/script&gt;
                &lt;script src="lib/extensions/filter/backgrid-filter.js"&gt;&lt;/script&gt;</textarea>
              <h3>Usage</h3>
              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">

                // ServerSideFilter delegates the searching to the server by submitting a query.
                var serverSideFilter = new Backgrid.Extension.ServerSideFilter({
                  collection: issues,
                  name: "labels", // the name of the URL query parameter
                  placeholder: "Search on the server" // HTML5 placeholder for the search box
                });

                $("#filter-example-result").append(serverSideFilter.render().el);

                // ClientSideFilter performs a case-insensitive regular
                // expression search on the client side by OR-ing the keywords in
                // the search box together.
                var clientSideFilter = new Backgrid.Extension.ClientSideFilter({
                  collection: pageableTerritories.fullCollection,
                  placeholder: "Search in the browser",
                  // The model fields to search for matches
                  fields: ['name'],
                  // How long to wait after typing has stopped before searching can start
                  wait: 150
                });

                $("#filter-example-result").append(clientSideFilter.render().el);

                // LunrFilter is a specialized ClientSideFilter that uses
                // lunr.js to perform full-text searching on the client side.
                var lunrFilter = new Backgrid.Extension.LunrFilter({
                  collection: pageableTerritories.fullCollection,
                  placeholder: "Full-text searching",
                  // lunr.js field name and boost value
                  fields: {
                    name: 10
                  },
                  // lunr.js document key for indexing
                  ref: 'id',
                  wait: 150
                });

                $("#filter-example-result").append(lunrFilter.render().el);</textarea>
              <div id="filter-example-result"></div>
              <p class="label label-info">Pro Tip</p>
              <p>The client-side filters won't work unless the collection
                contains all the data for filtering at the time the filters are
                initialized. If you are fetching data after the filters were
                initialized and using Backbone 1.0.0+, you should pass
                <code>{remove: true}</code> or <code>{reset: true}</code> to
                <code>Collection#fetch()</code> due to the change to
                <code>Collection#set()</code>
                after <a href="http://backbonejs.org/#Collection-fetch"
                         title="Backbone.Collection#fetch">fetching</a> in Backbone
                1.0.0+. For this reason, the examples above may or may not work
                due to the asynchronous nature of fetching. To see a working
                example, scroll up to
              <a href="#example-2-result" title="Example 2">example 2</a>.</p>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span3">
              <h2 id="api-text-cell">TextCell</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Extension.TextCell">Backgrid.Extension.TextCell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.Extension.TextareaEditor">Backgrid.Extension.TextareaEditor</a></li>
              </ul>
              <h4>Best Used On</h4>
              <ul>
                <li>Desktop</li>
                <li>Mobile</li>
              </ul>
            </div>
            <div class="span9">
              <h3>When to Use</h3>
              <p>TextCell is a string cell type that renders a form with a text
                area in a modal dialog instead of
                an <code>&lt;input type="text" /&gt;</code> editor. It
                is best suited for entering a large body of text.</p>
              <h3>Prerequisites</h3>
              <p>TextCell requires <a
                href="http://twitter.github.com/bootstrap/javascript.html#modals"
                title="bootstrap-modal.js">bootstrap-modal.js</a> to render
                it&apos;s modal dialog. TextCell is tested against Bootstrap
                version 2.2.2. Bootstrap version 2.3.x is not recommended due to
                a number of critical bugs.</p>
              <textarea class="code-snippet" data-mode="htmlmixed">
                &lt;link rel="stylesheet" href="assets/css/bootstrap.css" /&gt;
                <!-- include this if you want to use TextCell on mobile browsers -->
                &lt;link rel="stylesheet" href="assets/css/bootstrap-responsive.css" /&gt;
                &lt;link rel="stylesheet" href="lib/extensions/text-cell/backgrid-text-cell.css" /&gt;
                &lt;script src="assets/js/bootstrap.js"&gt;&lt;/script&gt;
                &lt;script src="lib/extensions/text-cell/backgrid-text-cell.js"&gt;&lt;/script&gt;</textarea>
              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
                var Book = Backbone.Model.extend({});
                var Books = Backbone.Collection.extend({
                  model: Book
                });
                var books = new Books([{ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nibh tortor, nec mollis diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi venenatis sollicitudin vulputate. Aenean dapibus ultrices odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut nec erat quis massa gravida facilisis. Ut at nisi ac tortor consectetur ullamcorper id nec purus. Fusce condimentum, lacus vitae convallis condimentum, velit orci auctor dui, et mattis dui est sed purus. Praesent pharetra, metus sit amet lacinia adipiscing, purus dolor sodales orci, non malesuada orci orci sit amet dolor. Sed id nisl et neque sollicitudin condimentum eget in nisl." }]);

                var grid = new Backgrid.Grid({
                  columns: [{
                    name: "description",
                    label: "Description",
                    // You can use Backgrid.Extension.TextCell.extend() too.
                    // See the JSDoc for a list of configurable options.
                    cell: "text"
                  }],

                  collection: books
                });

                $("#text-cell-example-result").append(grid.render().el);
              </textarea>
              <h3>Result</h3>
              <div id="text-cell-example-result" class="backgrid-container" style="height: auto;"></div>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span3">
              <h2 id="api-moment-cell">MomentCell</h2>
              <h4>Best Used On</h4>
              <ul>
                <li>Desktop</li>
                <li>Mobile</li>
              </ul>
            </div>
            <div class="span9">
              <h3>When to Use</h3>
              <p>While the core DatetimeCell is light-weight and does the job of
                formatting IS0-8601 datetime strings fairly well, it may not be
                well suited when the datatime strings are not in ISO
                format.</p>
              <h3>Prerequisites</h3>
              <p>MomentCell uses <a href="http://moment.js/"
                title="Moment.js">Moment.js</a> to render a very powerful
                datetime cell. MomentCell is tested against Moment.js version
                1.7.2.</p>
              <textarea class="code-snippet" data-mode="htmlmixed">
                &lt;link rel="stylesheet" href="lib/extensions/moment-cell/backgrid-moment-cell.css" /&gt;
                &lt;script src="assets/js/moment/moment.js"&gt;&lt;/script&gt;
                &lt;script src="lib/extensions/moment-cell/backgrid-moment-cell.js"&gt;&lt;/script&gt;
                <!-- Moment.js language files for i18n. -->
                <!-- Moment.js language files must be included after
                     backgrid-moment-cell.js because it changes moment.js' default
                     language -->
                &lt;script src="assets/js/moment/lang/zh-tw.min.js"&gt;&lt;/script&gt;</textarea>
              <h3>Usage</h3>
              <p>The default MomentCell acts just like DatetimeCell, so if you
                have a column with datetime values, the default MomentCell is
                almost a drop-in replacement, with the only difference being
                that an offset is always present in the output.</p>
              <p>In addition to the ability to read and write ISO-8601 datetime
                strings. By specifying the model and display formats, MomentCell
                can convert and validated any datetime values moment.js
                understands.
              <p>Like the core cell types, you can configure MomentCell
                simply by extending it.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
                var Datum = Backbone.Model.extend({});

                var Data = Backbone.Collection.extend({
                  model: Datum
                });

                var data = new Data([{
                  date: "270/3/1",
                  time: "12:34:56.789",
                  datetime: "1911-10-10T07:00:00"
                }]);

                var grid = new Backgrid.Grid({
                  columns: [{
                    name: "datetime",
                    // You can use a default MomentCell by just writing a name
                    cell: "moment"
                  }, {
                    name: "date",
                    cell: Backgrid.Extension.MomentCell.extend({
                      modelFormat: "YYYY/M/D",
                      // You can specify the locales of the model and display formats too
                      displayLang: "zh-tw",
                      displayFormat: "YYYY-MMM-DD"
                    })
                  }, {
                    name: "time",
                    cell: Backgrid.Extension.MomentCell.extend({
                      modelInUTC: true,
                      modelFormat: "HH:mm:ss.SSS",
                      displayFormat: "H:m:s",
                      // By default all the values are presumed to be in UTC,
                      // you can convert it to the browser's local time if you
                      // want
                      displayInUTC: false
                    })
                  }],
                  collection: data
                });

                $("#moment-cell-example-result").append(grid.render().el);</textarea>
              <h3>Result</h3>
              <div id="moment-cell-example-result" class="backgrid-container" style="height: auto;"></div>
            </div>
          </div>
          <div class="row-fluid">
            <div class="span3">
              <h2 id="api-select2-cell">Select2Cell</h2>
              <ul class="nav">
                <li><a href="api/index.html#!/api/Backgrid.Extension.Select2Cell">Backgrid.Extension.Select2Cell</a></li>
                <li><a href="api/index.html#!/api/Backgrid.Extension.Select2CellEditor">Backgrid.Extension.Select2CellEditor</a></li>
              </ul>
              <h4>Best Used On</h4>
              <ul>
                <li>Desktop</li>
                <li>Mobile</li>
              </ul>
            </div>
            <div class="span9">
              <h3>When to Use</h3>
              <p>When you have a relatively large number of available options
              for a column, or want to use a select box with autocomplete
              capability.</p>
              <h3>Prerequisites</h3>
              <p>Select2Cell uses the <a
                href="http://ivaynberg.github.com/select2/"
                title="select2">Select2</a> jQuery plugin to render its select
                box. Select2Cell is tested with Select2 version 3.2.</p>
              <textarea class="code-snippet" data-mode="htmlmixed">
                &lt;link rel="stylesheet" href="assets/css/select2.css" /&gt;
                &lt;link rel="stylesheet" href="lib/extensions/select2-cell/backgrid-select2-cell.css" /&gt;
                &lt;script src="assets/js/select2.js"&gt;&lt;/script&gt;
                &lt;script src="lib/extensions/select2-cell/backgrid-select2-cell.js"&gt;&lt;/script&gt;</textarea>
              <h3>Usage</h3>
              <p>Select2Cell is a very simple extension of the default
              SelectCell. You can configure individual instances by supplying
              a <code>select2Options</code> object hash during extension, in
              addition to the options SelectCell supports.</p>
              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">

                var data = new Backbone.Collection([{number: 5, another: 1}]);

                // Just like SelectCell, Select2Cell supports option lists and groups
                var numbers = [{name: 10, values: [
                  [1, 1], [2, 2], [3, 3], [4, 4], [5, 5],
                  [6, 6], [7, 7], [8, 8], [9, 9], [10, 10]
                ]}];

                var MySelect2Cell = Backgrid.Extension.Select2Cell.extend({
                  select2Options: {
                    // any options specific to `select2` goes here
                  },
                  optionValues: numbers
                });

                var grid = new Backgrid.Grid({
                  columns: [{
                    name: "number",
                    cell: MySelect2Cell
                  }, {
                    name: "another",
                    cell: MySelect2Cell
                  }],
                  collection: data
                });

                $("#select2-cell-example-result").append(grid.render().el);</textarea>
              <h3>Result</h3>
              <div id="select2-cell-example-result" class="backgrid-container" style="height: auto;"></div>
            </div>
          </div>
        </section>
        <section id="styling">
          <div class="page-header">
            <h1>Styling</h1>
          </div>
          <div class="row-fluid">
            <div class="span12">
              <p>Out of the box, Backgrid.js generates simple semantic HTML
                table elements that you can style with pure CSS. This section is
                only going to briefly describe some of the more important
                classes, and things that you should be aware of when
                styling.</p>

              <div class="row-fluid">
                <div class="span6">
                  <h2>.backgrid-container</h2>
                  <p>This is the class that you should put into any container
                    element that will hold the generated table. By default, it
                    has a fixed maximum height and 100% width with no borders
                    and paddings. It also serves as a <em>positioned</em>
                    element so if you need to absolutely position any elements
                    inside your custom table element classes, you can position
                    them against this container.</p>
                </div>
                <div class="span6">
                  <h2>&nbsp;</h2>
                  <textarea class="code-snippet" data-mode="css">
                    .backgrid-container {
                      position: relative;
                      display: block;
                      width: 100%;
                      height: 494px;
                      padding: 0;
                      overflow: auto;
                      border: 0;
                    }</textarea>
                </div>
              </div>
              <div class="row-fluid">
                <div class="span6">
                  <h2>.backgrid</h2>
                  <p>This is the class that will be applied to every Backgrid.js
                    generated table. All other Backgrid.js default styles on
                    table elements will only apply to descendents
                    of tables of this class.</p>
                  <textarea class="code-snippet" data-mode="css">
                    /* Say you want to give some shiny gradient background colors
                       to your table header */
                    .backgrid th {
                      background-image: linear-gradient(#2F2727, #1a82f7);
                    }</textarea>
                </div>
                <div class="span6">
                  <h2>&nbsp;</h2>
                  <p>Although usually unnecessary, if you want to completely
                    remove all Backgrid.js styles, you can supply
                    a <code>className</code> attribute to
                    the <code>Backgrid.Grid</code> constructor:</p>
                  <textarea class="code-snippet" data-mode="javascript">
                    var grid = new Backgrid.Grid({
                      className: "my-awesome-css-animated-grid",
                      ...
                    });</textarea>
                </div>
              </div>
              <div class="row-fluid">
                <div class="span12">
                  <h2>.backgrid .*-cell</h2>
                  <p>Every cell class Backgrid.js defines has a CSS class
                    applied to them of the same, but dasherized name. The
                    default styles apply a <code>text-align: left</code> to text
                    cells and <code>text-align: right</code> to numeric and
                    datetime cells. All cell editor that uses
                    the <code>&lt;input&gt;</code> element is absolutely
                    positioned against the table cell.</p>
                  <p>See the relevant <a href="#api-cell">cell classes</a> for
                    details.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section id="faq">
          <div class="page-header">
            <h1>Frequently Asked Questions</h1>
          </div>
          <div class="row-fluid">
            <div class="span12">
              <h2>How do I add or remove a row?</h2>
              <p>You can either use <a
              href="http://backbonejs.org/#Collection-add"
              title="Backbone.Collection#add">Backbone.Collection#add</a> or <a
              href="#api-grid" title="Grid#insertRow">Grid#insertRow</a> for
              insertion. Similarly, use <a
              href="http://backbonejs.org/#Collection-remove"
              title="Backbone.Collection#remove">Backbone.Collection#remove</a>
              or <a href="#api-grid" title="Grid#removeRow">Grid#removeRow</a>
              to remove rows.</p>
              <h2>How do I validate user input?</h2>
              <p>See <a href="#api-formatter" title="Formatter">Formatter</a>.</p>
              <h2>How do I save my row changes to the server immediately?</h2>
              <textarea class="code-snippet" data-mode="javascript">
                var MyModel = Backbone.Model.extend({
                  initialize: function () {
                    Backbone.Model.prototype.initialize.apply(this, arguments);
                    this.on("change", function (model, options) {
                      if (options && options.save === false) return;
                      model.save();
                    });
                  }
                });</textarea>
              <h2>Why doesn&apos;t Backgrid.js support AMD (or NPM)?</h2>
              <p>The same question can be asked for volo, bower, ender,
                browserify and many other competing solutions. The number one
                reason Backgrid.js does not support AMD is because of the
                barrier it presents to writing extensions that require
                third-party libraries that don&apos;t support AMD. In addition
                to this, Underscore.js and Backbone.js also do not support AMD
                at this time.</p>
              <p>The problem with supporting any package manager is that
                Backgrid.js is a highly modular project, and that deciding to
                use any package manager presupposes all its submodules and
                dependency is compatible with such a package manager and its
                importing mechanism. The Javascript ecosystem has gotten so
                diverse now that there is still not yet a clear packaging winner
                that everybody uses and works well under most situations, it is
                also not clear that ES Harmony&apos;s module system will be
                backward compatible with AMD.</p>
              <p>Having said that, Backgrid.js doesn&apos;t do anything to
                prevent you from adding support to your favorite package
                manager. You are encouraged to fork and maintain your own
                Backgrid.js packages.</p>
              <p>You are also more than welcomed to convince me
                on <a href="https://github.com/wyuenho/backgrid/issues">Github</a>
                as you may probably know more than I do about packaging
                Javascripts.</p>
              <h2>Where do I go to ask questions?</h2>
              <p>Just ask away
                on <a href="https://github.com/wyuenho/backgrid/issues">Github</a>.</p>
              <h2>Does Backgrid.js support adaptive scrolling?</h2>
              <p>Some data grid widgets out there support a technique
                called adaptive scrolling, meaning the DOM elements will be
                swapped out of a viewport and new ones appended as the
                models are loaded from the server, thus keeping the memory
                more or less constant while providing an illusion to
                end-users that there&apos;s no limit to the number of rows the
                data grid can handle.</p>
              <p>Backgrid.js has something better and achieves the same
                effect with much cleaner code -
                <a href="#api-paginator">paginator extension</a>, which
                uses <a href="https://github.com/wyuenho/backbone-pageable/"
                title="backbone-pageable">backbone-pageable</a>. The paginator
                supports both paging on the server-side, or preloading all the
                models and paging purely through the browser. Paginated
                Backgrid.Grid instances only render one page of DOM nodes at a
                time to save memory and keep your web page responsive.</p>
              <h2>Does Backgrid.js support function aggregates?</h2>
              <p>No, because it is not the goal of this project to produce a
                full-fledged web-based spreadsheet. However, doing aggregation
                is trivial using Underscore.js methods</p>
              <textarea class="code-snippet" data-mode="javascript">
                // sum all the values of a column
                var sum = collection.reduce(function (accum, num) {
                  return accum + num;
                });</textarea>
              <h2>Does Backgrid.js support multi-user editing?</h2>
              <p>Inside a Backgrid grid, every cell listens to the change event
                for its model value. The cells will rerender themselves during
                display mode upon changes in the model values. However, this
                functionality is only meant for synchronizing data automatically
                across multiple grids on the same page. If you are attempting to
                synchronize data changes across multiple processes, you will
                need some kind of a locking mechanism for the individual cells,
                Backgrid.js provides no help for that and you have to do this
                yourself. Implementing such web-based spreadsheet-like broker
                system is outside of the scope of this project, pull requests
                are welcome however.</p>
              <h2>Does Backgrid.js support feature (X)?</h2>
              <p>If the feature you have in mind isn&apos;t found here in this
                Backgrid.js version, it could either be in the works or under
                consideration.</p>
              <p>See the list
                of <a href="https://github.com/wyuenho/backgrid/issues?labels=enhancement%2Ctask&amp;page=1&amp;state=open"
                      title="Github Issues">tasks and enhancements</a>.</p>
              <h2>How to build Backgrid.js?</h2>
              <p><a href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md#building" title="Contributing">See Building.</a></p>
              <h2 id="contribute">How do I contribute?</h2>
              <p><a href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md" title="Contributing">See Contributing.</a></p>
            </div>
          </div>
        </section>
        <section id="license">
          <div class="page-header">
            <h1>License</h1>
          </div>
          <p>Copyright &copy; 2013 Jimmy Yuen Ho Wong and
            Contributors.</p>
          <p>Licensed under the <a href="LICENSE-MIT">MIT license</a>.</p>
        </section>
      </div>
    </div>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-36403214-1']);
      _gaq.push(['_setDomainName', 'backgridjs.com']);
      _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    <script src="assets/js/scale.fix.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone-pageable/1.2.2/backbone-pageable.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lunr.js/0.3.0/lunr.min.js"></script>
    <script src="lib/backgrid.min.js"></script>
    <script src="lib/extensions/paginator/backgrid-paginator.min.js"></script>
    <script src="lib/extensions/text-cell/backgrid-text-cell.min.js"></script>
    <script src="lib/extensions/moment-cell/backgrid-moment-cell.min.js"></script>
    <script src="lib/extensions/select2-cell/backgrid-select2-cell.js"></script>
    <script src="lib/extensions/select-all/backgrid-select-all.min.js"></script>
    <script src="lib/extensions/filter/backgrid-filter.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/xml.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/css.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/javascript.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/htmlmixed.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/shell.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/lang/zh-tw.min.js"></script>
    <script>
      (function () {

        moment.lang("en");

        $(document).ready(function () {

          var codestr = '';

          $("textarea.code-snippet").each(function (index, elm) {
            var $elm = $(elm);

            var codemirror = CodeMirror.fromTextArea(elm, {
              mode: $elm.data("mode"),
              readOnly: true,
              lineNumbers: true,
              theme: "ambiance",
              tabindex: -1
            });

            var start = { line: 0, ch: 0 };
            var end = codemirror.posFromIndex(codemirror.getValue().length - 1);

            codemirror.autoIndentRange(start, end);

            if ($elm.data("eval") === "yes") {
              if ($elm.data("mode") === "javascript") {
                codestr = codestr + "\n" + codemirror.getValue();
              }
            }

            $elm.data("codemirror", codemirror);
          });

          var scriptTag = document.createElement("script");
          scriptTag.innerHTML = codestr;
          document.body.appendChild(scriptTag);
        });

        $(document).ready(function () {
          $("a[href^='#']").click(function (e) {
            e.preventDefault();
            var target = this.hash;
            if (target) {
              var $target = $(target);
              $("html, body").stop().animate({
                "scrollTop": $target.offset().top - 55
              }, 500, "swing", function() {
                window.location.hash = target;
              });
            }
          });
        });

        $(document).ready(function () {

          function nextChristmas() {
            var now = new Date();
            if (now.getMonth() < 11 || (now.getMonth() == 11 && now.getDate() < 24)) {
              return now.getFullYear() + "-12-24T00:00Z";
            }

            if (now.getMonth() == 11 && now.getDate() >= 26) {
              return (now.getFullYear() + 1) + "-12-24T00:00Z";
            }
          }

          var santa1 = new Backbone.Model({
            name: "Santa Clause",
            age: new Date().getFullYear() - 270,
            birthday: "0270-03-01",
            gender: "m",
            alive: true
          });

          var santa2 = new Backbone.Model({
            url: "http://santaclaus.com",
            email: "santa@santaclaus.com",
            nextDeliveryTime: nextChristmas(),
            hisLocalTime: moment().format("YYYY-MM-DDTHH:mm:ss.SSS\\Z"),
            moneyInWallet: 10.7
          });

          var columns = [{
            name: "name",
            cell: "string",
            label: "Name (StringCell)"
          }, {
            name: "age",
            cell: "integer",
            label: "Age (IntegerCell)"
          }, {
            name: "birthday",
            cell: "date",
            label: "Birthday (DateCell)"
          }, {
            name: "gender",
            cell: Backgrid.SelectCell.extend({
              optionValues: [["Male", "m"], ["Female", "f"]]
            }),
            label: "Gender (SelectCell)"
          }, {
            name: "alive",
            cell: "boolean",
            label: "Alive (BooleanCell)"
          }, {
            name: "url",
            cell: "uri",
            label: "URL (UriCell)"
          }, {
            name: "email",
            cell: "email",
            label: "Email (EmailCell)"
          }, {
            name: "nextDeliveryTime",
            cell: "datetime",
            label: "Next Delivery Time (DateTimeCell)"
          }, {
            name: "hisLocalTime", // His local time is your local time, Santa lives at the North Pole.
            cell: "time",
            label: "His Local Time (TimeCell)"
          }, {
            name: "moneyInWallet",
            cell: "number",
            label: "Change in Wallet (NumberCell)"
          }];

          var cellDemoGrid1 = new Backgrid.Grid({
            columns: columns.slice(0, 5),
            collection: new Backbone.Collection([santa1])
          });

          $("#cell-demo-grid-1").append(cellDemoGrid1.render().el);

          var cellDemoGrid2 = new Backgrid.Grid({
            columns: columns.slice(5),
            collection: new Backbone.Collection([santa2])
          });

          $("#cell-demo-grid-2").append(cellDemoGrid2.render().el);
        });
      }());
    </script>
    <script>
      // Google +1
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();

      // Tweet Button
      !function(d,s,id) {
        var js,fjs=d.getElementsByTagName(s)[0];
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src="//platform.twitter.com/widgets.js";
          fjs.parentNode.insertBefore(js,fjs);
        }
      }(document,"script","twitter-wjs");
    </script>
  </body>
</html>