Grid View

Overview

The Grid View component is used to display a collection of items. By default, it 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.

Properties

Methods

Triggers

Working with the component

Gird View supports both static and dynamic data. To display data dynamically from your action, select the action you need in the Data property dropdown of the component.

Accessing Grid items

You can access any grid item by referencing it as {{item}}, for example, {{item.first_name}}. To reference the index of the item, you can use the {{index}} variable.

Keeping Grid items in sync

If you need to display Checkbox or Input components, for example, and monitor their values corresponding to the Grid items, you can configure it in UI Bakery. Check out the flow below👇

1. Start by creating a state variable (App scope) that will contain the list of items to be displayed in the Grid View - select the Array type.

1. Next, create a new action of the JavaScript Code type to load the data into the variable:

const list = [
  {
    id: 1,
    name: 'USA',
    selected: false,
  },
  {
    id: 2,
    name: 'Canada',
    selected: false,
  },
  {
    id: 3,
    name: 'France',
    selected: false,
  },
 ];
{{state.setValue('list', list)}}

1. Now, connect the variable to the Grid view component and the inner Checkbox component inside the Grid:

   1. Grid View - assign the state variable to the component's Data property.

   2. Checkbox - set the item name in the component's Label field and the selected property in the Value field. Now, if we change the list variable values and set some items to be selected, the changes will be reflected on the UI.

2. Finally, create another action of the JavaScript Code type to track checkbox value changes and update the selected value inside the list variable:

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)}};

1. Now, assign this action to the Checkbox's On Change trigger and add the id of the current grid item to the Action Arguments field - { id: {{item.id}} }. This will indicate which checkbox has changed its value.

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

Server-side pagination

If you have a large dataset, you may find it useful to use server-side pagination. You will find details on how to set it up in the article below👇