Docs

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>.

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

OR

<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/"

Top

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

<zing-grid
  src="https://zinggrid-examples.firebaseio.com/movies/"
  editor context-menu infinite>
</zing-grid>
https://app.zingsoft.com/demos/embed/K81OAAXT
https://app.zingsoft.com/demos/embed/K81OAAXT
Top

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.

<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".
Top

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".

https://app.zingsoft.com/demos/embed/QV4FBCXK
https://app.zingsoft.com/demos/embed/QV4FBCXK
Top

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".

[
  {
    "courseId": "A21",
    "courseName": "Astronomy",
    "students": [
      {
        "grade": "A",
        "id": "241",
        "name": "Brian"
      },
      {
        "grade": "A-",
        "id": "386",
        "name": "Jenny"
      },
      ...
    ]
  },
  {
    "courseId": "M15",
    "courseName": "Greek Mythology",
    "students": [...]
  }
]
https://app.zingsoft.com/demos/embed/D64W7I1M
https://app.zingsoft.com/demos/embed/D64W7I1M
Top

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>.

  1. Add the height and page-size attributes to your <zing-grid> tag
<zing-grid height="400" page-size=10>
  1. Add adapter and src attributes to <zg-data>
<zg-data adapter="firebase" src="https://zinggrid-examples.firebaseio.com/movies">
  1. Add loadByScroll and name attributes <zg-param>
<zg-param name="loadByScroll" value="true"></zg-param>
<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>
https://app.zingsoft.com/demos/embed/J0L5T5YU
https://app.zingsoft.com/demos/embed/J0L5T5YU
Top

Another Version:

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

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

This can be rewritten as:

<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.

https://app.zingsoft.com/demos/embed/XTNZA1Q7
https://app.zingsoft.com/demos/embed/XTNZA1Q7
Top