The JS Grid control (aka SPGridView and inherits from the ASP.NET GridView) is new in SharePoint 2010. It allows Excel-like editing and rendering of tabular data, and replaces the ActiveX-based datasheet of Windows SharePoint Services 3.0 with a richer, more extensible UI. It also supports the Access Services grid and offers a Gantt chart view, familiar to users of Microsoft Project. The SPGridView control automatically supports the SharePoint style sheets, and you don’t need to worry about the look and feel of your grid. Developers can create a control that behaves more like one in a desktop application.
Hosts one or two panes, the grid pane is the pane that renders tabular data, the Gantt pane is the surface on which charts are rendered. The client-side rendering provides the user more immediate feedback because a round trip to the server is not required.
The following features are supported
- Copy, paste, undo, redo, fill-down, and export-to-Excel operations
- Asynchronous validation
- Control/widget display and edit capabilities
- Multiple views, in the form of grid, Gantt, and pivot charts
Errors from the server need to be displayed to the user so that the user can correct them. Because dynamic grid implementations use asynchronous updates, the reporting of errors can be complicated. For instance, the user can make a change that is invalid and scroll that change out of view before the server returns an error. Or the user can make several invalid changes (through fill-down or copy/paste operations) that each need separate attention. In the JS Grid control errors are highlighted with red exclamation mark icons. The error message is displayed if the user clicks the icon. The JS Grid control supports data validation by using a widget framework and infrastructure. Widgets can be complex controls that can be built by developers with their own icons and click actions. Some built-in widgets include Date picker, People picker and Edit control.
When working with the JS Grid control, the precedence of edit mode is important to understand. The default order of precedence is cell, row, column, and then the grid itself. That means the user can type directly in a grid cell if the edit mode of the cell permits. The EditMode enumeration specifies whether the cells contained in a grid should allow editing.
The enumeration values are as follows:
To use the JS Grid control in your custom pages or controls, you must write a new controller. The controller tells the grid how to render content (i.e., which panes or columns to display). The controller enables the data source and controller to understand how to handle unrelated rows, allowing edits to occur without having all the data.
Just follow these steps for read only data:
Embed the grid control either by adding a <SharePoint:JSGrid> tag to your application page or user control, or by creating a new instance programmatically.
Implement server-side code to feed the GridSerializer with the necessary data (data table, data columns, data fields).
Set grid properties, such as JSControllerClassName, and bind the GridSerializer to the grid.
Building application Summary
Add a Register directive to your application page.
Add an SPGridView tag to your application page.
Define bound fields for your grid.
Retrieve data and bind it to the DataSource property of the SPGridView.
Automatic generation of columns is not supported. You always have to set the property AutoGenerateColumns to false and explicitly bind your columns using SPBoundField.
Using the DataTable Class
The SharePoint SPListItemCollection object can return DataTable instances. The complete code-behind implementation can now be done in only two lines and without the need for a separate object model and its conversion methods:
protected void Page_Load(object sender, EventArgs e)
myGrid.DataSource = SPContext.Current.Web.Lists["CompanyName"].GetItems(
Adding Custom Menus
SharePoint offers an enhanced method to expose several actions on single items within the SPGridView: the SPMenuField. You construct such a menu by adding a menu definition (consisting of MenuTemplate and MenuItemTemplate) and using an SPMenuField within the SPGridView that references a menu definition. If you need to add different menu items to your list items (e.g., for different content types), you can change the bound fields programmatically for every row, by using the event onRowDataBound. With this event you get access to the current row instance, and you are able to modify the controls bound to this row. By casting, for example, a menu control with (Microsoft.SharePoint.WebControls.Menu) e.Row.Cells[n].Controls[n], you get access to the menu properties, such as HiddenMenuItems, where you can hide menu items that should
not be displayed for this row.
A modern grid view in SharePoint needs to be able to sort and filter the columns. Fortunately, this nontrivial functionality is built in, so it’s very easy to implement. The sorting itself has to be implemented programmatically in the method myGrid_Sorting.
There are three steps to enable sorting:
1. Set the SPGridView property AllowSorting to true.
2. Implement the SPGridView event OnSorting.
3. Add a SortExpression to every bound column.
<SharePoint:ScriptLink runat=”server” Name=”sp.js” Localizable=”false” LoadAfterUI=”true” />
JS Grid Control SharePoint Screen shot:
Figure 2 shows the results of the JSGridProject Web Part sample in the Project 2010 SDK download that implements column sorting. In the JSGridProject sample for this article, clicking on the Product column shows only the Configure Columns option. If you click the heading for any of the other columns, the options include Hide Column.
When you click a column heading and then click Configure Columns, the JS Grid control displays the Configure Columns modal dialog box (Figure 3). Because the IsHidable property is set to false in the GridUtilities.SetColumnProperties method, the Project Name column cannot be hidden.
Figure 5. Configuring the JS Grid columns