.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

JS Grid Control SharePoint

Posted By:Sagar Pardeshi       Posted Date: February 05, 2014    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

JS Grid Control SharePoint
 

Introduction

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

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

When 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 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., 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 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 have 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: 
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 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.

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.

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.

 

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 by 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: 

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

Figure 2 shows the results of the JSGridProject Web Part sample in 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 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.

Figure 5. Configuring the JS Grid columns

 

Important url Below for ref:

SharePoint Foundation 2010 JS Grid Control 
JS Grid Control. 
Microsoft.SharePoint.JSGrid Namespace. 
Enable Sorting Example Code 
SP Query Demo in SP Gridview

 

Project Server Code Samples 
Walkthrough: Customizing the PWA Ribbon and Accessing the JS Grid 
Walkthrough: Creating a Project Server Web Part with a JS Grid 
Scenarios for Project Server Development.

 



 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend