Bookmark and Share Share   

Simple Grid View

This view displays repeating data in a simple table of any size for desktop and mobile devices. It automatically paginates data and also wraps the content of each cell into multiple lines, but does not provide any other functionality to users.

Simple Grid does not allow users to sort data within a page based on a specific column or resize column widths. Try the Grid View if you need these capabilities for desktop browsers.

The Simple Grid view is used instead of Grid on mobile devices.

You can use view configuration to define column widths, column order and grouping for the view when you create. You can also define specific formatting for columns based on the type of data for that column.



Characteristics

Requirements

A set of repeating items with one or more fields.

Published Events
  • rowclick = user clicks in a cell to select a data row in the table

  • cellclick = reserved for future use

  • headerclick = user clicks in a cell in the column header row

Mobile Views

Yes

Configure This View

In most cases, Presto finds the path to the repeating items in your data to use for each row of the table. You can change this if needed when you configure the view.

Then define which columns to use in this table, the data that should appear in each column and basic column formats in Data Configuration. You can:

  • Move or remove columns (see instructions below)

  • Add columns and assign values (see instructions below)

  • Combine data into one column (see instructions below)

  • Change column headings and other formats (see instructions below)

Preview the results and once you are satisfied, save the view.

Move or Remove Columns

Steps:

  • To remove any column from the table, click for that column.

    Removing a column hides the data in the view. You can, however, still combine this data with other data for other columns. It is also included in the data published for the rowclick event.

  • To move a column, drag it in the list of columns and drop it where you want it.



Add Columns and Assign Values

Steps:

Use Templates to Combine Data, Add Literal Text or Add HTML Tags

You can combine data from several fields into a single value, add literal text or add HTML tags to data and assign the result to a column using templates. Templates combine tokens, identifying a field, with optional literal characters or HTML markup to build the data and format it.

Tokens to identify a field are shown in the form #{path/to/the/field}.

Select the column from the list where you want to combine data and:

Steps:

  1. Set the Edit Template option for the column to contain the combined data.

  2. If needed, delete the default token which defines the field currently assigned to this column.

  3. Enter literal characters or HTML markup wherever you want within the overall template.

    In this example, the colon is a literal character and #{tasks/task/0/no} is a token for a task number field.



  4. To add data from other fields to the template, select the path to the field you want and click .

  5. Continue adding literal characters, HTML markup and tokens for other fields until you are satisfied with the template.

Change Column Headings and Other Formats

Select a column from the list to change the heading and other format.

Steps:

  • Use Column Title to change the heading that appears for the current column.

  • Use Column Format to apply these basic formats to the data:

    • Date = expects a string with a date, time or date and time.

      It converts this string to a date and optionally a time for sorting purposes. You choose the format to display the data in the Data Format property.

    • HTML = for content that contains HTML tags.

    • Image = renders this as an image with the data for this column as the URL to the image file.

    • Link = creates a link with the data for this column as the URL.

    • Number = right justifies data.

    • Text = left justifies data. This is the default.

    • Text (Show...) = left justifies the data, limits it to 80 characters and appends an ellipsis (...) to indicate that there is more data when the content is larger than 80 characters.

    You can add more specific formatting to numbers or dates. See Number, Color, Arrow and Date Formatters for details.

  • Use Column Width to directly control the number of pixels to use for this column.

  • Use Group to group together rows with the same value for this column. Each group has a visual subtitle with the value for that group.

Number, Color, Arrow and Date Formatters

These formatters provide more detailed formatting for columns with a basic format of number of date.

Number Formatter

Use this formatter with numeric data to control decimal places, thousand separators, currency symbols or other common prefixes and suffixes for numbers.

Decimal Places

The number of decimal places to display for every number in this column.

If you do not set this property, numbers with a decimal value are shown as is.

Prefix

A currency symbol or any other literal text characters to prefix each number in this column.

Suffix

A currency abbreviation or any other literal text characters to use as a suffix for each number in this column.

Use parentheses in negative values

Surround negative values with parentheses symbols. This is typically used in accounting formats for credits.

Use commas

Add thousand separators to numbers greater than 999.

Color Formatter

Use this formatter with numeric data to control the background and text colors used for specific ranges of numbers.

Add Range

Click this to define a range of numeric values that you want to set color formats for.

>=

Set the upper inclusive bound for this numeric range.

<=

Set the lower inclusive bound for this numeric range.

Cell

Click this to set the background color for any number within this range.

Text

Click this to set the color for the text for any number within this range.

Arrow Formatter

Use this formatter to add a green up arrow to all positive numbers in this column and a red down arrow to all negative numbers in this column.

Date Formatter

Choose mm/dd/yyyy or dd/mm/yyyy as the format for dates in this column.