0 out of 1 rated this helpful - Rate this topic

JS Grid Control Widgets

SharePoint 2010

Published: May 2010

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

  • Date picker

  • Hyperlink picker

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;
        }
    
    

    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)));
    
    
  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));
    
    

    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;
        }
    
    
  2. Add the hyperlink column to the grid.

    data.Columns.Add(new DataColumn("Hyperlink", typeof(Hyperlink)));
    
    
  3. Define the data for the hyperlink column. This example sets the display text to "Contoso" and the URL to http://www.contoso.com.

    dr["Hyperlink"] = new Hyperlink() { Display = "Contoso", Address = "http://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.

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.