Grid view

Grid view component serves for displaying the collection of items. By default, the grid view contains an image field and a caption, which can be replaced with the required components. If you need to create a custom layout, you can add the necessary components to the first list item. The added components are replicated for the other grid view items.

Methods

Method	Description
setPage(number)	navigates to a specific page
setPageSize(number)	sets the number of items displayed per page in a grid view

Triggers

Triggers allow you to launch certain actions upon different events.

On Init	Calls for an action on component's initialization
On Page Change	Calls for an action when the grid page is changed

Working with a grid view

The grid view component supports both static and dynamic data.

To display the data dynamically from your action, refer to your action as {{actions. yourLoadDataAction. data}} in the Data field of the grid component.

Accessing grid items

You can access any of the grid items by referencing it as {{item}}, e.g. {{item.first_name}}:

To reference the index of the item, use the {{index}} variable.

Setting/getting checkboxes values

If you need to display checkbox/input components and monitor their values corresponding to the grid items, here is how you can do this:

• Firstly, create a variable that will hold the list of items to be displayed in the grid:

• Load the data into the variable. We will do this with the JavaScript action step. It is essential that each item has a unique id for identification purposes at a later stage:

Notice how each item includes a selected attribute - it will indicate whether the checkbox has been selected or not.

• Next, connect the variable to the grid component and to the inner checkbox component with the {{item}} variable - each {{item}} represents a value from the assigned array variable.

Grid component:

Inner checkbox component:

Notice how we set the selected property to the value setting of the component. Now if we change the list variable values - and set some item to be selected - this will be reflected on the ui:

• Lastly, we need to track the "On Change" event of the checkbox and update its selected value inside of the list variable:

Assign a new action to the On Change trigger, in the trigger parameters - pass the id of the current grid item - this will indicate which checkbox has changed its value:

• Now, we can complete this action with some JavaScript code to find the checked item and alternate its current value:

const updatedList = {{state.list}}.map((item) => {
  if (item.id === {{params.id}}) {
    // reverse value
    return {
      ...item,
      selected: !item.selected,
    };
  }
  // unchanged
  return item;
});
{{state.setValue('list', updatedList)}};

That's it! This way you will keep your grid input items in sync with the "data model" and can use this data to send all updated values to the server.

Server-side pagination

If you have a large dataset, you might want to use server-side pagination with a grid view component. Please refer to the guide below for setup:

pageTable server side pagination