Disection of SPGridview in sharepoint style

Disection of SPGridview in sharepoint style

In Sharepoint point sites, if are storing data in a sharepoint list, then you can use inbuilt “Custom list” webpart to display data in the sharepoint pages .But, What if the Data is stored other than sharepoint lists and you want to display the data in sharepoint list style ? In my scenario, I have the requirement that, I have to show data from sql server database in sharepoint list style .Here is something I found interesting.

Sharepoint uses Microsoft.SharePoint.WebControls.SPGridView control to display its own list. Here goes the webpart


It contains almost everything; you can do with a SPGridView.To start with let’s add a GridView to the Webpart and assign data source

using System;
using System.Web;
using System.Data;
using System.Web.UI;
using System.Drawing;
using System.Web.UI.WebControls;
using System.Collections.Generic;

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;



#region Method : CreateChildControls
///

/// Method Name : CreateChildControls
/// Description : Method for creating the child controls.
///

protected override void CreateChildControls()
{
//Defining the grid view
SPGridView customGridView = new SPGridView();
//Here GetCustomData() function returns a dataset.
customGridView.DataSource = GetCustomData();

this.Controls.Add(customGridView);


}
In this case, the columns are auto generated based on the data columns in the dataset.

Let’s include List items menu’s to the individual row of the grid view. Let’s include the following code for service grid view inside create child controls.

serviceGridView.AutoGenerateColumns = false;

SPBoundField titleBoundField = new SPBoundField();
//Assigning the Columnname which is coming from the dataset
titleBoundField.DataField = “TITLE”;

titleBoundField.HeaderText = " Service Title";
titleBoundField.HeaderStyle.CssClas=ConstantVariables.GetMSFormBobyCSS;
SPBoundField serviceIDBoundField = new SPBoundField();
serviceIDBoundField.DataField = SERVICEID;
serviceIDBoundField.HeaderText = "ServiceID";
serviceIDBoundField.Visible = false;
serviceIDBoundField.HeaderStyle.CssClass= “myCustomClass”; customGridView.Columns.Add(titleBoundField);
customGridView.Columns.Add(serviceIDBoundField);
titleBoundField.Visible = false;
//Defining Menu Field for the Title
titleMenuField = new SPMenuField();
titleMenuField.HeaderText = "Service Title";
titleMenuField.TextFields = TITLE;
titleMenuField.HeaderStyle.CssClass = “myCustomClass”;
titleMenuField.MenuTemplateId = "ServicesMenu";
titleMenuField.TokenNameAndValueFields = "CustomID=ServiceID";
titleMenuField.SortExpression = TITLE;

MenuTemplate servicesListMenuTemplate = new MenuTemplate();
servicesListMenuTemplate.ID = "ServicesMenu";
//Defining Menu Templates for the menu
MenuItemTemplate viewMenuItemTemplate = new MenuItemTemplate("View Details");
StringBuilder viewDetailsUrl = new StringBuilder();
viewDetailsUrl.Append(“http://google.com”);
//Adding event on menu item click
viewMenuItemTemplate.ClientOnClickNavigateUrl=viewDetailsUrl.ToString();
servicesListMenuTemplate.Controls.Add(viewMenuItemTemplate);

MenuItemTemplate editMenuItemTemplate = new MenuItemTemplate("Edit Details");
StringBuilder editDetailsUrl = new StringBuilder();
editDetailsUrl.Append(“http://www.msdn.com”);
//Adding event on menu item click
editMenuItemTemplate.ClientOnClickNavigateUrl=editDetailsUrl.ToString();
servicesListMenuTemplate.Controls.Add(editMenuItemTemplate);

deleteMenuItemTemplate = new MenuItemTemplate("Delete");
deleteMenuItemTemplate.ClientOnClickScript = "javascript:do_confirmService('" + this.UniqueID + "','%CustomID%');";
servicesListMenuTemplate.Controls.Add(deleteMenuItemTemplate);

//Adding seperator template
MenuSeparatorTemplate sepMenuTemplate = new MenuSeparatorTemplate();
servicesListMenuTemplate.Controls.Add(sepMenuTemplate);
this.Controls.Add(servicesListMenuTemplate);
customGridView.Columns.Add(titleMenuField);
//Defining Description Column
SPBoundField statusBoundField = new SPBoundField();
statusBoundField.DataField = "Status";
statusBoundField.HeaderText = "Status";
statusBoundField.HeaderStyle.CssClass = ConstantVariables.GetMSFormBobyCSS;
customGridView.Columns.Add(statusBoundField);

SPBoundField languageBoundField = new SPBoundField();
languageBoundField.DataField = " Language ";
languageBoundField.HeaderText = "Language";
languageBoundField.HeaderStyle.CssClass = ConstantVariables.GetMSFormBobyCSS;
customGridView.Columns.Add(languageBoundField);



The most important thing above are the click event of each menu item.

1. If you want to redirect to some URL on menu item click, then you can use ClientOnClickNavigateUrl property of MenuItemTemplate

This is done here for “View Details” and “Edit Details” menu Item.
Eg : viewMenuItemTemplate.ClientOnClickNavigateUrl=viewDetailsUrl.ToString();

Here Clicking View Detail page will redirect to http://www.google.com/.

On Click of “Edit Detail” page will redirect to “http://www.msdn.com

2. What if you want some server side functionality on the client click.
You need to do four things over here.
2.1. Implement IPostBackEventHandler. Your class goes like this

using System.Web.UI;

public class Services : Microsoft.SharePoint.WebPartPages.WebPart, IPostBackEventHandler
{

}
2.2. Register your javascript file OnPreRender() method.



2.3. Call the javascript method on ClientOnClickScript event of MenuItemTemplate
Eg :

deleteMenuItemTemplate.ClientOnClickScript = "javascript:do_confirmService('" + this.UniqueID + "','% CustomID %');";

Here ‘%Name%’ is assigned to the datafield defined the Token
TokenNameAndValueFields of the MenuField

Eg : titleMenuField.TokenNameAndValueFields = " CustomID=ServiceID";


Here DataSet has a column ServiceID. So on click of delete Menu item of a particular row, serviceID of that row is passed as a parameter to the javascript.

The Javascript File goes here

File : CustomJavaScript.js
-----------------------------------------------------------------------
function do_confirmService(ID,Name)
{
if (confirm('Are you sure you want to delete the service?'))
{__doPostBack(ID,Name)
}
;
-----------------------------------------------------------------------
On click of “delete” menu item it will ask for the conformation .If you click ok, then it will do a PostBack.

2.4. Implement RaisePostBackEvent as part of IPostBackEventHandler Interface


#region Event : RaisePostBackEvent
///

/// Method Name : RaisePostBackEvent
/// Description : This method is the implementation of IPostBackEventHandler Interface and is used to Delete A Service Record while Postback event.
///

/// string
public void RaisePostBackEvent(string eventArgument)
{
//Check for the ServiceID which is passed as parameter
//here in eventArgument gives the ServiceID which is passed to javascript
}
#endregion



Enabling Paging in SPGridview

Add the follwing lines

customGridView.AllowPaging = true;
customGridView.PageSize = 15;

customGridView.PagerSettings.Mode = PagerButtons.NumericFirstLast;
serviceGridView.PageIndexChanging += new GridViewPageEventHandler(customGridView _PageIndexChanging);

//Creating Event Handler for Page index changing

#region Event : customGridView _PageIndexChanging
//

/// Method Name : serviceGridView_PageIndexChanging
/// Description : This method handles Page Indexing Event of gridview
///

/// GridViewPageEventArgs
/// object
private void customGridView _PageIndexChanging(object sender, GridViewPageEventArgs e)
{

customGridView.PageIndex = e.NewPageIndex;
customGridView.DataBind();

}
#endregion


Add following lines after adding SPGridview to the control collection.


Eg : this.Controls.Add(customGridView);
customGridView.PagerTemplate = null;
customGridView.DataBind();


Don’t DataBind the gridview before adding the control to the control collection in case of paging.


Enabling Grouping in SPGridview
customGridView.AllowGrouping = true; customGridView.AllowGroupCollapse = true; customGridView.GroupField = "TITLE"; customGridView.GroupDescriptionField = "TITLE"; customGridView.GroupFieldDisplayName = "TITLE ";