|
In this article we will explore how to use stylesheet in alternate rows of gridview and how to apply mouseover style in the gridview.
Below images has been used to achieve above UI layout. I have used paint.Net to create below images which is free. One can use photoshop or any other tool.
Let's write some code to get this done.
Step 1: Add below style sheet in head section of the page. LinkPaging and LinkPagingFPNL will be used to apply style on paging, rest of the styles will be used to apply style on alternate rows, header, pager, mouseover and mouseout of the gridview.
< style type="text/css">
.myGrid
{
width: 100%;
margin: 0px 0 0px 0px;
border: solid 1px #525252;
border-collapse: collapse;
}
.myGrid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: Black;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
}
.myGrid th
{
color: #fff;
background: url(images/grid_header.png) repeat-x top;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
}
.myGrid .alt
{
background: #fcfcfc url(images/grid_alternate.png) repeat-x top;
}
.myGrid .pager
{
background: url(images/grid_pager.png) repeat-x top;
}
.myGrid .pager table
{
margin: 5px 0;
}
.myGrid .pager td
{
border-width: 0;
padding: 0 6px;
font-weight: bold;
line-height: 12px;
}
.myGrid .pager a
{
color: #fff;
text-decoration: none;
}
.myGrid .pager a:hover
{
color: #424242;
text-decoration: none;
}
.myGrid .mouseover
{
background: url(images/grid_mouseover.png) repeat-x top;
}
.myGrid .mouseout
{
background: #fcfcfc url(images/grid_mouseout.png) repeat-x top;
}
</style>
Step 2: Add scriptmanager in the form tag.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
Step 3: Place a gridview inside the updatepanel.
< asp:UpdatePanel runat="server" ID="updGrdView">
<ContentTemplate>
<table>
<tr>
<td valign="top">
<asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="False" ShowHeader="True" DataKeyNames="RecipieId" AllowPaging="true" PageSize="6" OnPageIndexChanging="gvParent_PageIndexChanging" GridLines="None" CssClass="myGrid" PagerStyle-CssClass="pager" AlternatingRowStyle-CssClass="alt" OnRowDataBound="gvParent_RowDataBound">
<Columns>
<asp:BoundField HeaderText="By" DataField="By" SortExpression="EmployeeId">
<ItemStyle HorizontalAlign="Center" Width="140px" />
</asp:BoundField>
<asp:BoundField HeaderText="Recipie Name" DataField="RecipieName" SortExpression="EmployeeName">
<ItemStyle HorizontalAlign="Center" Width="180px" />
</asp:BoundField>
<asp:BoundField HeaderText="Preparation Time" DataField="PreparationTime" SortExpression="Designation">
<ItemStyle HorizontalAlign="Center" Width="140px" />
</asp:BoundField>
<asp:BoundField HeaderText="Cooking Time" DataField="CookingTime" SortExpression="Location">
<ItemStyle HorizontalAlign="Center" Width="120px" />
</asp:BoundField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Step 6: In RowDataBound event of gridview we need to specify the css for onmouseover and onmouseout. Don't use mouseover and mouseout feature if a row is multiline because the image used to give the effect of mouseover won't come properly.
protected void gvParent_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='mouseover'");
if (e.Row.RowIndex % 2 != 0)
{
e.Row.Attributes.Add("onmouseout", "this.className='alt'");
}
else
{
e.Row.Attributes.Add("onmouseout", "this.className='mouseout'");
}
}
}
Step 7: In page load method we will bind the data to grid.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string strQuery = "SELECT * FROM Recipie";
gvParent.DataSource = GetData(strQuery);
gvParent.DataBind();
}
}
private SqlConnection GetConnection(string m_conString)
{
SqlConnection con = new SqlConnection(m_conString);
return con;
}
private DataTable GetData(string strQuery)
{
DataTable dtDept = null;
SqlConnection con = GetConnection("Data Source=(local);Initial Catalog=XYZ;Integrated Security=SSPI");
using (con)
{
con.Open();
using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
{
dtDept = new DataTable();
sqlAdapter.Fill(dtDept);
}
}
return dtDept;
}
Step 8: In pageindexchanging method we will put the paging logic.
protected void gvParent_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvParent.PageIndex = e.NewPageIndex;
string strQuery = "SELECT * FROM Recipie";
gvParent.DataSource = GetData(strQuery);
gvParent.DataBind();
}
Live Demo
This ends the article of gridview alternate row styling using css.
|