Widget DataGrid

À l’exécution, le widget DataGrid affiche les données sous forme de tableau à l’intérieur d’une fenêtre d’InTouch. Les données affichées dans le widget peuvent être filtrées par l’utilisateur.

Bien que le widget utilise les mêmes propriétés dans InTouch HMI et AVEVA OMI, le chargement des données et la sélection des lignes se comportent différemment pendant l’exécution dans InTouch.

Le widget inclut également un ensemble de propriétés visuelles permettant de personnaliser l’apparence du widget et de ses données affichées sous forme de tableau.

Formats de données pris en charge

Le widget DataGrid prend en charge les formats de données JSON et CSV. Les données sont fournies au widget sous forme de chaîne via la propriété DataSource ou de manière dynamique pendant l’exécution.

Exemple JSON

[

  {

    "Equipment Name": "Feed Pump P-101",

    "Equipment ID": "P-101",

    "Equipment Type": "Centrifugal Pump",

    "Area": "Tank Farm",

    "Status": "Running",

    "Last Maintenance Date": "2025-11-14",

    "Location City": "Houston",

    "State": "TX",

    "Zip": "77002"

  },

  {

    "Equipment Name": "Boiler B-201",

    "Equipment ID": "B-201",

    "Equipment Type": "Steam Boiler",

    "Area": "Utilities",

    "Status": "Online",

    "Last Maintenance Date": "2025-09-30",

    "Location City": "Baton Rouge",

    "State": "LA",

    "Zip": "70801"

  }

]

Exemple CSV

Nom de l’équipement,ID de l’équipement,Type d’équipement,Zone,État,Date de la dernière maintenance,Emplacement Ville,État,Pompe d’alimentation zippée P-101,P-101,Pompe centrifuge,Parc-réservoir,En marche,2025-11-14,Houston,TX,77002 Chaudière B-201,B-201,Chaudière à vapeur,Utilitaires,En ligne,2025-09-30,Baton Rouge,LA,70801

Filtrage des données à l’exécution

Chaque colonne de données affichée dans la grille peut être filtrée. Le widget DataGrid affiche uniquement les données de la ligne dont l’élément de colonne correspond aux critères de filtre lorsque le filtre est appliqué.

L’exemple suivant montre les données sous forme de tableau avant et après l’application d’un filtre à la colonne Semaine pour filtrer les données afin de n’afficher que le jeudi.

Sélectionnez l’icône de filtre dans l’en-tête de chaque colonne pour afficher un menu déroulant permettant de spécifier les critères de filtre.

Propriétés

Le tableau suivant répertorie les propriétés du widget DataGrid. Toutes les propriétés sont exposées sous forme de propriétés dynamiques à l’exécution, ce qui permet de les lier à une référence à un espace de nom ViewApp en tant que :

• Attribut

• Attribut d’objet

• Attribut MyContent

• Expression composée

  Propriétés du widget DataGrid	Descriptions
  Type	Obtient ou définit le format des chaînes de données source. csv json
  AllowExport	Permet l’exportation des données vers un fichier. La valeur par défaut est Vrai.
  Datasource	Obtient ou définit la chaîne de données JSON ou CSV affichée par le widget DataGrid.
  ColumnDelimiter	Obtient ou définit le délimiteur utilisé pour séparer les valeurs de champ dans la ligne sélectionnée. Virgule pour les chaînes csv Barre verticale (|) pour les chaînes json
  SelectedRow	Obtient ou définit la chaîne des valeurs de champ dans la ligne sélectionnée.
  DateFieldFormat	Obtient ou définit le format d’une date. Prend en charge toutes les chaînes de format de date.
  BackgroundColor	Couleur d’arrière-plan du widget.
  ExportFileName	Si AllowExport = Vrai, spécifie le nom du fichier exporté.
  FilterMode	Obtient ou définit le mode de filtre de la grille ; soit par défaut, soit par liste de contrôle.
  Couleur de premier plan	Obtient ou définit la couleur de texte du widget.
  HeaderBackColor	Couleur d’arrière-plan de l’en-tête de tableau indiquant les noms des colonnes.
  HeaderForeColor	Couleur du texte des noms des colonnes d’en-tête.
  SelectionBackColor	Couleur d’arrière-plan d’une ligne sélectionnée dans la grille.
  SelectionForeColor	Couleur du texte de la ligne sélectionnée dans la grille.
  RowHoverBackColor	Couleur d’arrière-plan de la ligne de la grille où se trouve le curseur.
  RowHoverForeColor	Couleur du texte de la ligne de la grille où se trouve le curseur.
  Font Family	Nom de la famille de polices utilisée par le widget pour afficher du texte.
  FontSize	Obtient ou définit la taille de la police, en pixels, du texte affiché dans le widget DataGrid.
  PageSize	Obtient ou définit le nombre d’enregistrements à afficher simultanément.

  Remarque :
  Lorsque les données sont chargées dynamiquement à l’exécution, la sélection d’une ligne dans le widget DataGrid peut entraîner la réinitialisation de la grille avec ses données de conception.
  La propriété DateFieldFormat est requise, mais le système ne la valide pas pendant l’exécution.