JS Grid Control Widgets

Applies to: SharePoint Foundation 2010

The JS Grid control includes a component library of widgets. These widgets provide functionality such as a date picker or hyperlink picker.

JS Grid Control Widgets

• Date picker

• Hyperlink picker

Implementing Widgets

To add a date picker widget to a grid

1. Match the property type of the incoming column with the outgoing grid field. The date picker is added to the grid when you set the PropertyTypeID property to "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
   

   Notice that in this example the EditMode is set to ReadWrite and SerializeDataValue and SerializeLocalizedValue are set to true.

2. Add a date column with the type DateTime.

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

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

3. Define the data for the date column. This example creates random dates for the Start Date column.

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

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

   Click one of the date cells to select it. The cell is outlined, and a small icon appears next to it. If the cell is editable and you click the cell itself, the date is directly editable. If you click the symbol adjacent to the cell, the date picker is displayed.

To add a hyperlink picker to a grid

1. Match the property type of the incoming column with the outgoing grid field. The hyperlink picker is added to the grid when you set the PropertyTypeID property to "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. Add the hyperlink column to the grid.

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

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

3. Define the data for the hyperlink column. This example sets the display text to "Contoso" and the URL to 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"}
   

Click a hyperlink cell to select it. The cell is outlined, and a small icon appears adjacent to the cell. If you click the cell itself, the link is opened in another browser window. If you click the symbol to the left of the cell, it opens a dialog box where you can modify the display name and the URL.

See Also

Reference

Microsoft.SharePoint.JSGrid