Listing Recipes on a data grid
![Listing Recipes on a data grid 1:](Images/png/13187532427__Web.png)
- 1. Create an instance of a TcHmiDataGrid control.
- 2. Set the below JSON object as its Columns attribute.
[
{
"name": "RecipeName",
"label": "%l%Recipe%/l%",
"control": "TextBlock",
"width": 50,
"widthUnit": "%",
"resize": false,
"sortable": true,
"minWidth": 100,
"minWidthUnit": "px",
"cellBackground": null,
"textColor": null,
"editable": false,
"horizontalAlignment": "Center",
"verticalAlignment": "Center",
"headerHorizontalAlignment": "Center",
"headerVerticalAlignment": "Center"
},
{
"name": "RecipeLastUpdatedTime",
"label": "Last Updated",
"control": "TextBlock",
"width": 50,
"widthUnit": "%",
"resize": false,
"sortable": true,
"minWidth": 100,
"minWidthUnit": "px",
"cellBackground": null,
"textColor": null,
"editable": false,
"horizontalAlignment": "Center",
"verticalAlignment": "Center",
"headerHorizontalAlignment": "Center",
"headerVerticalAlignment": "Center",
"format": {
"objectType": "Function",
"active": true,
"fn": "TcHmi.Functions.Beckhoff.ToDateTimeString",
"fnParams": [
{
"objectType": "StaticValue",
"valueType": "tchmi:general#/definitions/Locale",
"value": null
}
]
}
}
]
- 3. Set the function binding as below as its
SrcData
attribute.
"%f%TcHmi.Functions.Plastic.ListActDataTypeRecipes(%s%TcHmiRecipeManagement.Config::recipeList%/s%)%/f%"