Use of ASP.Net (C#) Grid View Control in SharePoint (MOSS 2007) User Control:

In this article, you will learn how to work with the ASP.Net (C#) Grid View Control using the data from a Microsoft SharePoint (MOSS 2007) custom list. In this article we will use ASP.Net (C#) Grid View Control for displaying data from the SharePoint (MOSS 2007) custom list in the SharePoint (MOSS 2007) user control. The ASP.Net (C#) Grid View Control is the best ASP.net control for displaying user friendly data (it means good layout and custom fields/columns) SharePoint (MOSS 2007) user control. I will explain this article to you in a step-by-step manner.

First of all, launch Visual Studio .NET (Start | All Programs | Microsoft Visual Studio 2005 Beta | Microsoft Visual Studio 2005 Beta 2). Create a new Web project (File | New | Web Site) and select the location where your project will be saved. Be sure that you have checked ASP.NET Web Site from the templates section and Visual Basic .NET as your language from the Language drop down box.

Click the OK button and switch to the design view by selecting the appropriate option from the IDE. Now add the item with file extension .ascx for the user control. Now in .ascx file place an instance of GridView controls from the Toolbox (See Figure 2).

Now open the .ascx file in Source mode by clicking the Source mode tab. In the source mode you will be able to see the HTML code of this grid view. In the HTML code of grid view change the name of grid view control to grdResult (ID= grdResult). For displaying custom data from the SharePoint (MOSS 2007) list you need to make some changes in the HTML of the ASP.Net Grid View Control. Suppose we are having the SharePoint (MOSS 2007) Custom List named User. The User list having the following columns:

ID, Title, First_Name, POSITION_DESCR, PHONE_BUSINESS_OFFICE, LOCATION_DESCR.

In the ASP.Net Grid View Control, we will display the above mentioned columns from the SharePoint (MOSS 2007) Custom List named User. For this I have made some changes in the HTML view of the ASP.Net Grid View Control grdResult.

<asp:GridView ID="grdResult" runat="server" AutoGenerateColumns="False" OnRowCommand="gridAction" Width="100%" GridLines="None" HeaderStyle-CssClass="Content_Amit NoRightBorder_Amit" CssClass="dataTableNu_Amit" CellPadding="4" RowStyle-CssClass='NoRightBorder_Amit'>
<Columns>

<asp:BoundField DataField="ID">
<ControlStyle CssClass="off_Amit" />
<ItemStyle CssClass="off_Amit" />
<HeaderStyle CssClass="off_Amit" />
</asp:BoundField>
<asp:ButtonField DataTextField="Title" HeaderText="Last Name" CommandName="EditUser" ControlStyle-CssClass="leftPadding">
<ItemStyle HorizontalAlign="Left" CssClass="leftPadding" />
<HeaderStyle HorizontalAlign="Left" />
</asp:ButtonField>
<asp:ButtonField DataTextField="First_Name" HeaderText="First Name" CommandName="EditUser" >
<ItemStyle HorizontalAlign="Left" CssClass="leftPadding"/>
<HeaderStyle HorizontalAlign="Left" />
</asp:ButtonField>
<asp:BoundField DataField="POSITION_DESCR" HeaderText="Title" >
<ItemStyle HorizontalAlign="Left" CssClass="leftPadding"/>
<HeaderStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="PHONE_BUSINESS_OFFICE" HeaderText="Phone" >
<ItemStyle HorizontalAlign="Left" CssClass="leftPadding"/>
<HeaderStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="LOCATION_DESCR" HeaderText="Location" >
<ItemStyle HorizontalAlign="Left" CssClass="NoRightBorder_Amit"/>
<HeaderStyle HorizontalAlign="Left" CssClass="NoRightBorder_Amit" />
</asp:BoundField>
</Columns>
<HeaderStyle CssClass="content_Amit" />
</asp:GridView>


The css classes used in the grid view are given below:


<style>
.content_Amit {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #666666;
padding:5px;
}
.dataTableNu_Amit {
PADDING-RIGHT: 5px; BORDER-TOP: #999 1px solid; PADDING-LEFT: 5px; BACKGROUND-color: #f0f0f0; PADDING-BOTTOM: 5px; COLOR: #666666; PADDING-TOP: 5px; BORDER-BOTTOM: #999 1px solid;BORDER-right: #999 0px
}
.dataTableNu_Amit TH {
BORDER-left: 0px; BORDER-right: #999 1px solid; BORDER-BOTTOM: #999 1px solid;}
.dataTableNu_Amit TD {
BORDER-left: 0px; BORDER-right: #999 1px solid; BORDER-BOTTOM: #999 1px solid;
}
.dataTableNu_Amit .NoRightBorder_Amit,TH.NoRightBorder_Amit{ border-right:0px;
}
.NoRightBorder_Amit
{border-right:0px;
}
.off_Amit{display:none;}
</style>




Now, for displaying data in ASP.Net (C#) Grid View Control from Microsoft SharePoint (MOSS 2007) custom list, we need to write code in C# at code behind i.e. in the .ascx.cs file of the .ascx page.
I have written the two function’s for binding ASP.Net (C#) Grid View Control to the data:


private void bindData()
{
SPWeb web;
//Fetch site name from the web.cofing file
string siteName = ConfigurationManager.AppSettings["siteName"].ToString();
//Open Site connection from the siteName mention in the web.config file
SPSite site = new SPSite(siteName);
///////////////////////////////////
web = site.OpenWeb();
dtUser = GetData(web);
if (dt.Rows.Count > 0)
{
#region If record found
//Bind Grid
grdResult.DataSource = dt;
grdResult.DataBind();
/////////////////
#endregion
}
}

#region Find User details
private DataTable GetData(SPWeb web)
{
SPListItemCollection lstColl = null;
SPQuery query = null;
StringBuilder queryString = new StringBuilder();
try
{
queryString.Append("&ltOrderBy>&ltFieldRef Name='Title' />
query = new SPQuery();
query.Query = queryString.ToString();
if (web.Lists["User"] != null)
{
lstColl = web.Lists["User"].GetItems(query);
}
DataTable dt = new DataTable();
dt = (DataTable)lstColl.GetDataTable();
return dt;
}
catch (Exception ex)
{
throw ex;
}
}
#endregion

I will call the bindData() function on the Page Load event:

protected void Page_Load(object sender, EventArgs e)
{
bindData();
}

The above is the complete code for displaying data from the Microsoft SharePoint (MOSS 2007) custom list in the ASP.Net (C#) Grid View Control.
Happy Coding :).