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