Login & Menu

  2. Home
  4. Docs
  6. Login & Menu
  8. Pagetypes
  10. grid / modalgrid

grid / modalgrid

A grid is a list of data and is in a lot of cases the start of a lot of menu items. In BOA you can open a grid as a grid or as a modalgrid. As with each pagetype you can decide if it must be opened in another tab of the application, or if it has to be opened in a modal form. There is also a tabgrid and a modaltabgrid. These tabgrids are to be used if you want to use it with a form with different tabpages.

In all cases the definition of the grid will be about the same.

Elements of a grid:

First element is where you can enter data to search or to filter for, second element are the available buttons and third are the columns to show.

Grid definition:

{ “title”: “Levering”,
“endpoint”: “/files/sales/L”,
“pagetype”: “grid”, “pagesize”: “lg”
“hidefilter”: “1”,
“position”: “bottom”,
“icon”: “r”,
“id”: “deliveries”,
“buttons”: [
“add”,
“delete”,
“edit”,
“exit”
],
“onclick”: {
“endpoint”: “/files/salesdet/${id}?key=L”,
“pagetype”: “form”, “pagesize”:”xl”,
“buttons”: [
“delete”,
“add”,
“save”,
“list”,
“previous”,
“next”,
“exit”
]
}

  • title: when used in a menu, there must be a title for the menu item. If a grid is used as an element in a form, there is no title needed.
  • endpoint: the endpoint to get the data.
  • pagetype: defines how to show the grid, modal or not.
  • pagesize: only to be used when you want a modal popup.
  • hidefilter: to hide the search/filter line. Default is ‘0’.
  • hidefilterrow: to hide the first row, below the headers. Default is ‘0’.
  • groupable: to activate the drag/drop functionality to group on columns.
  • draggable: to activate the functionality of drag/drop of a row.
  • position: to define if you want to show the top row of the data, or the bottom row of the data. Default is top.
  • icon: icon to be used. See the icon font.
  • id: unique id.
  • buttons: array of the buttons you want.
  • onclick: object with data for the onclick action.
  • endpoint: use ${id} in the url so the system can replace this with the id of the selected row.
  • pagetype: type of form that must be opened, modal or not.
  • pagesize: to be used when a modal has to be opened.
  • buttons: array with the buttons for the form that will be opened.

Pagetype:

  • grid: opens in a new tab.
  • modalgrid: opens in a modal popup.
  • tabgrid: opens in a new tab and has to be used when the form that will be used with the onclick is a tabform.
  • modaltabgrid is a tabgrid which opens as a modal popup.

Pagesize:

  • sm: small
  • md: medium
  • lg: large
  • xl: extra large

How can we help?