Grid

A grid displays a list of records, specified by the sub data source of that control.

Documentation

In Brixxbox, app configuration allows you to add different controls to your app. It provides four types of properties that manage how controls should behave or appear in the app:

1. General Properties
2. Size
3. Style
4. Translation

General Properties

---

These are the main properties of any control. These properties define how the control behaves in a Brixxbox App.

• Control Type

  • For using the grid control, click on "Add Control" and select "Grid" control type from the dropdown.

• Control Id

  • This ID must be unique for each Brixxbox app. Example: "_abcdef". Brixxbox allows you to change its value only once. You can change this ID to any value, but it should be meaningful. The recommended approach is to start with the mandatory prefix (set in app). It can contain numbers, underscores, uppercase and lowercase letters.

• Label

  • This is the display value for the control.

• Refers to Config

  • You need to set this option if this is a field that other fields refer to in order to get data from another configuration.

• Hide Select Checkbox Column

  • By default, the grid displays a checkbox with each row. This checkbox is used to select a specific row. When enabled, users can select multiple rows at once and perform operations on them, such as deletion. If you don't want to display this checkbox, this property should be checked.

• Hide Edit Button Column

  • This property is unchecked by default. It allows the grid to display an edit button with each displayed row. If you don't want to display the Edit button, this property should be checked.

• Cascade Delete

  • This is a checkbox option. If it is set and a delete operation is performed on a record in an app containing this Grid control, then all related lines of the record will be deleted. For example: When a user deletes an order, all of its item lines will also be deleted.

• Cascade Copy

  • If this is set and a copy operation is performed on a record in an app containing this Grid control, then all related lines of the record will be copied. For example: When a user copies an order, all of its item lines will also be copied.

• Server Side Paging

  • Use this property for large data tables. If checked, the grid will only fetch data from the server side instead of loading all data from the data source at once.

• Smooth Scroll

  • If checked, this property allows users to scroll through the list of items in the grid instead of navigating via paging buttons.

• No automatic refresh

  • Use this property when fetching expensive Grid data. If set, it will block unnecessary data refresh calls. Brixxbox allows an app to refresh data of all its controls using the "app.refresh()" function. Setting this property will exclude this grid from global data refresh calls. However, you can still refresh grid data by specifically targeting the grid's name in the refresh function. For example: app.refresh("myGrid").

Tutorial

The Grid control can be used in two primary scenarios: displaying all data from a sub data source (for example, listing all customer orders), or displaying specific related values (for example, listing order lines of a specific customer order).

This tutorial assumes that you have an existing customer order app that records customer's order data. We'll show how to:

1. List all customer orders in a new app
2. Display all order lines of a specific customer order in the customer order app

Scenario 1: Listing All Customer Orders

Create a customer order list app, select "Grid" from the list of controls. Since grids are typically used to display data from a sub data source, there's no need to create a database column for the Grid control.

Let's start by creating a new app named "customerOrderList". Select a "Grid" control type from the list, assign a unique ID and meaningful label:

As you can see, we've added a grid control but nothing appears in the app editor on the right side. This is expected behavior because the grid control is used to display a list of records, but first we need to specify the "sub data source" in grid properties. Click on "edit sub data source" and select "config" as a data source type. Now select "CustomerOrder" app to display all customer orders and save your app settings.

Now you can see that our grid lists all customer orders. In its menu, the grid provides multiple options like adding new data rows, deleting data rows, refreshing the grid, copying data, search/filter functionality, and a dropdown list for specifying the number of entries to display. The grid provides each data row with plus, select, and edit buttons. Depending on screen size, the grid displays only a few data columns, and the plus button is used to see the remaining columns:

Scenario 2: Displaying Order Lines for a Specific Order

We have two relationships between customer orders and order lines:

1. A customer order can have multiple order lines
2. An order line can only belong to one customer order

In this part, we'll implement the second relationship by displaying order lines that belong to a specific customer order. Our customer order app looks like this:

To display only the order lines belonging to a specific order, we need to edit the "sub data source" settings of our order lines grid and set "target field binding" with the customer order line ID:

Now the grid will only show order lines that belong to the same customer order. Let's add a new order for our customer John and add a new order line for this order:

Now the order lines that belong to John's order are displayed in our order lines grid. In this example, we've only added one order line.