Grid

A grid widget functions similar to a table widget. In addition, you can perform the following tasks:
  • Change the width of a grid dynamically.
  • Rearrange or remove the columns of a grid from an application.
  • Export the data displayed in a grid to a .csv file. In addition, you can export data from selected columns.
  • Sort the data displayed in a grid.
  • View the data in a tree structure.
  • Scroll till the end of the grid regardless of the number of rows the grid contains.

Grid Settings

When you use a grid widget, in addition to the default settings of a widget, the following settings are available.
SettingDescription
Allow ExportSelect this check box if you want to provide an option to application users to export the data in the grid to a .csv file.
Note: This option is not available on iOS.
TooltipsSelect this check box if you want tooltips to appear in the application.
FlowSelect the query that should be used to retrieve information in the grid.
NameEnter the name of the grid column.
DataSelect this option if you want data in the column to be retrieved from an entity field using a column, and then select the field in the drop-down list box.
FormulaSelect this option if you want data in the column to be displayed based on a formula. For example, if an entity stores the marks scored by students for individual courses, you can create a formula to display the aggregate marks scored by each student.
Show <number> rows at a timeIdentifies the number of rows that should appear by default in the grid. By default, the value in this box is 10. After you enter a value, the following options are available:
  • Load all: If you select this option, the grid will contain all the rows on the same page. However, if you access the application on a mobile device, each page in the grid will contain the number of rows that you specify. You can navigate to the other pages to access the rest of the rows.
  • Infinite scroll: If you select this option, the grid will contain all the rows on the same page.
  • Paging: If you select this option, each page in the grid will contain the number of rows that you specify. You can navigate to the other pages to access the rest of the rows.

Using a Grid

Suppose you want to use a grid to display a list of managers in an organization and the employees reporting to each manager. To do so, perform the following steps:
  1. Create an entity named Wiki Manager, add the fields Manager ID and Manager Name, and add the IDs and names of managers.
  2. Create a Get query named Wiki Get All Managers to get all the records from the Wiki Manager entity.
  3. Create an entity named Wiki Employee, add the fields Manager ID, Employee ID, and Employee Name, and add the respective details.
  4. Create a Get query named Wiki Get Employee by Manager ID with settings as specified in the following image:
  5. Create an application, and add a grid using the page designer.
  6. In the PAGE DATA section, add the Wiki Get All Managers query, and connect all the fields to the grid.
  7. Select the Auto submit (as soon as data is available) check box.
  8. In the Flow box, select Wiki Get All Managers.
  9. In the Name box, enter Manager Name.
  10. In the Data box, select the field that stores the names of managers.
  11. Select Add Field, and then provide values as specified in the following table.
    BoxDescription
    NameEnter Manager ID.
    DataSelect this option, and then select Wiki Manager in the drop-down list box that appears.
    MappingSelect Wiki Employee.
  12. Save the application, and preview it. A grid appears, displaying two sections. The first section contains a list of IDs and names of managers. The second section contains a list of employees that report to each manager.