Breadcrumbs

Conditional Lists In Data Grids

Make one list depend on another in each row of a Data Grid. In this example, users pick a vehicle Make, and the Model list shows only models of that make.

Step 1: Create the routes

With a Vehicles table that has Make and Model columns, add two Resquel routes and restart the GlobalForms service:

JSON
{
  "method": "get",
  "endpoint": "/makes",
  "query": "SELECT DISTINCT Make FROM Vehicles ORDER BY Make;"
},
{
  "method": "get",
  "endpoint": "/makes/:make",
  "query": "SELECT Model FROM Vehicles WHERE Make = {{ params.make }} ORDER BY Model;"
}

Do not put quotes around {{ params.make }}. Test both routes in a browser, for example https://forms.example.com/makes/Volvo.

Step 2: Build the Data Grid

Add a Data Grid with two Select components, and set these on each Select's Data tab:

Setting

Make list (API key makeList)

Model list

Data Source Type

URL

URL

Data Source URL

https://forms.example.com/makes

https://forms.example.com/makes/{{ row.makeList }}

Data Path

rows

rows

Value Property

Make

Model

Item Template

<span>{{ item.Make }}</span>

<span>{{ item.Model }}</span>

Clear Value on Refresh

-

Checked, so the model clears when the make changes

{{ row.makeList }} passes the Make chosen in the same row to the Model route.

Keep lists short. For large data sets, or to avoid one request per row, consider loading the data once and filtering it with the Select component's Stored Data option. See Select.