Mendix 7 is no longer supported unless you have Extended Support (for details, please contact Mendix Support). Mendix 7 documentation will remain available for customers with Extended Support until July, 2024.
Template Grid
The template grid shows a list of objects in a tile view. For example, a template grid can show a list of products. Using controls provided by the template grid you can browse, search and manipulate those objects. The template grid has a lot in common with the data grid. The main difference is that the objects are shown in templates (a sort of small data view) instead of rows.
Like data grid rows, single tiles do not have their content updated. For example, a data view inside a tile is not updated via the Refresh in client setting in a microflow action. Refreshing the template grid entity refreshes the whole grid.
A template grid showing employees with their profile picture.
Common properties
Name
The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class mx-name-{NAME}, which can be useful for Selenium testing.
Class
The class property allows you to specify one or more cascading style sheet (CSS) classes for the widget. The classes should be separated by a space. The classes will be applied to the widget in the browser and the widget will get the corresponding styling. The classes should be classes in the theme that is used in the project. It overrules the default styling of the widget.
Styling is applied in the following order:
- the default styling defined by the theme the project uses
- the
Classproperty of the widget - the
Styleproperty of the widget.
You can see which widgets in a page have styling applied via the class or style property by clicking the Show styles button.
Style
The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.
For example:
background-color:lightblue; color:red;
will result in red text on a blue background.
You can see which widgets in a page have styling applied via the style or class property by clicking the Show styles button.
Tab index
The tab index influences the order in which the end user navigates through the page using the tab key. By default tab indices are zero and the tab order is determined automatically by the client system. A value of minus one (-1) means that the widget will be skipped when tabbing through the page.
Default value: 0
Components
Control bar
See Control Bar.
Search bar (for data source type ‘Database’ and ‘XPath’)
See Search Bar.
Sort bar (for data source type ‘Database’ and ‘XPath’)
See Sort Bar.
General properties
Show control bar
This property indicates whether the control bar will be visible in the end user interface. The control bar also includes the paging buttons.
Default value: True
Show paging buttons
This property indicates with the buttons to page through the information in the grid are visible. Only hide these buttons if you are sure that there will never be more objects than the number of rows of the grid. Note that hiding the control bar also hides the paging buttons.
Default value: True
Number of rows
With this property you can change the number of rows of templates that will be shown on one page.
Default value: 3
Number of columns
With this property you can change the number of templates that will be shown next to each other in one row.
Default value: 2
Style template
The style template property allows you to choose from three different styling of the template grid. These stylings depend on your theme package.
Selection mode
The selection mode determines whether and how the user can select items in the grid.
| Value | Description |
|---|---|
| No selection | The user cannot select items. |
| Single selection | The user can select a single item by clicking on it. Clicking another item will make that item the selection. |
| Single selection and maintain | The user can select one item at a time by clicking on it. Users cannot deselect an item. By default the first item will be selected and removing a selected item will autoselect a subsequent item. |
| Multi-selection | The user can select multiple items by clicking the first one and holding the ‘Ctrl’ key while clicking on other items. Simply clicking an item will deselect all items and make the clicked item the selection. |
| Simple multi-selection | The user can select multiple items by simply clicking on them. |
Default value: Single selection
Select first
This property indicates whether the first item will be selected initially. This is especially useful if there is a data view listening to this grid.
Default value: False
Default button trigger
The default button can be triggered by a single or a double click a row.
| Value | Description |
|---|---|
| Single click | A single click triggers the default button. This cannot be used in combination with allowing the user to select rows. |
| Double click | A double click triggers the default button. |
Default value: Double click
Refresh time (in seconds)
If the refresh time is non-zero, the template grid will refresh its contents every given number of seconds. For example, a task list could be refreshed every minute so that you know when new tasks arrive. By default the refresh time is zero and this means that the grid will not automatically refresh itself.
Default value: 0
Data source properties
The data source determines which objects will be shown in the template grid. For general information about data sources, see Data Sources.
Type
The template grid supports the following types of data sources: Database Source, Association Source, Microflow Source. The database source retrieves objects from the database and supports searching and sorting. The association source follows an association from the enclosing data view to get to the objects. Finally, the microflow source calculates the list of objects by executing a microflow.
Other properties
See the corresponding data source for its properties:
Visibility properties
Visible
By default, whether or not an element is displayed in the browser is determined by how the page is designed and the user’s roles within the application. However, the page can be configured to hide the element unless a certain condition is met.
Context
The widget can be made visible only if the object of the data view that contains the widget satisfies the specificied criteria.
A practical example would be a web shop in which the user must submit both billing and delivery information. In this case, you might not wish to bother the user with a second set of address input fields unless they indicate that the billing address and delivery address are not the same. You can accomplish this by making the delivery address fields conditionally visible based on the Boolean attribute SameBillingAndDeliveryAddress.
Based on Attribute Value
When selected, this shows the widget while a particular attribute has a certain value. Only boolean and enumeration attributes can be used for this purpose.
Based on Expression
Added in Mendix 7.1.
When selected, this shows the widget while a provided expression evaluates to true. The object of the containing data view is available inside an expression as a $currentObject variable.
Note that the expression is evaluated in the browser, and hence, we advise against using “secret” values (like access keys) in it. In particular, we disallow usages of constants. Also, client-side expressions currently do not support all the functions that are available in the microflows. Please refer to an autocomplete list to know what functions are supported in your version.
Module Roles
The widget can be made visible to a subset of the user roles available in your application. When activated, this setting will render the widget invisible to all users that are not linked to one of the selected user roles.