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.
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
. Copy, paste, undo, redo, fill-down, and export-to-Excel
. Asynchronous validation
. Control/widget display and edit capabilities
. Multiple views, in the form of grid, Gantt, and pivot charts
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.
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
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
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
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
protected void Page_Load(object sender, EventArgs e)
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.
that are all installed into the LAYOUTS folder under the path
%ProgramFiles%\Common Files\Microsoft Shared\web server
for production use and one with a .debug.js extension for development and
debugging. The files for debugging are readable and thus larger in size than
the files for production use. Compression involves removing all line breaks and
replacing several longer variable names with shorter ones to optimize the
overall size of the files. For example, the file SP.js (380KB) is nearly 40
SharePoint application pages or Web Parts, you need to include these scripts by
using the tag <SharePoint:ScriptLink>, as follows:
runat="server" Name="sp.js" Localizable="false" LoadAfterUI="true" />
must support the minimum set of requirements needed for ASP.NET AJAX and
SharePoint 2010. The supported browsers (with their minimum version numbers)
are Microsoft Internet Explorer 7, Firefox 3.5, and Safari 4.0
Grid Control SharePoint Screen shot: