JS Grid Control SharePoint

Sagar Pardeshi
Feb 05, 2014
30.7k
0
0
Article

Introduction

The JS Grid control (aka SPGridView that inherits from the ASP.NET GridView) that 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.

It 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

Asynchronous Validation

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 scrolls 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 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 the 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 into 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:

ReadOnly
ReadWrite
ReadOnlyDefer
ReadWriteDefer • Defer

Developing

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., that 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 a JavaScript grid controller class for your grid.

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 need 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 as in the following:

protected void Page_Load(object sender, EventArgs e) { myGrid.DataSource = SPContext.Current.Web.Lists["CompanyName"].GetItems( new SPQuery()).GetDataTable(); myGrid.DataBind(); }

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 various menu items to your list items (for example, for various content types) then you can change the bound fields programmatically for every row, 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 using:

(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.

Enabling Sorting

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.

The following are the three steps to enable sorting:

Set the SPGridView property AllowSorting to true.
Implement the SPGridView event OnSorting.
Add a SortExpression to every bound column.

JavaScript Applications: The JavaScript client object model consists of several JS files that are all installed into the LAYOUTS folder under the path "%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS":

SP.js/SP.debug.js
SP.Core.js/SP.Core.debug.js
SP.Runtime.js/SP.Runtime.debug.js
SP.Ribbon.js/SP.Ribbon.debug.js
JsGrid.js/JsGrid.debug.js
JSGrid.Gantt.js/JSGrid.Gantt.debug.js

All JavaScript files are available in two versions: one with compressed files 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 percent smaller than SP.debug.js (559KB). To use these JavaScript files in your SharePoint application pages or Web Parts, you need to include these scripts using the tag <SharePoint:ScriptLink>, as follows:

<SharePoint:ScriptLink runat=”server” Name=”sp.js” Localizable=”false” LoadAfterUI=”true” />

The web control ensures that the JavaScript file is loaded, including all dependencies. Note that the client computer using the JavaScript object model 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.

JS Grid Control SharePoint Screen shot:

JSGridProject Web Part in a Project Web App page

Figure 2. Using the JSGridProject Web Part in a Project Web App page

Figure 2 shows the results of the JSGridProject Web Part sample to 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 a Hide Column.

Figure 3. Configuring the JS Grid columns

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.

The following are important URLs for reference.

SharePoint Foundation 2010 JS Grid Control