Partager via

Widgets du contrôle de grille JS

  • Article

Dernière modification : vendredi 30 avril 2010

S’applique à : SharePoint Foundation 2010

Le Contrôle Grille JS comprend une bibliothèque de composants de widgets. Ces widgets fournissent des fonctionnalités telles qu’un sélecteur de dates ou un sélecteur de liens hypertexte.

Widgets du contrôle de grille JS

  • Sélecteur de dates

  • Sélecteur de liens hypertexte

Implémentation des widgets

Pour ajouter un widget de sélecteur de dates à une grille

  1. Établissez une correspondance entre le type de propriété de la colonne entrante et le champ de grille sortante. Le sélecteur de dates est ajouté à la grille lorsque vous définissez la propriété PropertyTypeID sur « JSDateTime ».

    else if (dc.DataType == typeof(DateTime))
    {
        gf.PropertyTypeId = "JSDateTime";
        gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
        {
            return toConvert == null ? "" : toConvert.ToString();
        };
        gf.EditMode = EditMode.ReadWrite;
        gf.SerializeDataValue = true;
        gf.SerializeLocalizedValue = true;
    }

    ElseIf dc.DataType Is GetType(DateTime) Then
    gf.PropertyTypeId = "JSDateTime"
    gf.Localizer = CType(Function(row As DataRow, toConvert As Object) As String
    Return If(toConvert Is Nothing, Nothing, toConvert.ToString) 
    End Function, ValueLocalizer)
    gf.EditMode = EditMode.ReadWrite
    gf.SerializeDataValue = True
    gf.SerializeLocalizedValue = True

    Dans cet exemple, notez que le paramètre EditMode est défini sur ReadWrite et que les paramètres SerializeDataValue et SerializeLocalizedValue sont définis sur true.

  2. Ajoutez une colonne de date ayant le type DateTime.

    data.Columns.Add(new DataColumn("Start Date", typeof(DateTime)));

    data.Columns.Add(New DataColumn("Start Date", GetType(Datetime)))

  3. Définissez les données de la colonne de date. Cet exemple crée des dates aléatoires pour la colonne Start Date.

    dr["Start Date"] = DateTime.Now.AddSeconds(rand.Next(60 * 60 * 24 * 20));

    dr("Start Date") = DateTime.Now.AddSeconds(rand.Next(60 * 60 * 24 * 20))

    Cliquez sur l’une des cellules de date pour la sélectionner. La cellule est entourée d’une bordure et une petite icône apparaît près de la cellule. Si la cellule est modifiable et que vous cliquez sur la cellule proprement dite, vous pouvez modifier la date directement. Si vous cliquez sur le symbole adjacent à la cellule, le sélecteur de dates apparaît.

Pour ajouter un sélecteur de liens hypertexte à une grille

  1. Établissez une correspondance entre le type de propriété de la colonne entrante et le champ de grille sortante. Le sélecteur de liens hypertexte est ajouté à la grille lorsque vous définissez la propriété PropertyTypeID sur « Hyperlink ».

    else if (dc.DataType == typeof(Hyperlink))
    {
        gf.PropertyTypeId = "Hyperlink";
        gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
        {
            return toConvert == null ? "" : toConvert.ToString();
        };
        gf.SerializeLocalizedValue = false;
        gf.SerializeDataValue = true;
    }

    ElseIf dc.DataType Is GetType(Hyperlink) Then
    gf.PropertyTypeId = "Hyperlink"
    gf.Localizer = CType(Function(row As DataRow, toConvert As Object) As String
    Return If(toConvert Is Nothing, Nothing, toConvert.ToString) 
    End Function, ValueLocalizer)
    gf.SerializeLocalizedValue = False
    gf.SerializeDataValue = True

  2. Ajoutez la colonne de lien hypertexte à la grille.

    data.Columns.Add(new DataColumn("Hyperlink", typeof(Hyperlink)));

    data.Columns.Add(New DataColumn("Hyperlink", GetType(Hyperlink)))

  3. Définissez les données de la colonne de lien hypertexte. Cet exemple définit le texte affiché sur « Contoso » et l’URL sur https://www.contoso.com.

    dr["Hyperlink"] = new Hyperlink() { Display = "Contoso", Address = "https://www.contoso.com" };

    dr("Hyperlink") = New Hyperlink() With {.Display = "Contoso", .Address = "https://www.contoso.com"}

Cliquez sur une cellule de lien hypertexte pour la sélectionner. La cellule est entourée d’une bordure et une petite icône apparaît près de la cellule. Si vous cliquez sur la cellule proprement dite, le lien est ouvert dans une autre fenêtre de navigateur. Si vous cliquez sur le symbole à gauche de la cellule, une boîte de dialogue s’ouvre, dans laquelle vous pouvez modifier le nom d’affichage et l’URL.

Voir aussi

Référence

Microsoft.SharePoint.JSGrid