datahub/example-quickstart.markdown

layout, title, recline-deps

layout	title	recline-deps
container	Library - Example - Quickstart	true

Recline Quickstart Guide

This step-by-step guide will quickly get you started with Recline basics, including creating a dataset from local data and setting up a data grid to display this data.

Preparing your page

Before writing any code with Recline, you need to do the following preparation steps on your page:

1. Download ReclineJS and relevant dependencies.
2. Include the relevant CSS in the head section of your document: {% highlight html %}

{% endhighlight %}

3. Include the relevant Javascript files somewhere on the page (preferably before body close tag): {% highlight html %}

{% endhighlight %}

4. Create a div to hold the Recline view(s): {% highlight html %}
   {% endhighlight %}

You're now ready to start working with Recline.

Creating a Dataset

Here's some example data We are going to work with:

{% highlight javascript %} {% include data.js %} {% endhighlight %}

In this data we have 6 documents / rows. Each document is a javascript object containing keys and values (note that all values here are 'simple' but there is no reason you cannot have objects as values allowing you to nest data.

We can now create a recline Dataset object (and memory backend) from this raw data:

{% highlight javascript %} var dataset = recline.Backend.createDataset(data); {% endhighlight %}

Note that behind the scenes Recline will create a Memory backend for this dataset as in Recline every dataset object must have a backend from which it can push and pull data. In the case of in-memory data this is a little artificial since all the data is available locally but this makes more sense for situations where one is connecting to a remote data source (and one which may contain a lot of data).

Setting up the Grid

Let's create a data grid view to display the dataset we have just created, binding the view to the <div id="mygrid"></div> we created earlier:

{% highlight javascript %} var grid = new recline.View.Grid({ model: dataset, el: $('#mygrid') }); grid.render(); {% endhighlight %}

And hey presto: