docs
Menu
Menu

Retrieving Firebase Data

If you want to populate the grid using data stored in Firebase, then you just need to set the src attribute to the Firebase URL that includes the path to the data. You can either set the src attribute for <zing-grid> or <zg-data>.

CloseCopy Copied
<zing-grid src="https://databaseName.firebaseio.com/path/"></zing-grid>

OR

CloseCopy Copied
<zing-grid>
  <zg-data src="https://databaseName.firebaseio.com/path/"></zg-data>
</zing-grid>

Sample Grid

Note: In the next few examples, we will be using our movies data, which has the Firebase path: "https://zinggrid-examples.firebaseio.com/movies/"

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

CRUD Grid

By default, setting the source to a Firebase URL provides us with a simple CRUD grid. You can create new rows, read from the given source, update cells or rows, and delete rows from the grid. Any changes we make will automatically be reflected in the database.

Note: In order to update cells/rows, you need to set the editor attribute for the grid. You can create/update/delete rows through the context menu, which appears after setting the context-menu attribute for the grid. You could also do this by setting specific column types.

Sample HTML

CloseCopy Copied
<zing-grid
  src="https://zinggrid-examples.firebaseio.com/movies/"
  editor context-menu infinite>
</zing-grid>

Using Firebase Queries

To make it easier to use Firebase queries, set the data's adapter attribute to "firebase". This will then set all of the appropriate parameters according to what Firebase expects.

CloseCopy Copied
<zing-grid>
  <zg-data
    src="https://zinggrid-examples.firebaseio.com/movies/"
    adapter="firebase"></zg-data>
</zing-grid>

This sets sortByKey and limitToKey:

  • sortByKey: The query parameter that specifies the sort field. For Firebase, it is set to "orderBy". (See the Firebase docs for orderBy here).
  • limitToKey: The query parameter that specifies how many records to limit to. It is used in infinite scroll and loadByPage, and it is set to "limitTo".

Sorting

If we want to sort the data, then we set the sortBy key to the property that we want to sort on. We also use queryString, which allows us to include additional query strings in the request, such as startAt=value – where "value" refers to the values of the data that we want to start sorting at.

In the example below, we sort based on the "title" key of our data, starting at the values that begin with "D".

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

recordPath

If you have multiple top-level objects stored in your database, you can select which object you want to use to populate the grid by setting recordPath equal to the path from the JSON object to the object with the grid data. This allows you to just change recordPath to easily switch between data.

In our courses object (given by the path: "https://zinggrid-examples.firebaseio.com/courses/"), we have two objects. If we wanted to display the first course's array of students as a grid, we would set recordPath equal to "0.students". If we wanted to do this for the second course, we would set it to "1.students".

CloseCopy Copied
[
  {
    "courseId": "A21",
    "courseName": "Astronomy",
    "students": [
      {
        "grade": "A",
        "id": "241",
        "name": "Brian"
      },
      {
        "grade": "A-",
        "id": "386",
        "name": "Jenny"
      },
      ...
    ]
  },
  {
    "courseId": "M15",
    "courseName": "Greek Mythology",
    "students": [...]
  }
]
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Infinite Scroll

Enable infinite scrolling by adding the height and page-size attributes to your <zing-grid> tag. Then add loadByScroll name attribute to <zg-param>.

Add the height and page-size attributes to your <zing-grid> tag

CloseCopy Copied
<zing-grid height="400" page-size=10>

Add adapter and src attributes to <zg-data>

CloseCopy Copied
<zg-data adapter="firebase" src="https://zinggrid-examples.firebaseio.com/movies">

Add loadByScroll and name attributes <zg-param>

CloseCopy Copied
<zg-param name="loadByScroll" value="true"></zg-param>
CloseCopy Copied
<zing-grid height="400" page-size=10>
  <zg-data adapter="firebase" src="https://zinggrid-examples.firebaseio.com/movies">
    <zg-param name="loadByScroll" value="true"></zg-param>
  </zg-data>
</zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Another Version: <zg-param>

In the examples above, most of our configurations are set in the options object. Another way that we can write this is using <zg-param>. This provides greater readability and allows us to focus on a more component-based approach.

<zg-param> is a child of <zg-data>, and it has two attributes: name and value.

Sample HTML

CloseCopy Copied
<zg-data options='{"queryString": "limitToFirst=7&startAt=\"F\""}'></zg-data>

This can be rewritten as:

CloseCopy Copied
<zg-data>
  <zg-param name="queryString" value='limitToFirst=7&startAt="F"}'></zg-param>
</zg-data>

Full Example

In this example, we set the adapter, sort the data, and then display the last 8 entries.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading