Montage en grille

Réglé AllowEdit="true" sur MainGrid / SubGrid et un bouton de bascule étiqueté Éditable apparaît dans le menu d’engrenages en surplus. L’activer permet de changer chaque colonne déclarée dont le moteur de rendu de la cellule n’est pas remplacé dans un éditeur en ligne — qui est automatiquement envoyé depuis les métadonnées Dataverse de la colonne — tandis qu’un GridTemplateColumn's EditChildContent prend le relais de son mode ChildContentlecture. Les modifications s’accumulent en tant que changements de lignes en attente dans le tampon transactionnel de la grille et ne tombent dans Dataverse que lorsque l’utilisateur sauvegarde.

Démo live

Un MainGrid par-dessus la contact table avec AllowEdit="true". Cliquez sur l’icône d’engrenage dans le débordement de la barre d’outils et activez Modifiable . La colonne Nom complet remplace son modèle initials-avatar read par un éditeur personnalisé à champ unique qui divise les entrées utilisateur en firstname + lastname. Les colonnes nues Email, Téléphone, Âge et Compte s’allument toutes avec l’éditeur correspondant à leur type de métadonnées — TextEdit pour les chaînes, NumberEdit pour l’entier, LookupEdit pour la référence client — sans aucun câblage par colonne.

Exemple de réaction
Exemple de Blazor
Tout le monde peut consulter les contacts dans la grille ci-dessous. Connectez-vous pour créer, consulter et mettre à jour vos propres contacts.
Sauvegarder Rafraîchissement

Taille de la page

102050100
Editable
Nom complet
Email
Téléphone
Âge
Compte
React TypeScript
Razor

Activation du montage

Réglé AllowEdit="true" sur la grille. Le montage se fait par option par grille — le basculement n’apparaît que lorsque le paramètre est défini, et le basculement lui-même n’est visible que lorsqu’au moins une colonne est modifiable. Lorsque le bouton est désactivé, la grille se comporte comme une vue en lecture seule ; Pendant qu’il est activé, les cellules affichent leurs éditeurs en ligne et les modifications non enregistrées sont suivi par ligne.

React
Blazor

Pourquoi un basculement ?

L’édition en ligne modifie le rendu des cellules pour chaque ligne visible, ce qui a une capacité de lecture différente d’une grille statique. Le toggle permet aux utilisateurs d’opter pour la possibilité d’édition quand ils en ont besoin (taper une valeur, faire glisser des onglets entre les cellules, etc.) et de conserver la possibilité de lecture nettoyante le reste du temps. La grille se souvient de l’état de bascule pour la session.

Répartition automatique de l’éditeur

<GridColumn ColumnName="..." /> Les déclarations sans ChildContent auto-dispatch font passer l’éditeur en ligne droit pendant que la grille est en mode édition. Le framework lit les métadonnées de la colonne et choisit la sous-classe éditeur :

  • String, Memo, EmailAddress, Phone, UrlTextEdit (avec validation adaptée au format).
  • Integer, Decimal, Double, BigIntNumberEdit (analyse adaptée à la localisation, min/max à partir des métadonnées).
  • BooleanBoolEdit (rendu comme un interrupteur, alignement centré).
  • PicklistChoiceEdit (menu déroulant piloté par l’ensemble d’options, labels localisés).
  • MultiSelectPicklistMultiSelectChoiceEdit.
  • Lookup, Customer, OwnerLookupEdit (typeahead, respecte les listes de permis dans la table cible).
  • DateTime, DateOnlyDateTimeEdit.
  • MoneyMoneyEdit (préfixe symbole monétaire de ).transactioncurrencyid
  • File, Image — / FileEdit ImageEdit (téléchargement glisser-déposé).

Outrepasser l’éditeur par défaut

Fournit ChildContent sur a GridColumn pour prendre en charge à la fois l’affichage en mode lecture ET l’éditeur en mode édition pour cette colonne. Une fois ChildContent configuré, le framework cesse de déployer automatiquement l’éditeur piloté par les métadonnées — affichez l’éditeur que vous souhaitez dans le modèle et bloquez sa visibilité hors du drapeau de Editable la grille. Les éditeurs standards (TextEdit, NumberEdit, ColumnEdit) s’installent automatiquement dans le modèle pour le suivi sale et la validation via le contexte de ligne en cascade.

React
Blazor

Validation

Chaque ligne conserve son propre EditContextValidator. Les éditeurs standards enregistrent avec elle sur montage et affichent leurs erreurs en ligne (sous-ligne rouge + infobulle sur la cellule). Le bouton d’enregistrement de la grille est désactivé tandis que toute ligne présente une erreur de validation non résolue. Les règles de validation proviennent des métadonnées de la colonne :

  • RequiredLevel — la colonne est requise, et une valeur vide bloque sauvegarde.
  • Format sur les colonnes de chaîne — les formats email, téléphone, URL imposent une forme au-dessus du type.
  • MinValue / MaxValue sur les colonnes numériques — les valeurs hors plage sont signalées avant la sauvegarde.
  • Validation personnalisée — enregistrer des règles supplémentaires par formulaire via l’API EditContextValidator pour les invariants inter-champs (par exemple « le contact doit avoir soit un e-mail soit un téléphone »).

Validation sur des widgets personnalisés

Les entrées personnalisées rendues à l’intérieur ChildContent / EditChildContent qui ne s’étendent BaseEdit pas (par exemple un widget brut FluentTextField ou tiers) ne s’enregistrent pas automatiquement avec le validateur de la ligne. Si vous avez besoin qu’ils soient validés, soit vous pouvez supprimer un éditeur standard à la place du widget brut, soit exécuter la validation manuellement dans le rappel du ValueChanged widget avant d’appeler editCtx.SetValue.

Sauvegarder et annuler

Les modifications s’accumulent en tant que mises à jour en attente sur la ligne — les cellules modifiées reçoivent un petit indicateur « sale », les lignes supprimées sont barrées, et les lignes en attente de création apparaissent comme nouvelles. La barre d’outils de la grille affiche les boutons Enregistrer et Annuler chaque fois qu’il y a des modifications en attente : Sauvegarder envoie le batch en un seul passage transactionnel ; Annuler défausse le tampon et ramène chaque ligne à son état serveur. Associez-le avec NewRecordGridButton et DeleteRecordGridButton dans le Buttons fragment pour ajouter la création et la suppression de lignes à la même transaction d’édition.

React
Blazor

Édition de modèles de colonne

Associez le mode ChildContent lecture de a GridTemplateColumnà un EditChildContent pour rendre une colonne synthétique / composite modifiable. Le modèle d’édition reçoit un GridTemplateColumnEditContext — même contexte de ligne que le modèle de lecture (editCtx.Row.PrimaryRecord, l’optionnel editCtx.Row.ParentRecord dans une sous-grille, editCtx.DependsOnMetadata) plus un assistant impératifeditCtx.SetValue(columnName, value).

EditChildContent ne se déclenche que lorsque la grille est modifiable (AllowEdit="true" ET que le bouton Modification est activé) et que la ligne n’est pas en attente-suppression. Les colonnes modèles qui omettent EditChildContent restent en lecture seule même en mode édition — utiles pour les colonnes d’actions qui devraient toujours afficher les mêmes boutons.

Motif 1 — Éditeurs standards à intégrer directement

Le cas le plus courant : la cellule est composée de plusieurs colonnes liées, et vous voulez laisser l’utilisateur modifier chacune d’elles. Ajoutez les éditeurs correspondants <TextEdit> / <ColumnEdit> <NumberEdit> / à l’intérieur EditChildContent — le framework cascade l’enregistrement principal et la correspondance EditContextValidator de la ligne dans cette catégorie, afin que les éditeurs s’auto-enregistrent pour le dirty tracking et la validation. Aucun câblage supplémentaire n’est nécessaire.

React
Blazor

Motif 2 — Widget personnalisé avec SetValue

Lorsque la surface de l’éditeur ne correspond pas en 1:1 à une colonne Dataverse — une seule boîte de texte « Premier dernier » qui se divise en deux colonnes, un curseur lié à plusieurs champs de pourcentage, un sélecteur personnalisé par plage de dates écrivant début + fin — affichez votre propre entrée et appelez editCtx.SetValue(columnName, value) chaque colonne affectée. Le framework redirige l’écriture vers la bonne AliasedTableRecord et lance ValueChanged , donc le dirty-tracking récupère le changement.

React
Blazor

Validation sur le chemin impératif

Les éditeurs standards s’enregistraient EditChildContent automatiquement avec les EditContextValidator lignes et participaient à la porte de validation avant la sauvegarde du framework. Le editCtx.SetValue chemin contourne ce pipeline — les valeurs qui ne proviennent pas d’un éditeur enregistré ne sont pas validées. Si votre widget personnalisé doit imposer des contraintes, exécutez-les dans le ValueChanged rappel avant d’appeler SetValue, ou revenez au modèle d’éditeur en drop-in.