Utilisation des widgets > 2D > Grille de données
  
Grille de données
A quoi sert ce widget ?
Le widget Grille de données vous permet de sélectionner des colonnes pour afficher des données dans une grille.
* 
Les données doivent être liées à la grille de données.
Quand faut-il utiliser ce widget ?
Utilisez une grille de données lorsque vous souhaitez afficher vos données dans une grille.
Comporte-t-il des propriétés, services, événements ou actions spéciaux ?
Pour afficher la liste des propriétés, services et événements communs des widgets, consultez la rubrique Propriétés, services et événements communs à plusieurs widgets.
Les tableaux suivants présentent les propriétés, les services et les événements spécifiques à ce widget.
Propriété
JavaScript
Type
Description
Données
data
string
Lorsque la propriété Données est liée à un résultat de service, vous pouvez sélectionner les colonnes à afficher dans le widget Grille de données.
Activer mise en forme basée sur l'état
enableStateFormatting
boolean
Permet de mettre en forme le widget en fonction des définitions d'état qui ont été définies dans ThingWorx.
Si la case à cocher est sélectionnée, les propriétés suivantes s'affichent :
• Champ dépendant
• Définition d'état
Par exemple, si la définition d'état d'une étiquette a la valeur error, l'étiquette devient rouge.
Pour plus d'informations sur les définitions des styles et des états dans ThingWorx, consultez la rubrique Définitions des styles et des états dans le Centre d'aide ThingWorx.
Classe d'en-tête
headerClass
string
Classe CSS attribuée à l'en-tête du widget.
Alignement horizontal
(Propriété de colonne)
Définit l'alignement horizontal d'une colonne.
• Gauche
• Centre
• Droite
Alignement vertical
(Propriété de colonne)
Définit l'alignement vertical d'une colonne.
• Haut
• Milieu
• Bas
Fonctionnement du widget
Voici un exemple de ce à quoi peut ressembler votre widget !
Etapes minimales requise pour l'utilisation
Apparence
1. Faites glisser et déposez un widget Disposition de grille sur le canevas.
2. Dans le volet Données, ajoutez un service à partir de l'entité que vous souhaitez utiliser pour récupérer les données.
3. Une fois le service ajouté, faites glisser et déposez Tous les éléments sur le widget, et sélectionnez Données dans la fenêtre Sélectionner une cible de liaison.
4. Dans le volet DETAILS, sous Données, sélectionnez les colonnes que vous souhaitez afficher.
Styliser le widget avec CSS
Vous pouvez utiliser CSS pour styliser le widget ! Exemple :
* 
Rappelez-vous qu'il est préférable de donner à vos classes des noms uniques afin qu'ils ne soient pas en conflit avec d'autres classes ou propriétés prédéfinies.
Exemple de CSS
Apparence
.ptc-DataGrid th {
background-color: yellow;
font-size: 22px;
opacity: 1;
font-family: Century Gothic;
}
.ptc-DataGrid tr {
background-color: #00acc8;
border: none;
font-family: Century Gothic;
}
.ptc-DataGrid .item-row:hover {
background-color: #fff;
}
.ptc-DataGrid .item-row.selected {
background-color: #fff;
}
Pour plus d'informations, consultez la rubrique Styles d'application.