Tips for Implementing the JS Grid Control
Applies to: SharePoint Foundation 2010
Controller
The controller of the JS Grid control tells the grid how to render content (that is, which panes or columns to display). The controller enables the data source. The controller understands how to handle unrelated rows, allowing edits to occur without having all the data locally.
You can also define styles in the controller. In the following code, RegisterCellStyle defines a style, ‘TextRightAlign’, which can be used to right-align columns.
<SharePoint:JSGrid ID="_grid" runat="server" />
<script type="text/javascript">
Type.registerNamespace("GridManager");
this.control;
GridManager = function () {
this.Init = function (jsGridControl, initialData, props) {
control = jsGridControl;
var dataSource = new SP.JsGrid.StaticDataSource(initialData);
var jsGridParams = dataSource.InitJsGridParams();
jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign: 'right' }));
jsGridControl.Init(jsGridParams);
}
};
</script>
For a complete example, see How to: Create a Basic JS Grid Control.
Filtering
The following is a list of settings that may be useful to filter content:
Column hidden/visible state
Column order
Column widths
Complex filter
Grouping
Sort
Splitter bar position
Persistence
The term persistence refers to retaining filter, group, sort, and view selection preferences across user sessions. Persistence is a feature of each controller.
Settings that should not be persisted across sessions include the following:
Autofilter: Persisting autofilter settings can confuse users because they might not understand why their views contain no data. If manually configured, client-side filters are persisted.
Hierarchy: The dataset is created "on the fly," so it is difficult to persist; however, the "show outline level" setting is persisted. This setting causes the view to create the aforementioned dataset.
The selected row or column
Note
In Microsoft Office Project Server 2007, most settings were persisted across sessions. Project Server 2010 still allows a choice of persistence per page. The default should be to retain settings within the user settings unless you have a strong business case for persisting preferences in the session only.
Printing Grid
When printing, the controller loads the grid data as read-only. This can be a long-running operation in a paged dataset; it is best to open a new browser window. Printing is left to the browser. If the page does not meet user expectations, the user can close the print window, add or remove columns, zoom, and click Print again.
Attaching to Events
This example shows how to attach custom code to the OnCellEditComplete event.
<script type="text/javascript">
Type.registerNamespace("GridManager");
GridManager = function () {
this.Init = function (jsGridControl, initialData, props) {
control = jsGridControl;
var dataSource = new SP.JsGrid.StaticDataSource(initialData);
var jsGridParams = dataSource.InitJsGridParams();
// This event is triggered after the standard grid error checking.
jsGridControl.AttachEvent(SP.JsGrid.EventType.OnCellEditCompleted, GotHere);
jsGridControl.Init(jsGridParams);
}
};
function GotHere(obj) {
alert('Got Here, ' + obj.fieldKey);
}
</script>
Debug Versions of JsGrid.js and JsGrid.Gantt.js
Debug versions of JsGrid.js and JsGrid.Gantt.js are installed with the product, usually in %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS. These files provide valuable information about the JS Grid.
See Also
Tasks
How to: Create a Basic JS Grid Control