<div id="Content1" data-tchmi-type="TcHmi.Controls.System.TcHmiContent" data-tchmi-top="0" data-tchmi-left="0" data-tchmi-width="100" data-tchmi-width-unit="%" data-tchmi-height="100" data-tchmi-height-unit="%" data-tchmi-height-mode="Value">

<script data-tchmi-target-attribute="data-tchmi-background-color" type="application/json">
{
  "color": "rgba(204, 83, 83, 1)"
}
</script>
<div id="TcHmiDatagrid" data-tchmi-type="TcHmi.Controls.Beckhoff.TcHmiDatagrid" data-tchmi-height="200" data-tchmi-height-unit="px" data-tchmi-left="0" data-tchmi-left-unit="px" data-tchmi-top="0" data-tchmi-top-unit="px" data-tchmi-width="370" data-tchmi-width-unit="px">
<script data-tchmi-target-attribute="data-tchmi-src-column" type="application/json">
[
  {
    "name": "Test1",
    "label": "Column 1",
    "control": "TextBlock",
    "width": 70,
    "widthUnit": "px",
    "resize": true,
    "minWidth": 100,
    "minWidthUnit": "px",
    "editable": false,
    "horizontalAlignment": "Center",
    "verticalAlignment": "Center",
    "cellBackground": null,
    "textColor": null
  },
  {
    "name": "Test2",
    "label": "Column 2",
    "control": "TextBlock",
    "width": 70,
    "widthUnit": "px",
    "resize": true,
    "minWidth": 70,
    "minWidthUnit": "px",
    "editable": false,
    "sortable": true,
    "horizontalAlignment": "Center",
    "verticalAlignment": "Center",
    "cellBackground": null,
    "textColor": null
  },
  {
    "name": "Test3",
    "label": "Column 3",
    "control": "CheckBox",
    "width": 70,
    "widthUnit": "px",
    "resize": true,
    "minWidth": 70,
    "minWidthUnit": "px",
    "editable": true,
    "horizontalAlignment": "Center",
    "verticalAlignment": "Center",
    "cellBackground": null,
    "textColor": null
  },
  {
    "name": "Test4",
    "label": "Column 4",
    "control": "TextBox",
    "width": 100,
    "widthUnit": "px",
    "resize": true,
    "minWidth": 70,
    "minWidthUnit": "px",
    "editable": true,
    "horizontalAlignment": "Center",
    "verticalAlignment": "Center",
    "cellBackground": null,
    "textColor": null
  }
]
</script>
<script data-tchmi-target-attribute="data-tchmi-src-data" type="application/json">
[
  {
    "Test1": "Example Data",
    "Test2": 42,
    "Test3": true,
    "Test4": "Editable Data"
  },
  {
    "Test1": "Example Data",
    "Test2": 3.1415,
    "Test3": false,
    "Test4": "Editable Data"
  }
]
</script>
<script data-tchmi-target-attribute="data-tchmi-cell-content-padding" type="application/json">
{
  "left": 3,
  "leftUnit": "px",
  "right": 3,
  "rightUnit": "px",
  "top": 0,
  "topUnit": "px",
  "bottom": 0,
  "bottomUnit": "px"
}
</script>

</div>
</div>