Widget Grille
Le widget Grille vous permet d'afficher n'importe quel ensemble de données dans une vue de grille. Pour représenter les données, plusieurs solutions sont possibles, notamment l'application d'un contexte de couleur par colonne et le rendu d'images dans une cellule. Vous pouvez configurer les rendus de base, y compris l'ordre des colonnes, les colonnes à afficher, les en-têtes de colonne et le formatage d'état par l'intermédiaire de la boîte de dialogue de configuration du widget Grille, en utilisant la sélection Configure Grid Columns.
Vous pouvez redimensionner les colonnes de la grille dans l'environnement d'exécution mais aussi trier les données en cliquant sur l'en-tête d'une colonne.
Grille modifiable
Un paramètre spécial applicable au widget et accessible dans l'option Configure Grid Columns permet de modifier les lignes/colonnes de la grille. Vous pouvez ainsi modifier les valeurs d'une grille, puis transférer l'intégralité du contenu dans un service. De même, si vous affichez Selected Row dans votre grille, cette ligne spécifique peut être transférée. La taille de votre table pouvant impacter l'utilisation de la mémoire, il est conseillé d'utiliser Selected Row.
Visionnez le tutoriel vidéo suivant pour plus d'informations :
 | Les styles du widget et les propriétés communes aux widgets ne sont pas inclus dans la table ci-dessous. |
Nom de la propriété | Description | Type de base | Valeur par défaut | Liaison possible ? (O/N) | Localisable ? (O/N) | ||
|---|---|---|---|---|---|---|---|
CustomClass | Classe CSS définie par l'utilisateur à appliquer à la div supérieure du widget. Plusieurs classes peuvent être spécifiées, séparées par une espace. | STRING | n/a | O | N | ||
RowFormat | Les règles facultatives pour appliquer le formatage (d'état) dynamique par ligne peuvent être remplacées par le formatage d'état par cellule. | STATE FORMATTING | Formatage de l'état. | N | N | ||
MultiSelect | Permet la sélection de plusieurs éléments. | BOOLEAN | Faux | N | N | ||
IsEditable | Autorise ou non la modification des valeurs de la grille. | BOOLEAN | Faux | N | N | ||
AutoSelectFirstRow | La première ligne est automatiquement sélectionnée lors du chargement initial des données. | BOOLEAN | Faux | N | N | ||
CellTextWrapping | Permet le renvoi à la ligne des valeurs des cellules. | BOOLEAN | Faux | N | N | ||
Données | Table d'informations utilisée comme source de données pour cette propriété. | INFOTABLE | n/a | O | N | ||
CurrentScrollTop | Défilement vers le haut initial. | NUMBER | 0 | O | N | ||
ScrollTop | Défilement vers le haut pour affecter. | NUMBER | 0 | O | N | ||
EditedTable | Table modifiée à l'aide de la grille. | INFOTABLE | n/a | O | N | ||
RowHeight | Hauteur des lignes. | NUMBER | 30 | N | N | ||
ShowAllColumns | Affiche toutes les colonnes disponibles. Vous devez utiliser ShowAllColumns si votre table d'informations ne dispose d'aucune forme de données.
| BOOLEAN | Faux | N | N | ||
ShowDataLoading | Montre le chargement des données. | BOOLEAN | Vrai | N | N | ||
DoubleClicked | Evénement. Permet de sélectionner l'objet de données avec un seul clic, mais permet toujours d'utiliser le double clic pour un autre événement, par exemple pour ouvrir un lien de navigation. | n/a | n/a | O | N | ||
Visible | Détermine la visibilité du widget à l'exécution. | BOOLEAN | Vrai | O | N |
Configuration d'une grille
Après avoir lié un service de données à la grille, ouvrez la boîte de dialogue Grid Column Configuration. Vous pouvez choisir les colonnes à afficher en cochant ou en décochant les cases en regard de chaque colonne (vrai = afficher, faux = masquer). Réorganisez les colonnes affichées en les faisant glisser vers le haut ou le bas dans la liste.
Le titre des colonnes est automatiquement affecté par la forme de données du service de données. Vous pouvez cependant renommer chacune des colonnes depuis la boîte de dialogue de configuration correspondante. Pour chaque colonne, vous pouvez également effectuer les actions suivantes :
• Choisir le programme de rendu de la cellule (utilisé pour le traitement de types de données spécifiques dans les données à afficher ; recommandé)
• Définir une largeur automatique ou une largeur fixe
• Définir l'alignement du texte
• Définir la stylisation (Fixe ou Formatage de l'état)
• Désigner une colonne comme modifiable (avec ou sans validation)
Si vous souhaitez appliquer un style fixe (non dynamique), sélectionnez Style fixe, puis choisissez une définition de style précédemment définie. Pour appliquer un formatage dynamique (contexte de couleurs ou autre, en fonction des données renvoyées dans une ligne), choisissez Formatage basé sur l'état.
Avec le formatage basé sur l'état, vous configurez individuellement chaque colonne de données, en appliquant un style spécifique à la colonne en fonction des données contenues dans la ligne. Pour chaque colonne pour laquelle vous souhaitez définir un formateur d'état, vous devez effectuer les opérations suivantes :
• Sélectionnez la colonne dont dépendra le formatage. Il peut s'agir de n'importe quelle colonne (masquée ou non) dans le service de données renvoyé.
• Sélectionnez la définition d'état que vous souhaitez utiliser (une par colonne et elle doit correspondre au type de données du champ dépendant).
• Acceptez les valeurs par défaut pour la définition d'état ou remplacez-les spécifiquement pour la définition et le rendu de cette grille.
Lorsque la grille est modifiable, vous pouvez également rendre modifiables des colonnes spécifiques. Vous avez également la possibilité d'ajouter une validation basée sur les noms des colonnes à l'aide de comparaisons JavaScript.
Exemple :
Validation - Column1 > 5 && Column3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10