Procédure : créer une grille modifiable

Article
09/24/2014

Dernière modification : jeudi 23 juin 2011

S’applique à : SharePoint Foundation 2010

Cette procédure montre comment activer la modification sur un Contrôle Grille JS de base. La procédure fait suite à Procédure : créer une grille JS de base et Procédure : créer un graphique croisé dynamique à l’aide de la grille JS.

Notes

Il est possible que votre ordinateur affiche des noms ou des emplacements différents pour certains éléments de l’interface utilisateur de Visual Studio dans les instructions suivantes. L’édition Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments.

Conditions requises

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
Outils de développement SharePoint dans Microsoft Visual Studio 2010
Réalisation de Procédure : créer une grille JS de base

Notes

Bien que vous puissiez effectuer cette procédure pas à pas sans utiliser Visual Studio 2010, il est plus facile de recourir à Visual Studio 2010 et aux Outils de développement SharePoint dans Microsoft Visual Studio 2010.

Création d’une grille modifiable

La création d’une grille modifiable implique plusieurs étapes :

basculement du comportement de lecture/écriture en ECMAScript (JavaScript, JScript) ;
activation du comportement de lecture/d’écriture sur les lignes, les champs ou les cellules ;
ajout de la vérification d’erreur de client ;
écriture d’un rappel pour gérer les modifications de l’utilisateur.

Cette procédure montre comment créer une grille modifiable et présente la vérification d’erreur de client fournie par le Contrôle Grille JS. L’écriture des modifications des utilisateurs n’entre pas dans le cadre de cette procédure.

Pour activer la modification avec bEditingEnabled

Ouvrez la solution JSGrid que vous avez créée dans la procédure précédente.
Ouvrez JSGridWebPartUserControl.ascx.

Dans le code JavaScript, juste avant l’initialisation de jsGridControl, ajoutez jsGridParams.tableViewParams.bEditingEnabled = true;.

Le code doit se présenter comme suit.

<script type="text/javascript">
    Type.registerNamespace("GridManager");
    GridManager = function () {
        this.Init = function (jsGridControl, initialData, props) {
            var dataSource = new SP.JsGrid.StaticDataSource(initialData);
            var jsGridParams = dataSource.InitJsGridParams();

            jsGridParams.tableViewParams.bEditingEnabled = true;

            jsGridControl.Init(jsGridParams);
        }
    };
</script>

Notez que bEditingEnabled est une bascule qui permet d’activer ou de désactiver la modification dans le code côté client. bEditingEnabled est définie sur false par défaut.

Activation du comportement de lecture/d’écriture sur les lignes, les champs ou les cellules

L’énumération EditMode du Contrôle Grille JS indique si les cellules d’un enregistrement ou d’un fichier doivent autoriser la modification. Les choix disponibles sont les suivants :

Defer Différer toujours le statut en lecture/écriture ; le contrôle ne contrôle pas son propre état.
ReadOnly Si appliqué à un enregistrement ou à un champ, aucune des cellules de cet enregistrement ou de ce champ n’est modifiable ; si appliqué à une ligne, vérifier le mode d’édition de chaque cellule
ReadOnlyDefer La cellule est accessible en lecture seule, sauf spécification contraire dans les paramètres sur le contrôle de ligne, de colonne ou de grille. Si appliqué à une ligne, vérifier le mode d’édition de chaque cellule.
ReadWrite La cellule est modifiable, sauf si des paramètres sur le contrôle de ligne, de colonne ou de grille indiquent le contraire.
ReadWriteDefer La cellule est modifiable, sauf si des paramètres sur le contrôle de ligne, de colonne ou de grille indiquent le contraire.

Pour rendre des champs spécifiques modifiables

Dans la solution JSGrid, ouvrez GridUtilities.cs.
Recherchez la classe FormatGridField.
Dans la classe formatGridField, affectez la valeur ReadOnlyDefer à la propriété EditMode pour tous les champs. Cette opération définit une valeur par défaut en lecture seule qui peut être substituée pour des champs, des lignes ou des cellules spécifiques.
```
// When in doubt, set the edit mode to read-only and defer to others.
gf.EditMode = EditMode.ReadOnlyDefer;
```
Plus loin dans la classe FormatGridField, affectez la valeur ReadWrite au mode d’édition de tous les champs de type Int32.
```
else if (dc.DataType == typeof(Int32))
    {
        gf.EditMode = EditMode.ReadWrite;
```
Exécutez le projet. Modifiez l’un des champs numériques.

Si vous entrez un caractère non numérique dans une cellule numérique, celle-ci est entourée d’une bordure rouge et une icône rouge apparaît dans l’en-tête de ligne. Le fait de cliquer sur la cellule entraîne l’affichage d’une icône qui décrit l’erreur. Ce comportement est fourni avec le Contrôle Grille JS.

Voir aussi

Concepts

Fonctionnalités du contrôle Grille JS

Partager via