JS Grid Control

SharePoint 2010

Learn about concepts, best practices, the object model, and procedures that show you how to create customized solutions based on the JS Grid control.

Last modified: March 09, 2015

Applies to: SharePoint Foundation 2010

The JS Grid control renders tabular data on a web page. It renders a grid view in one pane, and it can optionally render a pivoted grid or a Gantt chart in a second pane. The control is used in Microsoft SharePoint 2010, Microsoft Project 2010, and web applications such as Microsoft Access 2010. It replaces the datasheet in Windows SharePoint Services 3.0.

The JS Grid control is extensible and offers a rich development environment that enables you to create interactive and responsive data visualizations. It uses HTML and ECMAScript (JavaScript, JScript) only, and it has both a server-side API (C#) and a client API (JavaScript).

Solutions that are described in this section include the following components:

  • A user control (ASCX) that references a JSGrid object.

  • A Visual Web Part that contains the user control.

  • A JavaScript controller for the JS Grid control that registers components, handles initialization tasks, and performs other client-side operations.

  • Utility classes that process data, instantiate objects, and perform other server-side operations.

Note Note

By using a Visual Web Part, you can use the built-in Design view for the JS Grid control, and you can create simple Web Part properties without having to create an Editor Part.

The following table contains links to other resources for programming with the JS Grid control.


Describes the server-side object model that controls the display and output format of the JS Grid control.


Describes the server-side object model of the JS Grid control.

Walkthrough: Creating a Project Server Web Part with a JS Grid

Shows how to create a grid for Project Server 2010 that displays all items which contain a specified custom field value.

Walkthrough: Customizing the PWA Ribbon and Accessing the JS Grid

Shows how to modify a Project Server 2010 grid and how to attach an event handler to the OnRowFocusChanged event.

Project 2010 SDK Download (sample)

Contains a sample JS Grid control that defines custom sorting logic (in the …\Samples\WebParts\ListProjects_Sorting subdirectory).