---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-grid
widgetname: Grid
description: "The Grid widget displays data source results, customizable with columns and linked to UI elements"
---

# Grid

![Grid][Grid]

## Overview

The Grid Widget displays the results of the execution of a data source. Below there is an example with a Grid UI Page.

![GridExample][GridExample]

!!! smart-barcode "Smart Barcode Scanning"
    This widget supports [[smart-barcode-scanning|Smart Barcodes]].

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps_with_behavior.md' %}

![GridGeneral][GridGeneral]

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![gridStyle](images/grid_style.png)

2. In the **Setup** tab provide selection mode and actions.

    ![GridSetup][GridSetup]

3. In the **Columns** tab, define the columns to display data on the Grid component. It is necessary to define the header for the column, a path (a string that represents a path to a property of an object, e.g.: Material.Product.Name) and, optionally the type.

    ![grid columns](images/grid_columns.png)

4. Optionally, use the **Inputs** tab to configure additional columns which can be sent by input.

    ![GridEInputs][GridInputs]

5. Define the **Links** between this widget and other elements of the UI Page. As this widget requires a task, it must be added as a link.

    ![GridLinks][GridLinks]

6. Select **Save and Close** to complete the widget configuration.

## Real Use Case

You should configure the Columns tab of the Grid wizard once the grid is setup and linked to a task (in this case a Query for the **ScheduleJob** Entity), a number of columns can be added. Depending on how the columns are built, they can have different functions and appearances.

!!! note
	The path property of each column is always relative to the entity of the Query. If the property to display is a direct property of the same Entity Type, the property name needs to be input. If it is a property of a linked property, the path has to be build in fashion `LinkedEntity.LinkedProperty`. Examples can be seen below:

![Real Use Case — screenshot: image 20210519144059193](images/image-20210519144059193.png)

### Hyperlink entity column

For a column to display a hyperlink to an entity, the path must reference the entity's ID, and the column must be configured as type ReferenceType for the same entity to which the ID refers.

![Screenshot showing a grid with columns, illustrating the step to configure a column as ReferenceType for entity ID referencing.](images/grid_use_case01.png)

### Entity name column

To accomplish this simply have the column setup for the Name property of the entity:

![Screenshot showing an entity name column with multiple rows of data.](images/grid_use_case02.png)

### Date column

If the column is representing a date it has to be configured for type DateTime or Date to prevent simply representing the numeric representation of the date. In this case also the `PlannedStartDate` is a direct property of the **ScheduleJobs** entity and thus the path is the property itself.

![Screenshot showing a data grid with a column labeled "columns tor ‘alum deta", illustrating the importance of configuring its type to DateTime or Date to prevent numeric date representation.](images/grid_use_case03.png)

[Grid]: images/uiGrid.png
[GridExample]: ../chart-widgets/images/uiPageExample5.png
[GridGeneral]: images/grid_general.png
[GridSetup]: images/grid_setup.png
[GridInputs]: images/grid_inputs.png
[GridLinks]: images/grid_links.png