PageRenderTime 52ms CodeModel.GetById 2ms app.highlight 32ms RepoModel.GetById 1ms app.codeStats 0ms

/index.html

https://github.com/antonyraj/backgrid
HTML | 1884 lines | 1766 code | 103 blank | 15 comment | 0 complexity | 6a8929c0a7a3a7a7f99376fd16f961c2 MD5 | raw file
   1<!doctype html>
   2<!--
   3  backgrid
   4  http://github.com/wyuenho/backgrid
   5
   6  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
   7  Licensed under the MIT @license.
   8 -->
   9<html lang="en">
  10  <head>
  11    <meta charset="utf-8" />
  12    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
  13    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  14    <meta name="keywords" content="backgrid,backgrid.js,backbone,backbone.js,datagrid,grid,paginator,javascript" />
  15    <meta name="description" content="A powerful widget set for building data grids with Backbone.js" />
  16
  17    <title>Backgrid.js - A powerful widget set for building data grids with Backbone.js</title>
  18
  19    <link rel="canonical" href="http://backgridjs.com" />
  20
  21    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" />
  22    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" />
  23    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2.min.css" />
  24    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.css" />
  25    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/ambiance.min.css" />
  26    <link rel="stylesheet" href="lib/backgrid.min.css" />
  27    <link rel="stylesheet" href="lib/extensions/paginator/backgrid-paginator.min.css" />
  28    <link rel="stylesheet" href="lib/extensions/text-cell/backgrid-text-cell.min.css" />
  29    <link rel="stylesheet" href="lib/extensions/moment-cell/backgrid-moment-cell.min.css" />
  30    <link rel="stylesheet" href="lib/extensions/select2-cell/backgrid-select2-cell.min.css" />
  31    <link rel="stylesheet" href="lib/extensions/select-all/backgrid-select-all.min.css" />
  32    <link rel="stylesheet" href="lib/extensions/filter/backgrid-filter.min.css" />
  33    <link rel="stylesheet" href="assets/css/doc.css" />
  34    <!--[if lt IE 9]>
  35        <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
  36        <![endif]-->
  37  </head>
  38  <body>
  39    <div id="main">
  40      <header>
  41        <div class="navbar navbar-fixed-top">
  42          <div class="navbar-inner">
  43            <div class="container">
  44              <a href="."
  45                 class="brand" title="A powerful widget set for building data grids with Backbone.js">Backgrid.js</a>
  46              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  47                <span class="icon-bar"></span>
  48                <span class="icon-bar"></span>
  49                <span class="icon-bar"></span>
  50              </a>
  51              <div class="nav-collapse collapse">
  52                <ul class="nav nav-pills">
  53                  <li class="dropdown">
  54                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
  55                      Introduction
  56                      <b class="caret"></b>
  57                    </a>
  58                    <ul class="dropdown-menu">
  59                      <li><a href="#features">Features</a></li>
  60                      <li><a href="#getting-started">Getting Started</a></li>
  61                      <li><a href="#examples">Examples</a></li>
  62                    </ul>
  63                  </li>
  64                  <li class="dropdown">
  65                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
  66                      API Reference
  67                      <b class="caret"></b>
  68                    </a>
  69                    <ul class="dropdown-menu">
  70                      <li><a href="#api-grid">Grid</a></li>
  71                      <li><a href="#api-column">Column</a></li>
  72                      <li><a href="#api-cell">Cell</a></li>
  73                      <li><a href="#api-formatter">Formatter</a></li>
  74                      <li><a href="#api-header">Header</a></li>
  75                      <li><a href="#api-row">Row</a></li>
  76                      <li><a href="#api-body">Body</a></li>
  77                      <li><a href="#api-footer">Footer</a></li>
  78                      <li class="divider"></li>
  79                      <li><a href="#extensions"><strong class="muted">Extensions</strong></a></li>
  80                      <li class="divider"></li>
  81                      <li><a href="#api-select-all">SelectAll</a></li>
  82                      <li><a href="#api-paginator">Paginator</a></li>
  83                      <li><a href="#api-filter">Filter</a></li>
  84                      <li><a href="#api-text-cell">TextCell</a></li>
  85                      <li><a href="#api-moment-cell">MomentCell</a></li>
  86                      <li><a href="#api-select2-cell">Select2Cell</a></li>
  87                    </ul>
  88                  </li>
  89                  <li class="dropdown">
  90                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
  91                      More Info
  92                      <b class="caret"></b>
  93                    </a>
  94                    <ul class="dropdown-menu">
  95                      <li><a href="#styling">Styling</a></li>
  96                      <li class="divider"></li>
  97                      <li><a href="#faq">FAQ</a></li>
  98                      <li><a href="https://github.com/wyuenho/backgrid/blob/master/CHANGELOG.md" target="_blank">Change Log</a></li>
  99                      <li><a href="#license">License</a></li>
 100                    </ul>
 101                  </li>
 102                  <li id="social-media">
 103                    <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>
 104                    <div class="g-plusone" data-size="medium"></div>
 105                    <iframe src="http://ghbtns.com/github-btn.html?user=wyuenho&repo=backgrid&type=watch&count=true"
 106                            allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
 107                    <a href="https://coderwall.com/wyuenho"><img alt="Endorse wyuenho on Coderwall" src="http://api.coderwall.com/wyuenho/endorsecount.png" /></a>
 108                    <iframe allowtransparency="true" frameborder="0" scrolling="no"
 109                            style="border: 0; margin: 0 0 0 15px; padding: 0;"
 110                            src="https://www.gittip.com/wyuenho/widget.html" width="48pt" height="22pt"></iframe>
 111                  </li>
 112                </ul>
 113              </div>
 114            </div>
 115            <a class="visible-desktop" href="https://github.com/wyuenho/backgrid">
 116              <img style="position: absolute; top: 0; right: 0; border: 0;" src="assets/img/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
 117            </a>
 118          </div>
 119        </div>
 120      </header>
 121      <div class="container">
 122        <section class="hero-unit">
 123          <h1>Backgrid.js</h1>
 124          <p class="lead">
 125            Backgrid.js is a set of components for
 126            building <strong>semantic</strong> and <strong>easily
 127            stylable</strong> <strong>data grid</strong> widgets.</p>
 128          <p class="lead">It offers a simple, intuitive
 129              programming interface that makes easy things easy, but <em>hard things possible</em>
 130              when dealing with tabular data.</p>
 131          <p>
 132            <div class="btn-group">
 133              <a class="btn btn-large btn-success" href="#examples">See Examples</a>
 134              <a class="btn btn-large btn-primary hidden-phone hidden-tablet"
 135                 href="https://github.com/wyuenho/backgrid/tags">Download v0.2.6</a>
 136              <a class="btn btn-large btn-info"
 137                 href="https://github.com/wyuenho/backgrid/blob/0.2.6/CHANGELOG.md">What's new?</a>
 138            </div>
 139          </p>
 140        </section>
 141        <div id="features">
 142          <div class="page-header">
 143            <h1>Features</h1>
 144            <p>The goal of Backgrid.js is to produce a set of core Backbone UI
 145              elements that offer you all the basic displaying, sorting and
 146              editing functionalities you&apos;d expect, and to create an
 147              elegant API that makes extending Backgrid.js with extra
 148              functionalities easy.</p>
 149          </div>
 150          <div class="row-fluid">
 151            <div class="span6">
 152              <h2>Advantages</h2>
 153              <ul>
 154                <li>No Hungarian notations.</li>
 155                <li>Solid foundation. Based
 156                  on <a href="http://backbonejs.org">Backbone.js</a>.</li>
 157                <li>Semantic and <a href="#styling">easily stylable</a>. Just
 158                  style with plain CSS like you would a normal HTML table.</li>
 159                <li>Low learning curve. Works with plain old Backbone models and
 160                  collections. Easy things are easy, hards things possible.</li>
 161                <li>Highly modular and customizable. Componenets are just simple
 162                  Backbone View classes, customization is easy if you already
 163                  know Backbone.</li>
 164                <li>Lightweight. Extra features are separated
 165                  into <a href="#extensions">extensions</a>, which keeps the
 166                  bloat away.</li>
 167                <li>Good documentation.</li>
 168                <li>Well tested. Comes with <a href="test/" title="Jasmine Tests">100s of test cases</a>.</li>
 169              </ul>
 170            </div>
 171            <div class="span6">
 172              <h2>Supported browsers: <b style="font-size: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;">[1]</b></h2>
 173              <ul>
 174                <li>Internet Explorer 8+</li>
 175                <li>Chrome 4+</li>
 176                <li>Safari 4+</li>
 177                <li>Firefox 4+</li>
 178                <li>Opera 9+</li>
 179              </ul>
 180              <aside class="note">
 181                <h3>Notes:</h3>
 182                <div>1. Both the desktop and mobile versions of the above browsers are supported.</div>
 183              </aside>
 184            </div>
 185          </div>
 186        </div>
 187        <section id="getting-started">
 188          <div class="page-header">
 189            <h1>Getting Started</h1>
 190          </div>
 191          <div class="row-fluid">
 192            <div class="span6">
 193              <p>
 194                Backgrid.js depends on 3 libraries to function:
 195              </p>
 196              <ul>
 197                <li><a href="http://jquery.com">jquery &gt;= 1.7.0</a></li>
 198                <li><a href="http://underscorejs.org">underscore.js ~ 1.4.0</a></li>
 199                <li><a href="http://backbonejs.org">backbone.js >= 0.9.10</a></li>
 200              </ul>
 201              <aside class="note">
 202                <h5>Note:</h5> If you don&apos;t care about having the latest
 203                versions of the dependencies, you can use the bundled libraries
 204                in the download package.
 205              </aside>
 206            </div>
 207            <div class="span6">
 208              <p>
 209                Something like the following will get
 210                the <strong>Backgrid.js</strong> core loaded:
 211              </p>
 212              <textarea class="code-snippet" data-mode="htmlmixed">
 213                &lt;link rel="stylesheet" href="lib/backgrid.css" /&gt;
 214                &lt;script src="assets/js/jquery.js"&gt;&lt;/script&gt;
 215                &lt;script src="assets/js/underscore.js"&gt;&lt;/script&gt;
 216                &lt;script src="assets/js/backbone.js"&gt;&lt;/script&gt;
 217                &lt;script src="lib/backgrid.js"&gt;&lt;/script&gt;</textarea>
 218              <p>Adjust the paths as needed.</p>
 219            </div>
 220          </div>
 221        </section>
 222        <section id="examples">
 223          <div class="page-header">
 224            <h1>Examples</h1>
 225          </div>
 226          <div class="row-fluid">
 227            <div class="span12">
 228              <div class="row-fluid">
 229                <div class="span6">
 230                  <h2>Collection and Model</h2>
 231                  <p>Before you can display any tabular data in a grid, you must
 232                    first obtain the data.</p>
 233                  <p>At the most basic level, Backgrid pretends that every row
 234                    is a model object and the whole table is backed by a simple
 235                    Backbone collection.</p>
 236                  <p>Suppose we have a list of territory info objects:</p>
 237                </div>
 238                <div class="span6">
 239                  <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
 240                    var Territory = Backbone.Model.extend({});
 241
 242                    var Territories = Backbone.Collection.extend({
 243                      model: Territory,
 244                      url: "examples/territories.json"
 245                    });
 246
 247                    var territories = new Territories();</textarea>
 248                </div>
 249              </div>
 250              <div class="row-fluid">
 251                <div class="span12">
 252                  <h2 id="example-1">Grid</h2>
 253                  <p>
 254                    The main entry point of the Backgrid package is the
 255                    Backgrid.Grid class. You can create a default Backgrid by
 256                    first defining some columns, and then put that list of
 257                    columns and the collection of data into the Grid constructor
 258                    like this:
 259                  </p>
 260                  <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
 261                    var columns = [{
 262                      name: "id", // The key of the model attribute
 263                      label: "ID", // The name to display in the header
 264                      editable: false, // By default every cell in a column is editable, but *ID* shouldn&apos;t be
 265                      // Defines a cell type, and ID is displayed as an integer without the &apos;,&apos; separating 1000s.
 266                      cell: Backgrid.IntegerCell.extend({
 267                        orderSeparator: &apos;&apos;
 268                      })
 269                    }, {
 270                      name: "name",
 271                      label: "Name",
 272                      // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
 273                      cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
 274                    }, {
 275                      name: "pop",
 276                      label: "Population",
 277                      cell: "integer" // An integer cell is a number cell that displays humanized integers
 278                    }, {
 279                      name: "percentage",
 280                      label: "% of World Population",
 281                      cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
 282                    }, {
 283                      name: "date",
 284                      label: "Date",
 285                      cell: "date",
 286                    }, {
 287                      name: "url",
 288                      label: "URL",
 289                      cell: "uri" // Renders the value in an HTML anchor element
 290                    }];
 291
 292                    // Initialize a new Grid instance
 293                    var grid = new Backgrid.Grid({
 294                      columns: columns,
 295                      collection: territories
 296                    });
 297
 298                    // Render the grid and attach the root to your HTML document
 299                    $("#example-1-result").append(grid.render().$el);
 300
 301                    // Fetch some countries from the url
 302                    territories.fetch({reset: true});</textarea>
 303                </div>
 304              </div>
 305              <div class="row-fluid">
 306                <div class="span12">
 307                  <h3>Result</h3>
 308                  <div id="example-1-result" class="backgrid-container"></div>
 309                  <aside class="note">See <a href="http://en.wikipedia.org/wiki/List_of_countries_by_population">Wikipedia</a></aside>
 310                  <br />
 311                  <p>The list of column definitions Backgrid.Grid expects is
 312                    simply a list of JSON objects, which you can hardcode into
 313                    your HTML templates or retrieve from a server when the DOM
 314                    is ready. Backgrid.js doesn&apos;t care where the column
 315                    definitions come from, as long as you supply the list to the
 316                    Grid constructor.</p>
 317                  <p>As expected, you now have a basic editable data grid
 318                    displayed. All the columns headers are labeled and sortable by
 319                    default. ID cells are not editable, and all other cell types
 320                    have reasonable validation built in. If the table gets too
 321                    large, you get a scroll bar.</p>
 322                  <p>Backgrid.js comes with <a href="#api-cell" title="Cells">10
 323                      basic cell types</a> in the core
 324                      and <a href="#api-text-cell" title="TextCell">many others
 325                      as extensions</a>. Cell types such as
 326                    <a href="#api-select2-cell"
 327                       title="Select2Cell">Select2Cell</a>
 328                       and <a href="#api-moment-cell"
 329                       title="MomentCell">MomentCell</a> give you a much richer
 330                       editing interface for option lists and datetime values on
 331                       desktop browsers. In addition, there&apos;s a wide range
 332                       of possibilities with how the data is converted for
 333                       display and persistence by using <a href="#api-formatter"
 334                       title="Formatter">formatters</a> or
 335                       customizing <a href="#api-cell">cell classes</a>.</p>
 336                </div>
 337              </div>
 338              <div class="row-fluid">
 339                <div class="span12">
 340                  <h2 id="example-2">A More Complete Example</h2>
 341                  <p>If you have a large result set like the above, you&apos;d
 342                    probably want to be able to paginate and filter your
 343                    results. This is easily achieved in Backgrid.js.</p>
 344                  <p>Backgrid.js comes with a number of filters and a paginator
 345                    extension which you can load by including the following into
 346                    your <code>head</code> tag:</p>
 347                  <textarea class="code-snippet" data-mode="htmlmixed">
 348                    &lt;link rel="stylesheet" href="lib/extensions/filter/backgrid-filter.css" /&gt;
 349                    &lt;link rel="stylesheet" href="lib/extensions/paginator/backgrid-paginator.css" /&gt;
 350                    &lt;script src="assets/js/backbone-pageable.js"&gt;&lt;/script&gt;
 351                    &lt;script src="lib/extensions/filter/backgrid-filter.js"&gt;&lt;/script&gt;
 352                    &lt;script src="lib/extensions/paginator/backgrid-paginator.js"&gt;&lt;/script&gt;</textarea>
 353                  <p>To use the paginator, you must first declare your
 354                    collections to be
 355                    a <a href="https://github.com/wyuenho/backbone-pageable/"
 356                         title="Backbone.PageableCollection">Backbone.PageableCollection</a>,
 357                    which is a simple subclass of the Backbone.js Collection with added
 358                    pagination behavior.</p>
 359                  <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
 360                    var PageableTerritories = Backbone.PageableCollection.extend({
 361                      model: Territory,
 362                      url: "examples/pageable-territories.json",
 363                      state: {
 364                        pageSize: 15
 365                      },
 366                      mode: "client" // page entirely on the client side
 367                    });
 368
 369                    var pageableTerritories = new PageableTerritories();
 370
 371                    // Set up a grid to use the pageable collection
 372                    var pageableGrid = new Backgrid.Grid({
 373                      columns: columns,
 374                      collection: pageableTerritories
 375                    });
 376
 377                    // Render the grid
 378                    var $example2 = $("#example-2-result");
 379                    $example2.append(pageableGrid.render().$el)
 380
 381                    // Initialize the paginator
 382                    var paginator = new Backgrid.Extension.Paginator({
 383                      collection: pageableTerritories
 384                    });
 385
 386                    // Render the paginator
 387                    $example2.append(paginator.render().$el);
 388
 389                    // Initialize a client-side filter to filter on the client
 390                    // mode pageable collection's cache.
 391                    var filter = new Backgrid.Extension.ClientSideFilter({
 392                      collection: pageableTerritories.fullCollection,
 393                      fields: ['name']
 394                    });
 395
 396                    // Render the filter
 397                    $example2.prepend(filter.render().$el);
 398
 399                    // Add some space to the filter and move it to the right
 400                    filter.$el.css({float: "right", margin: "20px"});
 401
 402                    // Fetch some data
 403                    pageableTerritories.fetch({reset: true});</textarea>
 404                </div>
 405              </div>
 406              <div class="row-fluid">
 407                <div class="span12">
 408                  <h3>Result</h3>
 409                  <div id="example-2-result" class="backgrid-container"></div>
 410                </div>
 411              </div>
 412            </div>
 413          </div>
 414        </section>
 415        <section>
 416          <div class="page-header">
 417            <h1>API Reference</h1>
 418          </div>
 419          <div class="row-fluid">
 420            <div class="span2">
 421              <h2 id="api-grid">Grid</h2>
 422              <ul class="nav">
 423                <li><a href="api/index.html#!/api/Backgrid.Grid">Backgrid.Grid</a></li>
 424              </ul>
 425              <h3>Events</h3>
 426              <ul class="nav">
 427                <li><a href="api/index.html#!/api/Backgrid.Grid-method-render">backgrid:rendered</a></li>
 428              </ul>
 429            </div>
 430            <div class="span10">
 431              <h3>How to Use the Grid</h3>
 432              <p>As described in the <a href="#examples">examples</a> above, a
 433                basic grid needs only a collection and a list of column
 434                definitions.</p>
 435              <h3>Manipulating Columns and Rows</h3>
 436              <p>It is very easy to insert or remove a row in a grid, you just
 437                have to pass a model reference
 438                to <a href="api/index.html#!/api/Backgrid.Grid-method-insertRow">Grid#insertRow</a>
 439                or <a href="api/index.html#!/api/Backgrid.Grid-method-removeRow">Grid#removeRow</a>.</p>
 440              <textarea class="code-snippet" data-mode="javascript">
 441                // Inserting rows
 442                grid.insertRow([{
 443                  // model 1
 444                }, {
 445                  // model 2 ... etc
 446                }]);
 447
 448                // Remove rows
 449                var musketeers = grid.collection.where({ job: "Musketeer" });
 450                grid.removeRow(musketeers);</textarea>
 451              <p>Inserting and remove columns is similarly easy. You just need
 452                to pass some definitions
 453                to <a href="api/index.html#!/api/Backgrid.Grid-method-insertColumn">Grid#insertColumn</a>
 454                or
 455                <a href="api/index.html#!/api/Backgrid.Grid-method-removeColumn">Grid#removeColumn</a>.</p>
 456              <textarea class="code-snippet" data-mode="javascript">
 457                // Insert a few new columns. Make sure your model has these attributes though.
 458                grid.insertColumn([{
 459
 460                    name: "selected",
 461                    label: "",
 462                    cell: "boolean",
 463                    sortable: false,
 464                    headerCell: MySelectAllCell
 465
 466                  }, {
 467
 468                    name: "address",
 469                    label: "Address",
 470                    cell: "string"
 471
 472                  }]);
 473
 474                // Remove a column
 475                var genderCol = grid.columns.where({ name: "gender" });
 476                grid.removeColumn(genderCol);</textarea>
 477              <h3>Customization</h3>
 478              <p>The various ways of customizing a grid are described in the
 479                following sections.</p>
 480            </div>
 481          </div>
 482          <div class="row-fluid">
 483            <div class="span2">
 484              <h2 id="api-column">Columns</h2>
 485              <ul class="nav">
 486                <li><a href="api/index.html#!/api/Backgrid.Column" title="Backgrid.Column">Backgrid.Column</a></li>
 487                <li><a href="api/index.html#!/api/Backgrid.Columns" title="Backgrid.Columns">Backgrid.Columns</a></li>
 488              </ul>
 489            </div>
 490            <div class="span10">
 491              <h3>Column Defaults</h3>
 492              <p>Column defaults and required parameters are defined in
 493                the <a href="api/index.html#!/api/Backgrid.Column-method-initialize">Backgrid.Column#initialize</a>
 494                method.</p>
 495              <h3>Column Definition</h3>
 496              <p>A Column is a placeholder for a column definition.</p>
 497              <p>You usually don&apos;t need to create an instance of this class
 498                yourself, as a collection of column instances will be created for
 499                you from a list of column object literals you provide to the
 500                Backgrid.js view class constructors.</p>
 501              <p>Internally, columns are stored as a collection in the form of
 502                Backgrid.Columns. In addition, all parent views will convert the
 503                column definition into
 504                a <a href="api/index.html#!/api/Backgrid.Columns">Backgrid.Columns</a>
 505                collection and pass a reference to any subviews that require
 506                it.</p>
 507              <h3>Listening to Column Attribute Changes</h3>
 508              <p>Occasionally, you may want to listen to column attribute change
 509                events. In that case, you can choose to initialize a
 510                Backgrid.Columns collection and listen to events from the
 511                individual models.</p>
 512              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
 513                var myColumns = new Backgrid.Columns({
 514                  name: "id", label: "ID", cell: "string"
 515                }, {
 516                  // ...
 517                });
 518
 519                myColumns.on("change:renderable", function (col, colAttr) {
 520                  if (!colAttr) {
 521                    // hide the column
 522                  }
 523                });</textarea>
 524            </div>
 525          </div>
 526          <div class="row-fluid">
 527            <div class="span2">
 528              <h2 id="api-cell">Cell</h2>
 529              <ul class="nav">
 530                <li><a href="api/index.html#!/api/Backgrid.Cell">Backgrid.Cell</a></li>
 531                <li><a href="api/index.html#!/api/Backgrid.DatetimeCell">Backgrid.DatetimeCell</a></li>
 532                <li><a href="api/index.html#!/api/Backgrid.DateCell">Backgrid.DateCell</a></li>
 533                <li><a href="api/index.html#!/api/Backgrid.TimeCell">Backgrid.TimeCell</a></li>
 534                <li><a href="api/index.html#!/api/Backgrid.NumberCell">Backgrid.NumberCell</a></li>
 535                <li><a href="api/index.html#!/api/Backgrid.IntegerCell">Backgrid.IntegerCell</a></li>
 536                <li><a href="api/index.html#!/api/Backgrid.StringCell">Backgrid.StringCell</a></li>
 537                <li><a href="api/index.html#!/api/Backgrid.UriCell">Backgrid.UriCell</a></li>
 538                <li><a href="api/index.html#!/api/Backgrid.EmailCell">Backgrid.EmailCell</a></li>
 539                <li><a href="api/index.html#!/api/Backgrid.BooleanCell">Backgrid.BooleanCell</a></li>
 540                <li><a href="api/index.html#!/api/Backgrid.SelectCell">Backgrid.SelectCell</a></li>
 541                <li><a href="api/index.html#!/api/Backgrid.CellEditor">Backgrid.CellEditor</a></li>
 542                <li><a href="api/index.html#!/api/Backgrid.InputCellEditor">Backgrid.InputCellEditor</a></li>
 543                <li><a href="api/index.html#!/api/Backgrid.SelectCellEditor">Backgrid.SelectCellEditor</a></li>
 544              </ul>
 545              <h3>Events</h3>
 546              <ul class="nav">
 547                <li><a href="api/index.html#!/api/Backgrid.Cell-method-enterEditMode">backgrid:edit</a></li>
 548                <li><a href="api/index.html#!/api/Backgrid.Cell-method-enterEditMode">backgrid:editing</a></li>
 549                <li><a href="api/index.html#!/api/Backgrid.InputCellEditor-method-saveOrCancel">backgrid:edited</a></li>
 550                <li><a href="api/index.html#!/api/Backgrid.InputCellEditor-method-saveOrCancel">backgrid:error</a></li>
 551              </ul>
 552            </div>
 553            <div class="span10">
 554              <h3>Demo</h3>
 555              <p class="label label-success">Try them</p>
 556              <div id="cell-demo-grid-1" class="backgrid-container" style="height: auto"></div>
 557              <div id="cell-demo-grid-2" class="backgrid-container" style="height: auto"></div>
 558              <aside class="note">
 559                <h5>Note:</h5>
 560                <p>Backgrid.js and its author are not associated with Santa and
 561                  santaclaus.com in any way.</p>
 562              </aside>
 563              <h3>Configuring Cells</h3>
 564              <p>While many built-in cells provide reasonable defaults, you may
 565                choose to configure them to suit your own needs.</p>
 566              <p>Cell types that you are most likely to configure are the
 567                NumberCell, DatetimeCell and SelectCell classes. Once
 568                configured, you may use them as the cell attribute values in
 569                column definitions.</p>
 570              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
 571                var grid = new Backgrid.Grid({
 572
 573                  columns: [{
 574                    name: "id",
 575                    label: "ID",
 576                    editable: false,
 577                    // Dynamically defines a new cell type with new defaults.
 578                    // ID is displayed as an integer without &apos;,&apos;s.
 579                    cell: Backgrid.IntegerCell.extend({
 580                      orderSeparator: ''
 581                    })
 582                  }, {
 583                    name: "lastaccessed",
 584                    label: "Last Login Time",
 585                    editable: false,
 586                    cell: Backgrid.DatetimeCell.extend({
 587                      includeMilli: true
 588                    })
 589                  }, {
 590                    name: "gender",
 591                    label: "Gender",
 592                    cell: Backgrid.SelectCell.extend({
 593                      // It's possible to render an option group or use a
 594                      // function to provide option values too.
 595                      optionValues: [["Male", "m"], ["Female", "f"]]
 596                    })
 597                  }],
 598
 599                  collection: col
 600                });
 601              </textarea>
 602              <p class="label label-info">Pro Tip</p>
 603              <p>SelectCell treats all option values as strings by default, if
 604                you need to persist a different type of values into your model,
 605                you should extend SelectCell to provide your
 606                own <a href="#api-formatter"
 607                title="Formatter">formatter</a>.</p>
 608              <p>See the <a href="api/index.html" title="API Doc">JSDoc</a> for
 609                the various Cell classes for details on what you can configure
 610                using this method.</p>
 611              <h3>Custom Cell</h3>
 612              <p>If the built-in and extension cell classes are not enough for
 613                you, you may choose to create your own cell class and supply it
 614                to a column definition.</p>
 615              <p>If your custom cell will still use a
 616                <code>&lt;input type="text" /&gt;</code> like the predefined
 617                ones for editing, you may choose to
 618                subclass <a href="api/index.html#!/api/Backgrid.Cell">Cell</a>
 619                or one of the predefined classes and simply define a className
 620                and a <a href="#api-formatter"
 621                title="Formatter">formatter</a>. In fact, most of the core cell
 622                classes are done this way.</p>
 623              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
 624                // This is how StringCell is defined.
 625
 626                Backgrid.StringCell = Cell.extend({
 627
 628                  // Cell default class names are the lower-cased and dasherized
 629                  // form of the the cell class names by convention.
 630                  className: "string-cell"
 631
 632                  formatter: Backgrid.StringFormatter
 633
 634                });</textarea>
 635              <p>If your cell class will render differently in display mode, you
 636                may simply
 637                override <a href="api/index.html#!/api/Backgrid.Cell-method-render">Cell#render()</a>
 638                in your subclass.</p>
 639              <h3>Custom CellEditor</h3>
 640              <p class="label label-warning">Advanced Usage</p>
 641              <p>Some cell types, like the
 642                <a href="#api-text-cell" title="TextCell">TextCell</a>
 643                extension, may only make sense if the editor is rendered in a
 644                modal dialog or a form element in a different part of the
 645                page. In that case the
 646                default <a href="api/index.html#!/api/Backgrid.InputCellEditor"
 647                title="InputCellEditor">InputCellEditor</a>, which renders a
 648                <code>&lt;input type="text" /&gt;</code>, will not be suitable
 649                and a new <a href="api/index.html#!/api/Backgrid.CellEditor"
 650                title="CellEditor">CellEditor</a> must be defined.</p>
 651              <p>A custom cell editor should subclass <a
 652                href="api/index.html#!/api/Backgrid.CellEditor">CellEditor</a>
 653                as it defines a number of required parameters in its initializer
 654                and clean up operations that are necessary for most cell
 655                editors. When a cell class enters edit mode, a new editor
 656                instance is constructed by given it the required parameters, and
 657                then a Backbone event <code>backgrid:edit</code> is fired from
 658                the cell instance itself. A custom cell class can act on this
 659                event to do anything before the cell editor is rendered.</p>
 660              <p>Once the cell has entered edit mode, a Backbone event
 661                <code>backgrid:editing</code> is fired. A custom cell class can
 662                then act on it to do anything after the cell editor has been
 663                rendered, e.g. placing the focus inside the editor.</p>
 664              <p>During editing, if an error is encountered (see the <a
 665                href="#api-formatter">formatter protocol</a> below), a cell
 666                editor should fire a Backbone event <code>backgrid:error</code>
 667                so that listeners&mdash;usually a cell instance&mdash;can
 668                respond appropriately. When editing is done, a cell editor
 669                should fire a Backbone <code>backgrid:done</code> event. A cell
 670                should be listening to this event so it can remove its editor
 671                and re-render itsef in display mode.</p>
 672              <p class="label label-important">Truely Advanced Hacking</p>
 673              <p>At the most basic level, Cells and CellEditors are simply
 674                <a href="http://backbonejs.org/#View"
 675                title="Backbone.View">Backbone.View</a> classes that are
 676                guaranteed to be given a number of parameters when constructed
 677                by <a href="api/index.html#!/api/Backgrid.Row"
 678                title="Row">Row</a>. You can use any Backbone.View as your Cell
 679                and CellEditor.</p>
 680            </div>
 681          </div>
 682          <div class="row-fluid">
 683            <div class="span2">
 684              <h2 id="api-formatter">Formatter</h2>
 685              <ul class="nav">
 686                <li><a href="api/index.html#!/api/Backgrid.CellFormatter">Backgrid.CellFormatter</a></li>
 687                <li><a href="api/index.html#!/api/Backgrid.DatetimeFormatter">Backgrid.DatetimeFormatter</a></li>
 688                <li><a href="api/index.html#!/api/Backgrid.NumberFormatter">Backgrid.NumberFormatter</a></li>
 689              </ul>
 690            </div>
 691            <div class="span10">
 692              <h3>Custom Formatters</h3>
 693              <p>In Backgrid.js, cell formatters serves the purpose of converting values
 694                between JSON value types and strings, and validation. Writing
 695                formatters for value conversion and validation is easy as you only
 696                have to conform to a very simple protocol.</p>
 697              <p>Any formatters must have the following two methods defined:</p>
 698              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
 699                var formatter = {
 700                  // function (*): string
 701                  fromRaw: function (rawData) { },
 702                  // function (string): *|undefined
 703                  toRaw: function (formattedData) { }
 704                };</textarea>
 705              <p><code>fromRaw()</code> is called by Backgrid.Cell and its
 706                subclasses whenever a raw model value needs to be formatted into
 707                a humanized form for display.</p>
 708              <p><code>toRaw()</code> is called by Backgrid.CellEditor and its
 709                subclasses whenever a user input string needs to be converted back
 710                to a raw JSON value for model persistence.</p>
 711              <h3>Validation</h3>
 712              <p>In addition to user input conversion, toRaw() also validates
 713                the user input during conversion. If the user input is invalid
 714                or cannot be converted to a JSON value,
 715                toRaw() <strong>MUST</strong> return <code>undefined</code>
 716                instead of throwing an Error.</p>
 717              <p>In addition to using formatters to do simple yes or no
 718                validations, if your model class has
 719                a <a href="http://backbonejs.org/#Model-validate"
 720                title="Backbone.Model#validate">validate()</a> method defined,
 721                it will also be used for validation after trying with the
 722                formatter.</p>
 723              <h3>Using Custom Formatters</h3>
 724              <p>A custom formatter can be used instead of the cell's default by
 725                extending the cell:</p>
 726              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
 727                var grid = new Backgrid.Grid({
 728                  columns: [{
 729                    name: "url",
 730                    cell: "uri",
 731                    formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
 732                      fromRaw: function (rawValue) {
 733                        return rawValue.replace("http://", '');
 734                      }
 735                    })
 736                  }],
 737                  collection: col
 738                });</textarea>
 739            </div>
 740          </div>
 741          <div class="row-fluid">
 742            <div class="span2">
 743              <h2 id="api-header">Header</h2>
 744              <ul class="nav">
 745                <li><a href="api/index.html#!/api/Backgrid.Header">Backgrid.Header</a></li>
 746                <li><a href="api/index.html#!/api/Backgrid.HeaderRow">Backgrid.HeaderRow</a></li>
 747                <li><a href="api/index.html#!/api/Backgrid.HeaderCell">Backgrid.HeaderCell</a></li>
 748              </ul>
 749              <h3>Events</h3>
 750              <ul class="nav">
 751                <li><a href="api/index.html#!/api/Backgrid.HeaderCell-method-sort">backgrid:sort</a></li>
 752              </ul>
 753            </div>
 754            <div class="span10">
 755              <h3>Understanding the Default Header</h3>
 756              <p>Backgrid.js comes with a default header section, a header row
 757                and a header cell implementation that renders a sorter if the
 758                column is sortable. The text inside the header cells comes from
 759                the column definitions. If a <em>label</em> is not defined in a
 760                column definition, its name is used as the label instead.</p>
 761              <p>The default header cell implementation supports sorting in
 762                ascending or descending order, using the column&apos;s natural
 763                ordering. The sorter will also allow cycling back to the
 764                table&apos;s default sorting order, which is sorting by the
 765                model <a href="http://backbonejs.org/#Model-id"
 766                title="Backbone.Model#id">server IDs</a>
 767                and <a href="http://backbonejs.org/#Model-cid"
 768                title="Backbone.Model#cid">client IDs</a>.</p>
 769              <h3>Customizing the Header</h3>
 770              <p class="label label-warning">Advanced Usage</p>
 771              <p>You are allow to use a different header cell class on
 772                columns. There is no restriction on what a header cell must do. In fact,
 773                any <a href="http://backbonejs.org/#View"
 774                title="Backbone.View">Backbone.View</a> class can be
 775                used. However, if you wish to modify how the sorter behaves, you
 776                must implement the sorting protocol. See
 777                the <a href="api/index.html#!/api/Backgrid.HeaderCell"
 778                title="Backgrid.HeaderCell API">JSDoc</a> for details.</p>
 779              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
 780                var SelectAllHeaderCell = Backgrid.HeaderCell.extend({
 781                  // Implement your "select all" logic here
 782                });
 783
 784                var grid = new Backgrid.Grid({
 785
 786                  columns: [{
 787                    name: "selected",
 788                    label: "",
 789                    sortable: false,
 790                    cell: "boolean",
 791                    headerCell: SelectAllHeaderCell
 792                  }],
 793
 794                  collection: col
 795                });</textarea>
 796            </div>
 797          </div>
 798          <div class="row-fluid">
 799            <div class="span2">
 800              <h2 id="api-row">Row</h2>
 801              <ul class="nav">
 802                <li><a href="api/index.html#!/api/Backgrid.Row">Backgrid.Row</a></li>
 803              </ul>
 804            </div>
 805            <div class="span10">
 806              <h3>Customizing Row</h3>
 807              <p class="label label-warning">Advanced Usage</p>
 808              <p>A row is simply an intermediary view class that constructs the
 809                appropriate Cell class instances for rendering the model
 810                columns.</p>
 811              <p>If you would like to override how a row is rendered, you may
 812                define your own Row subclass and give it to the Grid constructor
 813                as an option:</p>
 814              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
 815                var ZebraStrippingRow = Backgrid.Row.extend({
 816                  // ...
 817                });
 818
 819                var grid = new Backgrid.Grid({
 820                  row: ZebraStrippingRow, // <-- Tell the new Body class to use ZebraStrippingRow to render rows.
 821                  columns: [{
 822                    //...
 823                  }],
 824                  collection: col
 825                });</textarea>
 826            </div>
 827          </div>
 828          <div class="row-fluid">
 829            <div class="span2">
 830              <h2 id="api-body">Body</h2>
 831              <ul class="nav">
 832                <li><a href="api/index.html#!/api/Backgrid.Body">Backgrid.Body</a></li>
 833              </ul>
 834              <h3>Events</h3>
 835              <ul class="nav">
 836                <li><a href="api/index.html#!/api/Backgrid.Body-method-refresh">backgrid:refresh</a></li>
 837              </ul>
 838            </div>
 839            <div class="span10">
 840              <h3>Customizing Body</h3>
 841              <p class="label label-important">Truely Advanced Hacking</p>
 842              <p>Body is the intermediary view that coordinates between the
 843                various parts of the grid. Specifically, the default
 844                implementation is responsible for re-rendering the rows when any
 845                model is inserted into, removed from, or reordered in the
 846                underlying collection. See
 847                the <a href="api/index.html#!/api/Backgrid.Body">JSDoc</a> for
 848                details.</p>
 849              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
 850                var MyBody = Backgrid.Body.extend({
 851                  // I really don't know why you would do this, but you can if you want
 852                });
 853
 854                var grid = new Backgrid.Grid({
 855                  body: MyBody,
 856                  columns: [{
 857                    // ...
 858                  }],
 859                  collection: col
 860                });</textarea>
 861            </div>
 862          </div>
 863          <div class="row-fluid">
 864            <div class="span2">
 865              <h2 id="api-footer">Footer</h2>
 866              <ul class="nav">
 867                <li><a href="api/index.html#!/api/Backgrid.Footer">Backgrid.Footer</a></li>
 868              </ul>
 869            </div>
 870            <div class="span10">
 871              <h3>Putting Things at The End of a Table</h3>
 872              <p>The default Footer class is an abstract class that only defines
 873                a number of required constructor parameters. If you wish to
 874                append additional information to the end of a table you must
 875                subclass Footer and supply the class to the Grid
 876                constructor.</p>
 877              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
 878                var CaptionFooter = Backgrid.Footer.extend({
 879
 880                  render: function () {
 881                    this.$el.html("&lt;tr&gt;&lt;td colspan=&apos;6&apos;&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;");
 882                    return this;
 883                  }
 884
 885                });
 886
 887                var grid = new Backgrid.Grid({
 888                  columns: [{
 889                    //...
 890                  }],
 891                  collection: col,
 892                  footer: CaptionFooter // <--
 893                });</textarea>
 894              <p>Very often, you&apos;ll want to append a paginator to the end
 895                of your table if there are too many rows. For this, there&apos;s already
 896                a <a href="#api-paginator">paginator extension</a> provided for you.</p>
 897            </div>
 898          </div>
 899        </section>
 900        <section id="extensions">
 901          <div class="page-header">
 902            <h1>Extensions</h1>
 903            <p>It is not necessary to create an extension project if you simply
 904              want to customize or extend some Backgrid.js classes for your own
 905              private use; however, if you have one or more Backgrid.js
 906              components that add new features to the core, you may consider
 907              packaging them up to share with the world.</p>
 908            <p>A Backgrid.js extension is a directory structure that packages
 909              the necessary JS, CSS, tests, and document files.</p>
 910            <p>To create an extension, clone the tree into your file system and
 911              type:</p>
 912            <textarea class="code-snippet" data-mode="shell">
 913              $ cd backgrid
 914              $ make extension</textarea>
 915            <p>A new extension directory structure should have been created for
 916              you under <code>src/extensions</code>. The current implementation
 917              of <code>make extension</code> only creates a blank directory
 918              filled with a number of blank files for you. You should take a
 919              look at other extensions to copy what you need. e.g. Makefile,
 920              .gitignore.</p>
 921            <h2>Extension Development Guide</h2>
 922            <p>The following is a guideline for extension development:</p>
 923            <ul>
 924              <li>There should be 1 .js file and 1 .css file. If your code base
 925                gets too large, consider breaking it into multiple extensions.</li>
 926              <li>There should be 1 .min.js file and 1 .min.css file produced
 927                for distribution.</li>
 928              <li>Your Makefile should emulate other extensions as closely
 929                as possible. Specifically, you should have a <code>dist</code>
 930                rule that will take a <code>DIST_DIR</code> variable from
 931                top-level make invocations and copy the output files to the
 932                destination directory.</li>
 933              <li>You should use recess to lint your CSS file(s).</li>
 934              <li>You should follow the JS coding style defined <a
 935                href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md#coding-style">here</a>.</li>
 936              <li>Your .gitignore file inside the extension directory should
 937                ignore all output files.</li>
 938              <li>You should wrap your JS file in an immediately invoked
 939                anonymous function that lists out your dependencies in the
 940                parameter list.</li>
 941              <li>Your extension should live under
 942                the <code>Backgrid.Extension</code> module.</li>
 943              <li>You should clearly specify your dependencies in the README
 944                file if your extension relies on any libraries other than
 945                Backgrid.js and its dependencies.</li>
 946              <li>When in doubt, look at the other extensions for clues in
 947                organizing your code.</li>
 948            </ul>
 949          </div>
 950          <div class="row-fluid">
 951            <div class="span3">
 952              <h2 id="api-select-all">SelectAll</h2>
 953              <ul class="nav">
 954                <li><a href="api/index.html#!/api/Backgrid.Extension.SelectRowCell">Backgrid.Extension.SelectRowCell</a></li>
 955                <li><a href="api/index.html#!/api/Backgrid.Extension.SelectAllHeaderCell">Backgrid.Extension.SelectAllHeaderCell</a></li>
 956              </ul>
 957              <h3>Events</h3>
 958              <ul class="nav">
 959                <li><a href="api/index.html#!/api/Backgrid.Extension.SelectAllHeaderCell-method-initialize">backgrid:select</a></li>
 960                <li><a href="api/index.html#!/api/Backgrid.Extension.SelectAllHeaderCell-method-initialize">backgrid:selected</a></li>
 961              </ul>
 962              <h4>Best Used On</h4>
 963              <ul>
 964                <li>Desktop</li>
 965                <li>Mobile</li>
 966              </ul>
 967            </div>
 968            <div class="span9">
 969              <h3>When to Use</h3>
 970              <p>When you want to select multiple models at a time for batch operations.</p>
 971              <textarea class="code-snippet" data-mode="htmlmixed">
 972                &lt;link rel="stylesheet" href="lib/extensions/select-all/backgrid-select-all.css" /&gt;
 973                &lt;script src="lib/extensions/select-all/backgrid-select-all.js"&gt;&lt;/script&gt;</textarea>
 974              <h3>Usage</h3>
 975              <p>To enable the SelectAll extension, you simply have to add a new
 976              column to your column definition like so:</p>
 977              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
 978                var grid = new Backgrid.Grid({
 979                  columns: [{
 980
 981                    // name is a required parameter, but you don't really want one on a select all column
 982                    name: "",
 983
 984                    // Backgrid.Extension.SelectRowCell lets you select individual rows
 985                    cell: "select-row",
 986
 987                    // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
 988                    headerCell: "select-all",
 989
 990                  }].concat(columns),
 991
 992                  collection: new Backbone.Collection([
 993                    {"name": "Afghanistan", "url": "http://en.wikipedia.org/wiki/Afghanistan", "pop": 25500100, "date": "2013-01-01", "percentage": 0.36, "id": 1},
 994                    {"name": "Albania", "url": "http://en.wikipedia.org/wiki/Albania", "pop": 2831741, "date": "2011-10-01", "percentage": 0.04, "id": 2}
 995                  ])
 996                });
 997
 998                $("#select-all-example-result").append(grid.render().el);</textarea>
 999            </div>
1000          </div>
1001          <div class="row-fluid">
1002            <div class="span9 offset3">
1003              <h3>Result</h3>
1004              <div id="select-all-example-result" class="backgrid-container" style="height: auto"></div>
1005            </div>
1006          </div>
1007          <div class="row-fluid">
1008            <div class="span9 offset3">
1009              <h3>Manipulating Selections Programatically</h3>
1010              <p>At any point during the lifetime of your program, if you'd like
1011              to get an array of the currently selected models after you've
1012              rendered your grid, you can easily do so:</p>
1013              <textarea class="code-snippet" data-mode="javascript" data-eval="no">
1014                // This method is only available on Backgrid.Grid after you've
1015                // include the SelectAll extension.
1016                var selectedModels = grid.getSelectedModels();
1017
1018                // To deselect selected models
1019                _.each(selectedModels, function (model) {
1020                  model.trigger("backgrid:select", model, false);
1021                });
1022
1023                // Selecting even numbered rows
1024                grid.collection.each(function (model, i) {
1025                  if (i % 2 == 0) model.trigger("backgrid:select", model, true);
1026                });
1027              </textarea>
1028            </div>
1029          </div>
1030          <div class="row-fluid">
1031            <div class="span9 offset3">
1032              <p class="label label-info">Pro Tip</p>
1033              <p>Each SelectRowCell will trigger a <code>backgrid:select</code>
1034              event directly from the selected models when its checkbox value
1035              changes, so if you want to react to those events, you can attach
1036              your event handlers on the collection.</p>
1037              <p>See the <a
1038              href="api/index.html#!/api/Backgrid.Extension.SelectRowCell">API
1039              documentation</a> for details.</p>
1040            </div>
1041          </div>
1042          <div class="row-fluid">
1043            <div class="span3">
1044              <h2 id="api-paginator">Paginator</h2>
1045              <ul class="nav">
1046                <li><a href="api/index.html#!/api/Backgrid.Extension.Paginator">Backgrid.Extension.Paginator</a></li>
1047              </ul>
1048              <h4>Best Used On</h4>
1049              <ul>
1050                <li>Desktop</li>
1051                <li>Mobile</li>
1052              </ul>
1053            </div>
1054            <div class="span9">
1055              <h3>When to Use</h3>
1056              <p>When you have more data than your grid can fit, you can use
1057                Paginator to break the display of your data into pages.</p>
1058              <h3>Prerequisites</h3>
1059              <p>Backgrid.Extension.Paginator needs a Backbone.Collection
1060                subclass that supports pagination. Luckily, there is already one
1061                available specially written for this purpose
1062                - <a href="https://github.com/wyuenho/backbone-pageable"
1063                title="backbone-pageable">Backbone.PageableCollection</a>.</p>
1064              <p>Backbone.PageableCollection is a strict superset of the vanilla
1065                Backbone.Collection with additional pagination and sorting
1066                functionality. If you like, you can use
1067                Backbone.PageableCollection throughout your application and it
1068                will work exactly the same as Backbone.Collection.</p>
1069              <textarea class="code-snippet" data-mode="htmlmixed">
1070                &lt;link rel="stylesheet" href="lib/extensions/paginator/backgrid-paginator.css" /&gt;
1071                &lt;script src="assets/js/backbone-pageable.js"&gt;&lt;/script&gt;
1072                &lt;script src="lib/extensions/paginator/backgrid-paginator.js"&gt;&lt;/script&gt;</textarea>
1073              <h3>Backbone.PageableCollection</h3>
1074              <p>Out of the box, Backbone.PageableCollection works with RESTful
1075                APIs that accept Ruby's will_paginate pagination query
1076                parameters but you are able to configure the query string
1077                mapping anyway you like. The following example works with
1078                <a href="http://developer.github.com/v3/" title="GitHub API
1079                v3">Github's API</a>:</p>
1080              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
1081                var Issue = Backbone.Model.extend({});
1082
1083                // Works exactly like Backbone.Collection.
1084                var Issues = Backbone.PageableCollection.extend({
1085                  model: Issue,
1086
1087                  // Enable infinite paging
1088                  mode: "infinite",
1089
1090                  url: "https://api.github.com/repos/documentcloud/backbone/issues?state=closed",
1091
1092                  // Initial pagination states
1093                  state: {
1094                    pageSize: 15,
1095                    sortKey: "updated",
1096                    order: 1
1097                  },
1098
1099                  // You can remap the query parameters from `state` keys from
1100                  // the default to those your server supports
1101                  queryParams: {
1102                    totalPages: null,
1103                    totalRecords: null,
1104                    sortKey: "sort",
1105                    order: "direction",
1106                    directions: {
1107                      "-1": "asc",
1108                      "1": "desc"
1109                    }
1110                  }
1111                });
1112
1113                var issues = new Issues();</textarea>
1114              <h3>Configuring Backgrid.Extension.Paginator</h3>
1115              <p>Backgrid.Extension.Paginator supports a few configuration
1116                options to adjust to the size of the result set.</p>
1117              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
1118                var issueGrid = new Backgrid.Grid({
1119
1120                  columns: [{
1121                    name: "number",
1122                    cell: Backgrid.IntegerCell.extend({ orderSeparator: '' }),
1123                    editable: false,
1124                    sortable: false
1125                  }, {
1126                    name: "title",
1127                    cell: "string",
1128                    sortable: false
1129                  }, {
1130                    name: "body",
1131                    cell: "text", // See the TextCell extension in the next section
1132                    sortable: false
1133                  }, {
1134                    name: "updated_at",
1135                    cell: "datetime",
1136                    editable: false,
1137                    sortable: false
1138                  }, {
1139                    name: "closed_at",
1140                    cell: "datetime",
1141                    editable: false,
1142                    sortable: false
1143                  }],
1144
1145                  collection: issues
1146                });
1147
1148                var $paginatorExample = $("#paginator-example-result");
1149                $paginatorExample.append(issueGrid.render().el);
1150
1151                var GithubPaginator = Backgrid.Extension.Paginator.extend({
1152
1153                  // If you anticipate a large number of pages, you can adjust
1154                  // the number of page handles to show. The sliding window
1155                  // will automatically show the next set of page handles when
1156                  // you click next at the end of a window.
1157                  windowSize: 20, // Default is 10
1158
1159                  // If you anticipate a small number of pages, you can choose
1160                  // to disable the rendering of fast forward handles to save
1161                  // space.
1162                  hasFastForward: true, // true is the default
1163
1164                  fastForwardHandleLabels: {
1165                    prev: "<",
1166                    next: ">"
1167                  }
1168                });
1169
1170                var paginator = new GithubPaginator({
1171                  collection: issues
1172                });
1173                $paginatorExample.append(paginator.render().el);
1174
1175                issues.getFirstPage();</textarea>
1176            </div>
1177            <div class="span12">
1178              <h3>Result</h3>
1179              <div id="paginator-example-result" class="backgrid-container" style="height: auto"></div>
1180            </div>
1181          </div>
1182          <div class="row-fluid">
1183            <div class="span3">
1184              <h2 id="api-filter">Filter</h2>
1185              <ul class="nav">
1186                <li><a href="api/index.html#!/api/Backgrid.Extension.ServerSideFilter">Backgrid.Extension.ServerSideFilter</a></li>
1187                <li><a href="api/index.html#!/api/Backgrid.Extension.ClientSideFilter">Backgrid.Extension.ClientSideFilter</a></li>
1188                <li><a href="api/index.html#!/api/Backgrid.Extension.LunrFilter">Backgrid.Extension.LunrFilter</a></li>
1189              </ul>
1190              <h4>Best Used On</h4>
1191              <ul>
1192                <li>Desktop</li>
1193                <li>Mobile</li>
1194              </ul>
1195            </div>
1196            <div class="span9">
1197              <h3>When to Use</h3>
1198              <p>When you have lots of rows with lots of text, and you just want
1199              to quickly get to the row that only contain certain keywords.</p>
1200              <h3>Prerequisites</h3>
1201              <p>All three Filter classes have an optional dependency
1202                on <a href="http://twitter.github.com/bootstrap/"
1203                      title="Twitter Bootstrap">Twitter Bootstrap's CSS</a>.
1204                This dependency is optional because the filter extension only
1205                uses its CSS for rendering. You are free to override the default
1206                template and CSS if you don't like it.</p>
1207              <p>For LunrFilter, it has a hard dependency on <a
1208                href="http://lunrjs.com/" title="lunr.js">lunr.js</a> for
1209                full-text searching.</p>
1210              <textarea class="code-snippet" data-mode="htmlmixed">
1211                &lt;link rel="stylesheet" href="assets/css/bootstrap.css" /&gt;
1212                &lt;link rel="stylesheet" href="lib/extensions/filter/backgrid-filter.css" /&gt;
1213                &lt;script src="assets/js/lunr.js"&gt;&lt;/script&gt;
1214                &lt;script src="lib/extensions/filter/backgrid-filter.js"&gt;&lt;/script&gt;</textarea>
1215              <h3>Usage</h3>
1216              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
1217
1218                // ServerSideFilter delegates the searching to the server by submitting a query.
1219                var serverSideFilter = new Backgrid.Extension.ServerSideFilter({
1220                  collection: issues,
1221                  name: "labels", // the name of the URL query parameter
1222                  placeholder: "Search on the server" // HTML5 placeholder for the search box
1223                });
1224
1225                $("#filter-example-result").append(serverSideFilter.render().el);
1226
1227                // ClientSideFilter performs a case-insensitive regular
1228                // expression search on the client side by OR-ing the keywords in
1229                // the search box together.
1230                var clientSideFilter = new Backgrid.Extension.ClientSideFilter({
1231                  collection: pageableTerritories.fullCollection,
1232                  placeholder: "Search in the browser",
1233                  // The model fields to search for matches
1234                  fields: ['name'],
1235                  // How long to wait after typing has stopped before searching can start
1236                  wait: 150
1237                });
1238
1239                $("#filter-example-result").append(clientSideFilter.render().el);
1240
1241                // LunrFilter is a specialized ClientSideFilter that uses
1242                // lunr.js to perform full-text searching on the client side.
1243                var lunrFilter = new Backgrid.Extension.LunrFilter({
1244                  collection: pageableTerritories.fullCollection,
1245                  placeholder: "Full-text searching",
1246                  // lunr.js field name and boost value
1247                  fields: {
1248                    name: 10
1249                  },
1250                  // lunr.js document key for indexing
1251                  ref: 'id',
1252                  wait: 150
1253                });
1254
1255                $("#filter-example-result").append(lunrFilter.render().el);</textarea>
1256              <div id="filter-example-result"></div>
1257              <p class="label label-info">Pro Tip</p>
1258              <p>The client-side filters won't work unless the collection
1259                contains all the data for filtering at the time the filters are
1260                initialized. If you are fetching data after the filters were
1261                initialized and using Backbone 1.0.0+, you should pass
1262                <code>{remove: true}</code> or <code>{reset: true}</code> to
1263                <code>Collection#fetch()</code> due to the change to
1264                <code>Collection#set()</code>
1265                after <a href="http://backbonejs.org/#Collection-fetch"
1266                         title="Backbone.Collection#fetch">fetching</a> in Backbone
1267                1.0.0+. For this reason, the examples above may or may not work
1268                due to the asynchronous nature of fetching. To see a working
1269                example, scroll up to
1270              <a href="#example-2-result" title="Example 2">example 2</a>.</p>
1271            </div>
1272          </div>
1273          <div class="row-fluid">
1274            <div class="span3">
1275              <h2 id="api-text-cell">TextCell</h2>
1276              <ul class="nav">
1277                <li><a href="api/index.html#!/api/Backgrid.Extension.TextCell">Backgrid.Extension.TextCell</a></li>
1278                <li><a href="api/index.html#!/api/Backgrid.Extension.TextareaEditor">Backgrid.Extension.TextareaEditor</a></li>
1279              </ul>
1280              <h4>Best Used On</h4>
1281              <ul>
1282                <li>Desktop</li>
1283                <li>Mobile</li>
1284              </ul>
1285            </div>
1286            <div class="span9">
1287              <h3>When to Use</h3>
1288              <p>TextCell is a string cell type that renders a form with a text
1289                area in a modal dialog instead of
1290                an <code>&lt;input type="text" /&gt;</code> editor. It
1291                is best suited for entering a large body of text.</p>
1292              <h3>Prerequisites</h3>
1293              <p>TextCell requires <a
1294                href="http://twitter.github.com/bootstrap/javascript.html#modals"
1295                title="bootstrap-modal.js">bootstrap-modal.js</a> to render
1296                it&apos;s modal dialog. TextCell is tested against Bootstrap
1297                version 2.2.2. Bootstrap version 2.3.x is not recommended due to
1298                a number of critical bugs.</p>
1299              <textarea class="code-snippet" data-mode="htmlmixed">
1300                &lt;link rel="stylesheet" href="assets/css/bootstrap.css" /&gt;
1301                <!-- include this if you want to use TextCell on mobile browsers -->
1302                &lt;link rel="stylesheet" href="assets/css/bootstrap-responsive.css" /&gt;
1303                &lt;link rel="stylesheet" href="lib/extensions/text-cell/backgrid-text-cell.css" /&gt;
1304                &lt;script src="assets/js/bootstrap.js"&gt;&lt;/script&gt;
1305                &lt;script src="lib/extensions/text-cell/backgrid-text-cell.js"&gt;&lt;/script&gt;</textarea>
1306              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
1307                var Book = Backbone.Model.extend({});
1308                var Books = Backbone.Collection.extend({
1309                  model: Book
1310                });
1311                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." }]);
1312
1313                var grid = new Backgrid.Grid({
1314                  columns: [{
1315                    name: "description",
1316                    label: "Description",
1317                    // You can use Backgrid.Extension.TextCell.extend() too.
1318                    // See the JSDoc for a list of configurable options.
1319                    cell: "text"
1320                  }],
1321
1322                  collection: books
1323                });
1324
1325                $("#text-cell-example-result").append(grid.render().el);
1326              </textarea>
1327              <h3>Result</h3>
1328              <div id="text-cell-example-result" class="backgrid-container" style="height: auto;"></div>
1329            </div>
1330          </div>
1331          <div class="row-fluid">
1332            <div class="span3">
1333              <h2 id="api-moment-cell">MomentCell</h2>
1334              <h4>Best Used On</h4>
1335              <ul>
1336                <li>Desktop</li>
1337                <li>Mobile</li>
1338              </ul>
1339            </div>
1340            <div class="span9">
1341              <h3>When to Use</h3>
1342              <p>While the core DatetimeCell is light-weight and does the job of
1343                formatting IS0-8601 datetime strings fairly well, it may not be
1344                well suited when the datatime strings are not in ISO
1345                format.</p>
1346              <h3>Prerequisites</h3>
1347              <p>MomentCell uses <a href="http://moment.js/"
1348                title="Moment.js">Moment.js</a> to render a very powerful
1349                datetime cell. MomentCell is tested against Moment.js version
1350                1.7.2.</p>
1351              <textarea class="code-snippet" data-mode="htmlmixed">
1352                &lt;link rel="stylesheet" href="lib/extensions/moment-cell/backgrid-moment-cell.css" /&gt;
1353                &lt;script src="assets/js/moment/moment.js"&gt;&lt;/script&gt;
1354                &lt;script src="lib/extensions/moment-cell/backgrid-moment-cell.js"&gt;&lt;/script&gt;
1355                <!-- Moment.js language files for i18n. -->
1356                <!-- Moment.js language files must be included after
1357                     backgrid-moment-cell.js because it changes moment.js' default
1358                     language -->
1359                &lt;script src="assets/js/moment/lang/zh-tw.min.js"&gt;&lt;/script&gt;</textarea>
1360              <h3>Usage</h3>
1361              <p>The default MomentCell acts just like DatetimeCell, so if you
1362                have a column with datetime values, the default MomentCell is
1363                almost a drop-in replacement, with the only difference being
1364                that an offset is always present in the output.</p>
1365              <p>In addition to the ability to read and write ISO-8601 datetime
1366                strings. By specifying the model and display formats, MomentCell
1367                can convert and validated any datetime values moment.js
1368                understands.
1369              <p>Like the core cell types, you can configure MomentCell
1370                simply by extending it.</p>
1371              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
1372                var Datum = Backbone.Model.extend({});
1373
1374                var Data = Backbone.Collection.extend({
1375                  model: Datum
1376                });
1377
1378                var data = new Data([{
1379                  date: "270/3/1",
1380                  time: "12:34:56.789",
1381                  datetime: "1911-10-10T07:00:00"
1382                }]);
1383
1384                var grid = new Backgrid.Grid({
1385                  columns: [{
1386                    name: "datetime",
1387                    // You can use a default MomentCell by just writing a name
1388                    cell: "moment"
1389                  }, {
1390                    name: "date",
1391                    cell: Backgrid.Extension.MomentCell.extend({
1392                      modelFormat: "YYYY/M/D",
1393                      // You can specify the locales of the model and display formats too
1394                      displayLang: "zh-tw",
1395                      displayFormat: "YYYY-MMM-DD"
1396                    })
1397                  }, {
1398                    name: "time",
1399                    cell: Backgrid.Extension.MomentCell.extend({
1400                      modelInUTC: true,
1401                      modelFormat: "HH:mm:ss.SSS",
1402                      displayFormat: "H:m:s",
1403                      // By default all the values are presumed to be in UTC,
1404                      // you can convert it to the browser's local time if you
1405                      // want
1406                      displayInUTC: false
1407                    })
1408                  }],
1409                  collection: data
1410                });
1411
1412                $("#moment-cell-example-result").append(grid.render().el);</textarea>
1413              <h3>Result</h3>
1414              <div id="moment-cell-example-result" class="backgrid-container" style="height: auto;"></div>
1415            </div>
1416          </div>
1417          <div class="row-fluid">
1418            <div class="span3">
1419              <h2 id="api-select2-cell">Select2Cell</h2>
1420              <ul class="nav">
1421                <li><a href="api/index.html#!/api/Backgrid.Extension.Select2Cell">Backgrid.Extension.Select2Cell</a></li>
1422                <li><a href="api/index.html#!/api/Backgrid.Extension.Select2CellEditor">Backgrid.Extension.Select2CellEditor</a></li>
1423              </ul>
1424              <h4>Best Used On</h4>
1425              <ul>
1426                <li>Desktop</li>
1427                <li>Mobile</li>
1428              </ul>
1429            </div>
1430            <div class="span9">
1431              <h3>When to Use</h3>
1432              <p>When you have a relatively large number of available options
1433              for a column, or want to use a select box with autocomplete
1434              capability.</p>
1435              <h3>Prerequisites</h3>
1436              <p>Select2Cell uses the <a
1437                href="http://ivaynberg.github.com/select2/"
1438                title="select2">Select2</a> jQuery plugin to render its select
1439                box. Select2Cell is tested with Select2 version 3.2.</p>
1440              <textarea class="code-snippet" data-mode="htmlmixed">
1441                &lt;link rel="stylesheet" href="assets/css/select2.css" /&gt;
1442                &lt;link rel="stylesheet" href="lib/extensions/select2-cell/backgrid-select2-cell.css" /&gt;
1443                &lt;script src="assets/js/select2.js"&gt;&lt;/script&gt;
1444                &lt;script src="lib/extensions/select2-cell/backgrid-select2-cell.js"&gt;&lt;/script&gt;</textarea>
1445              <h3>Usage</h3>
1446              <p>Select2Cell is a very simple extension of the default
1447              SelectCell. You can configure individual instances by supplying
1448              a <code>select2Options</code> object hash during extension, in
1449              addition to the options SelectCell supports.</p>
1450              <textarea class="code-snippet" data-mode="javascript" data-eval="yes">
1451
1452                var data = new Backbone.Collection([{number: 5, another: 1}]);
1453
1454                // Just like SelectCell, Select2Cell supports option lists and groups
1455                var numbers = [{name: 10, values: [
1456                  [1, 1], [2, 2], [3, 3], [4, 4], [5, 5],
1457                  [6, 6], [7, 7], [8, 8], [9, 9], [10, 10]
1458                ]}];
1459
1460                var MySelect2Cell = Backgrid.Extension.Select2Cell.extend({
1461                  select2Options: {
1462                    // any options specific to `select2` goes here
1463                  },
1464                  optionValues: numbers
1465                });
1466
1467                var grid = new Backgrid.Grid({
1468                  columns: [{
1469                    name: "number",
1470                    cell: MySelect2Cell
1471                  }, {
1472                    name: "another",
1473                    cell: MySelect2Cell
1474                  }],
1475                  collection: data
1476                });
1477
1478                $("#select2-cell-example-result").append(grid.render().el);</textarea>
1479              <h3>Result</h3>
1480              <div id="select2-cell-example-result" class="backgrid-container" style="height: auto;"></div>
1481            </div>
1482          </div>
1483        </section>
1484        <section id="styling">
1485          <div class="page-header">
1486            <h1>Styling</h1>
1487          </div>
1488          <div class="row-fluid">
1489            <div class="span12">
1490              <p>Out of the box, Backgrid.js generates simple semantic HTML
1491                table elements that you can style with pure CSS. This section is
1492                only going to briefly describe some of the more important
1493                classes, and things that you should be aware of when
1494                styling.</p>
1495
1496              <div class="row-fluid">
1497                <div class="span6">
1498                  <h2>.backgrid-container</h2>
1499                  <p>This is the class that you should put into any container
1500                    element that will hold the generated table. By default, it
1501                    has a fixed maximum height and 100% width with no borders
1502                    and paddings. It also serves as a <em>positioned</em>
1503                    element so if you need to absolutely position any elements
1504                    inside your custom table element classes, you can position
1505                    them against this container.</p>
1506                </div>
1507                <div class="span6">
1508                  <h2>&nbsp;</h2>
1509                  <textarea class="code-snippet" data-mode="css">
1510                    .backgrid-container {
1511                      position: relative;
1512                      display: block;
1513                      width: 100%;
1514                      height: 494px;
1515                      padding: 0;
1516                      overflow: auto;
1517                      border: 0;
1518                    }</textarea>
1519                </div>
1520              </div>
1521              <div class="row-fluid">
1522                <div class="span6">
1523                  <h2>.backgrid</h2>
1524                  <p>This is the class that will be applied to every Backgrid.js
1525                    generated table. All other Backgrid.js default styles on
1526                    table elements will only apply to descendents
1527                    of tables of this class.</p>
1528                  <textarea class="code-snippet" data-mode="css">
1529                    /* Say you want to give some shiny gradient background colors
1530                       to your table header */
1531                    .backgrid th {
1532                      background-image: linear-gradient(#2F2727, #1a82f7);
1533                    }</textarea>
1534                </div>
1535                <div class="span6">
1536                  <h2>&nbsp;</h2>
1537                  <p>Although usually unnecessary, if you want to completely
1538                    remove all Backgrid.js styles, you can supply
1539                    a <code>className</code> attribute to
1540                    the <code>Backgrid.Grid</code> constructor:</p>
1541                  <textarea class="code-snippet" data-mode="javascript">
1542                    var grid = new Backgrid.Grid({
1543                      className: "my-awesome-css-animated-grid",
1544                      ...
1545                    });</textarea>
1546                </div>
1547              </div>
1548              <div class="row-fluid">
1549                <div class="span12">
1550                  <h2>.backgrid .*-cell</h2>
1551                  <p>Every cell class Backgrid.js defines has a CSS class
1552                    applied to them of the same, but dasherized name. The
1553                    default styles apply a <code>text-align: left</code> to text
1554                    cells and <code>text-align: right</code> to numeric and
1555                    datetime cells. All cell editor that uses
1556                    the <code>&lt;input&gt;</code> element is absolutely
1557                    positioned against the table cell.</p>
1558                  <p>See the relevant <a href="#api-cell">cell classes</a> for
1559                    details.</p>
1560                </div>
1561              </div>
1562            </div>
1563          </div>
1564        </section>
1565        <section id="faq">
1566          <div class="page-header">
1567            <h1>Frequently Asked Questions</h1>
1568          </div>
1569          <div class="row-fluid">
1570            <div class="span12">
1571              <h2>How do I add or remove a row?</h2>
1572              <p>You can either use <a
1573              href="http://backbonejs.org/#Collection-add"
1574              title="Backbone.Collection#add">Backbone.Collection#add</a> or <a
1575              href="#api-grid" title="Grid#insertRow">Grid#insertRow</a> for
1576              insertion. Similarly, use <a
1577              href="http://backbonejs.org/#Collection-remove"
1578              title="Backbone.Collection#remove">Backbone.Collection#remove</a>
1579              or <a href="#api-grid" title="Grid#removeRow">Grid#removeRow</a>
1580              to remove rows.</p>
1581              <h2>How do I validate user input?</h2>
1582              <p>See <a href="#api-formatter" title="Formatter">Formatter</a>.</p>
1583              <h2>How do I save my row changes to the server immediately?</h2>
1584              <textarea class="code-snippet" data-mode="javascript">
1585                var MyModel = Backbone.Model.extend({
1586                  initialize: function () {
1587                    Backbone.Model.prototype.initialize.apply(this, arguments);
1588                    this.on("change", function (model, options) {
1589                      if (options && options.save === false) return;
1590                      model.save();
1591                    });
1592                  }
1593                });</textarea>
1594              <h2>Why doesn&apos;t Backgrid.js support AMD (or NPM)?</h2>
1595              <p>The same question can be asked for volo, bower, ender,
1596                browserify and many other competing solutions. The number one
1597                reason Backgrid.js does not support AMD is because of the
1598                barrier it presents to writing extensions that require
1599                third-party libraries that don&apos;t support AMD. In addition
1600                to this, Underscore.js and Backbone.js also do not support AMD
1601                at this time.</p>
1602              <p>The problem with supporting any package manager is that
1603                Backgrid.js is a highly modular project, and that deciding to
1604                use any package manager presupposes all its submodules and
1605                dependency is compatible with such a package manager and its
1606                importing mechanism. The Javascript ecosystem has gotten so
1607                diverse now that there is still not yet a clear packaging winner
1608                that everybody uses and works well under most situations, it is
1609                also not clear that ES Harmony&apos;s module system will be
1610                backward compatible with AMD.</p>
1611              <p>Having said that, Backgrid.js doesn&apos;t do anything to
1612                prevent you from adding support to your favorite package
1613                manager. You are encouraged to fork and maintain your own
1614                Backgrid.js packages.</p>
1615              <p>You are also more than welcomed to convince me
1616                on <a href="https://github.com/wyuenho/backgrid/issues">Github</a>
1617                as you may probably know more than I do about packaging
1618                Javascripts.</p>
1619              <h2>Where do I go to ask questions?</h2>
1620              <p>Just ask away
1621                on <a href="https://github.com/wyuenho/backgrid/issues">Github</a>.</p>
1622              <h2>Does Backgrid.js support adaptive scrolling?</h2>
1623              <p>Some data grid widgets out there support a technique
1624                called adaptive scrolling, meaning the DOM elements will be
1625                swapped out of a viewport and new ones appended as the
1626                models are loaded from the server, thus keeping the memory
1627                more or less constant while providing an illusion to
1628                end-users that there&apos;s no limit to the number of rows the
1629                data grid can handle.</p>
1630              <p>Backgrid.js has something better and achieves the same
1631                effect with much cleaner code -
1632                <a href="#api-paginator">paginator extension</a>, which
1633                uses <a href="https://github.com/wyuenho/backbone-pageable/"
1634                title="backbone-pageable">backbone-pageable</a>. The paginator
1635                supports both paging on the server-side, or preloading all the
1636                models and paging purely through the browser. Paginated
1637                Backgrid.Grid instances only render one page of DOM nodes at a
1638                time to save memory and keep your web page responsive.</p>
1639              <h2>Does Backgrid.js support function aggregates?</h2>
1640              <p>No, because it is not the goal of this project to produce a
1641                full-fledged web-based spreadsheet. However, doing aggregation
1642                is trivial using Underscore.js methods</p>
1643              <textarea class="code-snippet" data-mode="javascript">
1644                // sum all the values of a column
1645                var sum = collection.reduce(function (accum, num) {
1646                  return accum + num;
1647                });</textarea>
1648              <h2>Does Backgrid.js support multi-user editing?</h2>
1649              <p>Inside a Backgrid grid, every cell listens to the change event
1650                for its model value. The cells will rerender themselves during
1651                display mode upon changes in the model values. However, this
1652                functionality is only meant for synchronizing data automatically
1653                across multiple grids on the same page. If you are attempting to
1654                synchronize data changes across multiple processes, you will
1655                need some kind of a locking mechanism for the individual cells,
1656                Backgrid.js provides no help for that and you have to do this
1657                yourself. Implementing such web-based spreadsheet-like broker
1658                system is outside of the scope of this project, pull requests
1659                are welcome however.</p>
1660              <h2>Does Backgrid.js support feature (X)?</h2>
1661              <p>If the feature you have in mind isn&apos;t found here in this
1662                Backgrid.js version, it could either be in the works or under
1663                consideration.</p>
1664              <p>See the list
1665                of <a href="https://github.com/wyuenho/backgrid/issues?labels=enhancement%2Ctask&amp;page=1&amp;state=open"
1666                      title="Github Issues">tasks and enhancements</a>.</p>
1667              <h2>How to build Backgrid.js?</h2>
1668              <p><a href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md#building" title="Contributing">See Building.</a></p>
1669              <h2 id="contribute">How do I contribute?</h2>
1670              <p><a href="https://github.com/wyuenho/backgrid/blob/gh-pages/CONTRIBUTING.md" title="Contributing">See Contributing.</a></p>
1671            </div>
1672          </div>
1673        </section>
1674        <section id="license">
1675          <div class="page-header">
1676            <h1>License</h1>
1677          </div>
1678          <p>Copyright &copy; 2013 Jimmy Yuen Ho Wong and
1679            Contributors.</p>
1680          <p>Licensed under the <a href="LICENSE-MIT">MIT license</a>.</p>
1681        </section>
1682      </div>
1683    </div>
1684    <script type="text/javascript">
1685      var _gaq = _gaq || [];
1686      _gaq.push(['_setAccount', 'UA-36403214-1']);
1687      _gaq.push(['_setDomainName', 'backgridjs.com']);
1688      _gaq.push(['_setAllowLinker', true]);
1689      _gaq.push(['_trackPageview']);
1690
1691      (function() {
1692        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
1693        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
1694        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
1695      })();
1696    </script>
1697    <script src="assets/js/scale.fix.js"></script>
1698    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
1699    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
1700    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
1701    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone-pageable/1.2.2/backbone-pageable.min.js"></script>
1702    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
1703    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2.min.js"></script>
1704    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
1705    <script src="//cdnjs.cloudflare.com/ajax/libs/lunr.js/0.3.0/lunr.min.js"></script>
1706    <script src="lib/backgrid.min.js"></script>
1707    <script src="lib/extensions/paginator/backgrid-paginator.min.js"></script>
1708    <script src="lib/extensions/text-cell/backgrid-text-cell.min.js"></script>
1709    <script src="lib/extensions/moment-cell/backgrid-moment-cell.min.js"></script>
1710    <script src="lib/extensions/select2-cell/backgrid-select2-cell.js"></script>
1711    <script src="lib/extensions/select-all/backgrid-select-all.min.js"></script>
1712    <script src="lib/extensions/filter/backgrid-filter.min.js"></script>
1713    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
1714    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
1715    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/xml.min.js"></script>
1716    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/css.min.js"></script>
1717    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/javascript.min.js"></script>
1718    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/htmlmixed.min.js"></script>
1719    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/shell.min.js"></script>
1720    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/lang/zh-tw.min.js"></script>
1721    <script>
1722      (function () {
1723
1724        moment.lang("en");
1725
1726        $(document).ready(function () {
1727
1728          var codestr = '';
1729
1730          $("textarea.code-snippet").each(function (index, elm) {
1731            var $elm = $(elm);
1732
1733            var codemirror = CodeMirror.fromTextArea(elm, {
1734              mode: $elm.data("mode"),
1735              readOnly: true,
1736              lineNumbers: true,
1737              theme: "ambiance",
1738              tabindex: -1
1739            });
1740
1741            var start = { line: 0, ch: 0 };
1742            var end = codemirror.posFromIndex(codemirror.getValue().length - 1);
1743
1744            codemirror.autoIndentRange(start, end);
1745
1746            if ($elm.data("eval") === "yes") {
1747              if ($elm.data("mode") === "javascript") {
1748                codestr = codestr + "\n" + codemirror.getValue();
1749              }
1750            }
1751
1752            $elm.data("codemirror", codemirror);
1753          });
1754
1755          var scriptTag = document.createElement("script");
1756          scriptTag.innerHTML = codestr;
1757          document.body.appendChild(scriptTag);
1758        });
1759
1760        $(document).ready(function () {
1761          $("a[href^='#']").click(function (e) {
1762            e.preventDefault();
1763            var target = this.hash;
1764            if (target) {
1765              var $target = $(target);
1766              $("html, body").stop().animate({
1767                "scrollTop": $target.offset().top - 55
1768              }, 500, "swing", function() {
1769                window.location.hash = target;
1770              });
1771            }
1772          });
1773        });
1774
1775        $(document).ready(function () {
1776
1777          function nextChristmas() {
1778            var now = new Date();
1779            if (now.getMonth() < 11 || (now.getMonth() == 11 && now.getDate() < 24)) {
1780              return now.getFullYear() + "-12-24T00:00Z";
1781            }
1782
1783            if (now.getMonth() == 11 && now.getDate() >= 26) {
1784              return (now.getFullYear() + 1) + "-12-24T00:00Z";
1785            }
1786          }
1787
1788          var santa1 = new Backbone.Model({
1789            name: "Santa Clause",
1790            age: new Date().getFullYear() - 270,
1791            birthday: "0270-03-01",
1792            gender: "m",
1793            alive: true
1794          });
1795
1796          var santa2 = new Backbone.Model({
1797            url: "http://santaclaus.com",
1798            email: "santa@santaclaus.com",
1799            nextDeliveryTime: nextChristmas(),
1800            hisLocalTime: moment().format("YYYY-MM-DDTHH:mm:ss.SSS\\Z"),
1801            moneyInWallet: 10.7
1802          });
1803
1804          var columns = [{
1805            name: "name",
1806            cell: "string",
1807            label: "Name (StringCell)"
1808          }, {
1809            name: "age",
1810            cell: "integer",
1811            label: "Age (IntegerCell)"
1812          }, {
1813            name: "birthday",
1814            cell: "date",
1815            label: "Birthday (DateCell)"
1816          }, {
1817            name: "gender",
1818            cell: Backgrid.SelectCell.extend({
1819              optionValues: [["Male", "m"], ["Female", "f"]]
1820            }),
1821            label: "Gender (SelectCell)"
1822          }, {
1823            name: "alive",
1824            cell: "boolean",
1825            label: "Alive (BooleanCell)"
1826          }, {
1827            name: "url",
1828            cell: "uri",
1829            label: "URL (UriCell)"
1830          }, {
1831            name: "email",
1832            cell: "email",
1833            label: "Email (EmailCell)"
1834          }, {
1835            name: "nextDeliveryTime",
1836            cell: "datetime",
1837            label: "Next Delivery Time (DateTimeCell)"
1838          }, {
1839            name: "hisLocalTime", // His local time is your local time, Santa lives at the North Pole.
1840            cell: "time",
1841            label: "His Local Time (TimeCell)"
1842          }, {
1843            name: "moneyInWallet",
1844            cell: "number",
1845            label: "Change in Wallet (NumberCell)"
1846          }];
1847
1848          var cellDemoGrid1 = new Backgrid.Grid({
1849            columns: columns.slice(0, 5),
1850            collection: new Backbone.Collection([santa1])
1851          });
1852
1853          $("#cell-demo-grid-1").append(cellDemoGrid1.render().el);
1854
1855          var cellDemoGrid2 = new Backgrid.Grid({
1856            columns: columns.slice(5),
1857            collection: new Backbone.Collection([santa2])
1858          });
1859
1860          $("#cell-demo-grid-2").append(cellDemoGrid2.render().el);
1861        });
1862      }());
1863    </script>
1864    <script>
1865      // Google +1
1866      (function() {
1867        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
1868        po.src = 'https://apis.google.com/js/plusone.js';
1869        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
1870      })();
1871
1872      // Tweet Button
1873      !function(d,s,id) {
1874        var js,fjs=d.getElementsByTagName(s)[0];
1875        if(!d.getElementById(id)){
1876          js=d.createElement(s);
1877          js.id=id;
1878          js.src="//platform.twitter.com/widgets.js";
1879          fjs.parentNode.insertBefore(js,fjs);
1880        }
1881      }(document,"script","twitter-wjs");
1882    </script>
1883  </body>
1884</html>