JS グリッド コントロール ウィジェット

  • [アーティクル]

最終更新日: 2010年4月30日

適用対象: SharePoint Foundation 2010

JS グリッド コントロールには、ウィジェットのコンポーネント ライブラリが含まれています。これらのウィジェットには、日付の選択、ハイパーリンクの選択などの機能が用意されています。

JS グリッド コントロール ウィジェット

  • 日付の選択

  • ハイパーリンクの選択

ウィジェットを実装する

日付の選択ウィジェットをグリッドに追加するには

  1. 受信列のプロパティの種類を送信グリッド フィールドと一致させます。PropertyTypeID プロパティを "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

    この例の EditMode が ReadWrite および SerializeDataValue に設定され、SerializeLocalizedValue が true に設定されていることに注意してください。

  2. DateTime 型の日付列を追加します。

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

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

  3. 日付列のデータを定義します。この例では、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))

    日付セルのいずれかをクリックして選択すると、セルがアウトライン化され、小さなアイコンがその横に表示されます。セルが編集可能な場合は、そのセルをクリックすると、日付を直接編集できます。セルの横にあるシンボルをクリックすると、日付の選択が表示されます。

ハイパーリンクの選択をグリッドに追加するには

  1. 受信列のプロパティの種類を送信グリッド フィールドと一致させます。PropertyTypeID プロパティを "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. ハイパーリンク列をグリッドに追加します。

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

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

  3. ハイパーリンク列のデータを定義します。この例では、表示テキストを "Contoso" に、URL を 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"}

ハイパーリンク セルをクリックして選択すると、セルがアウトライン化され、小さなアイコンがその横に表示されます。そのセルをクリックすると、リンク先の画面が新しいブラウザー ウィンドウで開きます。セルの左側にあるシンボルをクリックすると、表示名と URL を変更できるダイアログ ボックスが表示されます。

関連項目

参照

Microsoft.SharePoint.JSGrid