I think a lot of UI developer have a problem with GridView in Applying CSS and mouse hover effects.
to Solve these problems we need to understand Controls hierarchy in grid view
use this method in the previous post "css helper" to get all controls in the grid view after the page.aspx run
- open new aspx page and insert a new grid view and enable paging.
- write a simple method to fill just 2 row in this gird and call it in page load
- right click in your web browser and click view source
let's try .... [here I just create a simple Employee class ]
1: public class Employee
2: {
3: private string _Name;
4: public string Name
5: {
6: get { return _Name; }
7: set { _Name = value; }
8: }
9: private string _Job;
10: public string Job
11: {
12: get { return _Job; }
13: set { _Job = value; }
14: }
15: private int _Age;
16: public int Age
17: {
18: get { return _Age; }
19: set { _Age = value; }
20: }
21: }
now I need to make a list of Employees and fill the grid with,
1: private void FillGrid()
2: {
3: List<Employee> employeeList = new List<Employee>();
4: for (int i = 0; i < 2; i++)
5: {
6: Employee emp = new Employee();
7: emp.Age = 20 + i;
8: emp.Job = "" + i + " Developer";
9: emp.Name = "" + i + " Ledooo :) ";
10: employeeList.Add(emp);
11: }
12: gvEmployee.DataSource = employeeList;
13: gvEmployee.DataBind();
14: }
15:
16: protected void Page_Load(object sender, EventArgs e)
17: {
18: if (!IsPostBack)
19: {
20: FillGrid();
21: }
22: }
we now insert 1 row in our grid and call the fill method in page load , our grid will appear like that : (2 paging rows , header row , and our data row )
we will use the ControlsGridViewHierachy to now well our grid :
1: public Control[] ControlsGridViewHierachy(Control root)
2: {
3: List<Control> list = new List<Control>();
4: list.Add(root);
5: if (root.HasControls())
6: {
7: foreach (Control control in root.Controls)
8: {
9: list.AddRange(ControlsGridViewHierachy(control));
10: }
11: }
12: return list.ToArray();
13: }
14:
15: public void GetGridControls(GridView grid)
16: {
17: Control[] allControls = ControlsGridViewHierachy(grid);
18: foreach (Control control in allControls)
19: {
20: if (control.HasControls())
21: {
22: Response.Write(control.GetType().Name +"<hr>");
23: }
24: else
25: {
26: Response.Write("--------------"+control.GetType().Name + "<hr>");
27: }
28: }
29: }
from these methods output we will understand well our Grid Hierachy
GridView
ChildTable
GridViewRow
TableCell
PagerTable
TableRow
TableCell
--------------Label
TableCell
--------------DataControlPagerLinkButton
GridViewRow
--------------DataControlFieldHeaderCell
--------------DataControlFieldHeaderCell
--------------DataControlFieldHeaderCell
GridViewRow
--------------DataControlFieldCell
--------------DataControlFieldCell
--------------DataControlFieldCell
GridViewRow
--------------DataControlFieldCell
--------------DataControlFieldCell
--------------DataControlFieldCell
GridViewRow
TableCell
PagerTable
TableRow
TableCell
--------------Label
TableCell
--------------DataControlPagerLinkButton
I think now we can apply our CSS helper to any grid view we need in our application
this is a simple method: " write this method and call it in page load ", you can easily cascading any grid part you need.
public void StyleGridControls(GridView grid)
{
Control[] allControls = ControlsGridViewHierachy(grid);
foreach (Control control in allControls)
{
TableRow row = control as TableRow;
if (row != null)
{
row.Attributes.Add("runat", "server");
row.Attributes.Add("onmouseover", "classChange('Rowhover',this);");
row.Attributes.Add("onmouseout", "classChange('Row',this);");
}
DataControlFieldCell Dcell = control as DataControlFieldCell;
if (Dcell != null)
{
Dcell.Attributes.Add("runat", "server");
Dcell.Attributes.Add("onmouseover", "classChange('Rowhover',this);");
Dcell.Attributes.Add("onmouseout", "classChange('Row',this);");
}
}
}
this our grid after css " mouse hove also in paging row " :)
hope this be useful for you .................
Download Article project sample
