JS Grid Control

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

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

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.

In This Section

Features of the JS Grid Control

Tips for Implementing the JS Grid Control

JS Grid Control Widgets

JS Grid Delegates

JS Grid Enumerations

JS Grid Events

How to: Create a Basic JS Grid Control

How to: Link a SharePoint List to the JS Grid Control

How to: Create a Pivot Grid Using the JS Grid Control

How to: Create an Editable JS Grid Control

How to: Create a Hierarchical JS Grid Control

How to: Create a Gantt Chart Using the JS Grid Control

How to: Enable Sorting in a JS Grid Control

How to: Write Back Changes from the JS Grid Control

Other JS Grid Control Resources

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

Microsoft.SharePoint.JSGrid

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

Microsoft.SharePoint.WebControls.JSGrid

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

See Also

Other Resources

SharePoint 2010 Client Object Model