Grid
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 in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:
General Properties
Size
Style
Translation
General Properties
These are the main properties of any control. These properties define how control behaves in Brixxbox App.
Control Type
- For using grid control, click on "Add Control" and select "Grid" control type from drop down.
Control Id
- For each Brixxbox app, this id should be unique. For Example: "_abcdef". Brixxbox allows you to change its value only once. You can change this id to any value but it should be meaningful. Recommended way is to start with mandatory prefix(set in app). It can contain numbers, underscores, uppercase and lowercase letters.
Label
- It is the display value for control.
Refers to Config
- You need to set this option if this is a field, that other fields refer to, to get data from another config.
Hide Select Checkbox Column
- By default, grid also display's a checkbox with each row. This checkbox is used to select a specific row. If it is enabled then user can select multiple rows at a time and perform different operations on them like deletion. If user does not want to display this checkbox then this property should be checked.
Hide Edit Button Column
- This property is by default unchecked. It allows grid to display an edit button with each displayed row. If user does not want to display Edit button then this property should be checked.
Cascade Delete
- This is a checkbox. If it is set and a delete operation is performed on a record, in an app containing this Grid control then all the lines of a record will get deleted. For example: User wants to delete an order with all of its item's lines.
Cascade Copy
- If it is set and a copy operation is performed on a record, in an app containing this Grid control then all the lines of a record will get copied. For example: User wants to copy an order with all of its item's lines.
Server Side Paging
- Use this property for big data tables. If checked, grid will only be able to data from server side only instead of getting all the data from data source.
Smooth Scroll
- If checked, this property allows the users to scroll through list of items of grid instead of scrolling up and down via paging buttons.
No automatic refresh
- Use this property when fetching expensive Grid data. If set, it will block unnecessary calls for data. Brixxbox allows an app to refresh data of all of its controls using "app.refresh()" function. Settings this property will exclude this grid from data refresh calls. However, you can refresh grid data by specifying the grids name in refresh function. For Example: app.refresh("myGrid").
Tutorial
Gird control can be used in two possible scenarios: displaying all data of sub data source. For example: listing all customer orders, and displaying some values. For example: listing order lines of a specific customer order only.
This tutorial assumes that a user has an existing customer order app which records customer's order data. They want to list all customer orders in a new app and update grid to display all order lines of a specific customer order in customer order app.
For first scenario, create a customer order list app, select "Grid" from list of controls. After that you need to give an id to your grid. As grid is usually used to display data from a sub data source, so there is no need to create column in database for Grid control.
Let start with the first case. Select a new app, name it "customerOrderList". Select a "Grid" control type from the list, assign a unique id and meaningful label:
As you can see from the above picture, we have added a grid control but nothing appears in app editor on right side. This is not an error but expected behavior because grid control is used to display a list of records but first we need to specify "sub data source" in grid properties. For this 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 app settings.
Now you can see that our grid list all customer orders. In its menu, grid allows multiple options like adding new data row, deleting data row, refresh grid, copy data, search filter and drop down list for specifying number of entries for display. Grid provides each data row with plus, select, and edit button. Depending on screen size grid displays only few data columns and plus button is used to see remaining columns as shown below:
Grid allows us to enable or disable select and edit buttons(see General Properties). We have successfully listed all customer orders, now we move towards second scenario. We have two relations between customer order and order lines which are: customer order can have multiple order lines, and one order line can only belong to one customer order. In this part, we want to cover second relation. Now we want to display order lines which belong to only one customer order in customer order app grid. Our customer order app looks like this:
There are a lot of details in this app which are not important here. Our concern is order lines gird which will display only those order lines which belong to one specific order. To allow this behavior, we need to edit "sub data source" settings of our order lines grid and set "target field binding" with the customer order line id.
Now we will see only those order lines in our grid which belong to same customer order. Lets add a new order for our customer John and add a new order line for this order.
Now order lines which belong to John's order are being displayed in our order lines grid. In our case we only added one order line.
Last updated
