Grid Node

GridImg01

The purpose of Grid node is to insert in some part of the form a grid which can contain attributes, variables, and actions (user and standard).

Grid node has the following properties: 

Category Property  
General Properties Include Pagination Bar GridImg02
Include Rows Per Page Selector
Location in father Table Cell Width (Extra Small)
Cell Width (Small)
Cell Width (Medium)
Cell Width (Large)
Visible (Extra Small)
Visible (Small)
Visible (Medium)
Visible (Large)
Cell Theme Class
Align
Start Col / Fst Avail
Merge with previous Cell
Grid Items Selection Allow Selection
Allow Hovering
Type Type
Group Group Type
Fixed Group Field
Group Caption
Default Group
Allow Collapse Group
Conditional Formatting Conditional Formatting
Custom Properties Custom Properties
Columns Selector Columns Selector

General Properties:

Specifies whether the pagination bar will be included for this grid or not. If <default>, the value will be taken from WorkWithPlus Settings -> Actions -> Pagination Bar -> Include Pagination Bar property. A grid with pagination bar will look like the following image:

GridImg03

The amount of pages to show, buttons, captions etc. are configurable in WorkWithPlus Settings -> Actions -> Pagination Bar

Include Rows Per Page Selector:

Specifies whether to include or not the rows per page selector at the bottom of the grid.

The properties inside 'Location in father table' will be different if the Web Panel where the grid is inserted is responsive or HTML (this is explained in the link below). If you want to read information about the Location in father table properties, follow this link: Location in father table

Properties Of Category Grid Items Selection:

Allow selection:

Specifies whether the grid will allow selection of grid records or not. If allows selection, it will take the selection color from property in WWPConfiguration ->Grid->Selection Color. The idea is that some action outside the grid will be associated to a record selected. You could add the StandardAction Update or Delete outside grid, and the validation that some record is selected will be done automatically. Only applies if property ColumnsSelector is false.


Allow hovering:

Specifies whether the grid will allow hovering of grid records or not. If allows hovering, it will take the hovering color from a property in WWPConfiguration ->Grid->Hovering Color. This only applies when Allow selection property is true.

GridImg04

GridImg05

Properties Of Category Type:

Type:

Specifies the type of the Grid. The options that are displayed are the different grid renders available on your GeneXus installation. In this way, if you have a different grid render you can use it with WorkWithPlus. For example, if you have GXUI installed on GeneXus, the options will be: Genexus, GXUI or <default>. <default> value will be taken from WWPConfiguration -> Grid -> Type. Genexus type is the regular grid.

GXUI Grid Type:

GridImg06

Properties of Category Group:

Group Type:

Defines the grid grouping records behaviour. The options are:

  • None: the grid won't have the records grouped by any column
  • Fixed: the records of the grid will be grouped by a certain column
  • Multiple options: end user will be able to change the column used to group the records

Fixed Group Field:

When selecting the option 'Fixed' in property 'Group Type', you need to specify by which column you want to have the records grouped by. And you will specify it in this property.

In the property "Caption Group" we assigned the caption of the title group.

In the example below, we are going to group the branches by country:

ImageGroupFixedWWP13

At runtime it's visualized in this way:

ImageGroupFixedWWP13_1

Group Caption:

Specifies the caption to be displayed in the group row. You can mention the tags <ATT_DESCRIPTION>, <ATT_VALUE_DSC> and <GROUP_COUNT>.

Example 1:

  • Group column: Status
  • Value of 'Group caption': format('%1: %2', 'Status', <ATT_VALUE_DSC>)
  • At runtime each group row will display:
    • Status: Started
    • Status: Finished
    • Status: Canceled

Example 2

  • Group column: Status
  • Value of 'Group caption': format('%1: %2' (%3), 'Status', <ATT_VALUE_DSC>,<GROUP_COUNT>)
  • At runtime each group row will display:
    • Status: Started (74)
    • Status: Finished (52)
    • Status: Canceled (59)

Default Group:

When selecting the option 'Multiple options' for property 'Group Type', this property defines the group column that will be used by default when loading the grid.

Allow Collapse Group

Specifies if the group will be collapsible or not. 

In the example below, the property value is True:

ImageGroupFixedWWP13_2

If the value is False, the groups will be fixed. 

Properties Of Category Conditional Formatting:

Conditional Formatting:

Specifies the formats that will apply to the rows of the grid in relation to certain conditions. Also, you can add a badge column depending on these conditions. You can visualize examples and illustrations of this feature on the following link: Conditional Formatting

Properties Of Category Column Selector:

Column Selector:

Specifies whether to generate the grid allowing Columns Selector functionality or not. If this property is True, WorkWithPlus pattern will give the possibility to select at runtime which columns to be visible.

This is useful when we have too many columns in a grid, and user whishes to visualize ones or others depending on what is analyzing.

The type of Grid that WorkWithPlus will generate will be taken from WWPConfiguration -> Grid -> Column Selector Type. By default this property has the value "Regular Grid" but you can select the option "Free Style Grid" if you need to change column´s order at runtime.

If you want to read more information about about the Columns Selector, follow this link:
Column selector

Custom Properties:

Custom Properties:

Gives the option to assign specific properties to the grid, properties that are not available within the attribute node. This should be used in just a few cases. Detailed info: Custom Properties for Grid, Attributes, and Variables?

Actions over Grid Node

Convert into Free Style Grid:

Converts the regular grid into a free style grid. It maintains all the properties of the grid and its items (actions, attributes, variables, etc). This is available for regular grids inside a Transaction instance (Selection, GridTab, etc.) and for grids inside Web Panels (based on collections or regular ones).

GridImg09

Select SDT:

Allows you to select an SDT and will create a variable based on that SDT and add the selected elements of the SDT inside the grid, making the grid based on that SDT.

GridImg10

GridImg11

GridImg12