Monday, November 23, 2009

create custom gridview

here by i post how to create a gridview in a customized way.it has a two simple steps
1.create a class with namespace which is inherite from gridview
2.register that namespace in .aspx page
now we move to coding part:
1.create a class with namespace which is inherite from gridview

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
///
/// Summary description for HoverGridView
///

namespace SMP.WebControls
{
[ToolboxData("<{0}:HoverGridView runat=server>")]
public class HoverGridView : System.Web.UI.WebControls.GridView
{
public bool MouseHoverRowHighlightEnabled
{
get
{
if (ViewState["MouseHoverRowHighlightEnabled"] != null)
return (bool)ViewState["MouseHoverRowHighlightEnabled"];
else
return false;
}
set { ViewState["MouseHoverRowHighlightEnabled"] = value; }
}
public Color RowHighlightColor
{
get
{
if (ViewState["RowHighlightColor"] != null)
return (Color)ViewState["RowHighlightColor"];
else
{
// default color
return Color.Yellow;
}
}
set { ViewState["RowHighlightColor"] = value; }
}

protected override void OnRowCreated(GridViewRowEventArgs e)
{
base.OnRowCreated(e);
if (MouseHoverRowHighlightEnabled)
{
// only apply changes if its DataRow
if (e.Row.RowType == DataControlRowType.DataRow)
{
// when mouse is over the row, save original color to new attribute
// and change it to highlight yellow color
e.Row.Attributes.Add("onmouseover",
string.Format("this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='{0}'",
ColorTranslator.ToHtml(RowHighlightColor)));
// when mouse leaves the row, change the bg color to its original value
e.Row.Attributes.Add("onmouseout",
"this.style.backgroundColor=this.originalstyle;");
}
}
}
}
//
public class RequiredTextBox : TextBox
{
private RequiredFieldValidator req;
public string InvalidMessage;
public string ClientScript = "true";
protected override void OnInit(EventArgs e)
{
req = new RequiredFieldValidator();
req.ControlToValidate = this.ID;
req.ErrorMessage = this.InvalidMessage;
req.EnableClientScript = (this.ClientScript.ToLower() != "false");
Controls.Add(req);
}
protected override void Render(HtmlTextWriter w)
{
base.Render(w);
req.RenderControl(w);
}
}
}
2.register that namespace in .aspx page

1.<%@ Register Namespace="SMP.WebControls" TagPrefix="SMP" %>

2.refer your css using link tag

3.
MouseHoverRowHighlightEnabled= "true"
RowHighlightColor="red"
CssClass="igoogle igoogle-night"
AutoGenerateColumns="true" >













in code-behind (.aspx.cs):
your normal gridview bind code

igoogle-night.css file:

/* table style */
table.igoogle-night
{
border:solid 1px #ABDEFF;
background-color:White;
}
/* header cell style */
.igoogle-night th
{
border-right-color:#ABDEFF;
font: normal 13px sans-serif;
font-weight:bold;
background-color:#ABDEFF;
height:15px;
border-bottom-color:#ABDEFF;
color:#59483f;
}
/* cell styles */
.igoogle-night td
{
border-bottom-color:#ABDEFF;
border-right-color:#ABDEFF;
}
/* mouseover row style */
.igoogle-night .row-over
{
background-color:#DBF3FF;
}
/* select row style */
.igoogle-night .row-select
{
background-color:#ad9e87;
color:#fff;
}
.igoogle-night .alt-data-row
{
font: normal 13px sans-serif;
}
.igoogle-night .data-row
{
background-color:#F2F2F2;
font: normal 13px sans-serif;
}
.igoogle-night .header-row
{
height:35px;
}