Home »

Gộp ô header trong Datagrid

3 thg 9, 2013

Bài viết sẽ hướng dẫn bạn cách gộp các ô ở phần header của DataGrid giống như merge trong excel.

Gộp ô header trong Datagrid

Bài viết sẽ hướng dẫn bạn cách gộp các ô ở phần header của DataGrid giống như merge trong excel.
Trước khi chúng ta thực hiện lệnh gộp ô phần header của DataGrid

Và sau khi gộp chúng ta sẽ được như thế này

I. Introduction
Làm thế nào để bạn có thể gộp các ô trên header của DataGrid một cách dễ dàng giống như trong excel, hoặc design table trong HTML. Bài viết sau sẽ hướng dẫn bạn làm được việc đó.
II. Using the code
Khi trang web được load ra, thì một DataGrid sẽ được dịch thành một Table HTML và phần header của nó cũng giống như thẻ TR của Table. Cho nên, để gộp header, thì chúng ta cần phải can thiệp được vào nó. Ở đây, chúng ta có thể làm được điều đó bằng cách gửi đi phương thức Render của DataGrid sử dụng SetRenderMethodDelegate của DataGrid trên sự kiện ItemCreated . Giống như sau:
?
1
2
3
4
5
6
7
8
9
10
11
private void Datagrid1_ItemCreated(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
//*** Examine if the item created is the header item
ListItemType lit = e.Item.ItemType;
if(ListItemType.Header == lit)
{
//*** Redirect the default header rendering method to our own method
e.Item.SetRenderMethodDelegate(new RenderMethod(NewRenderMethod));
}
}
Và chúng ta tạo thêm một phương thức để Render
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/// <summary>
/// This is our custom render method for the grid header item
/// </summary>
/// <param name="writer"></param>
/// <param name="ctl"></param>
private void NewRenderMethod(HtmlTextWriter writer, Control ctl)
{
//***  We don't need to write the <TR> tag
//     because it's already written by the writer
//     so now we write the Name column
writer.Write("<TD colspan=\"3\" align=\"center\">Name</TD>\n");
//***  The Age column must have the rowspan attribute
//     and must be rendered inside the
//     first row so it will centered vertically
TableCell cell = (TableCell)ctl.Controls[ctl.Controls.Count-1];
cell.Attributes.Add("rowspan","2");
cell.RenderControl(writer);
//***     Now we close the first row, so we can insert the second one
writer.Write("</TR>\n");
//***  Add the style attributes that was defined in design time
//     to our second row so they both will have the same appearance
DataGrid1.HeaderStyle.AddAttributesToRender(writer);
//***     Insert the second row
writer.RenderBeginTag("TR");
//***  Render all the cells that was defined
//     in design time, except the last one
//     because we already rendered it above
for(int i=0; i<= ctl.Controls.Count-2; i++)
{
ctl.Controls[i].RenderControl(writer);
}
//***  We don't need to write the </TR> close tag
//     because the writer will do that for us
//     and so we're done
:) }
Tiếp theo là viết một hàm để thiết kế DataGrid theo như ý bạn. Và tất cả những gì bạn cần làm là xác định rõ các ô header giống như vậy (bạn có thể sử dụng auto format, nhưng nó sẽ không hoạt động trong một số trường hợp)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(!this.IsPostBack)
{
TableCell cell = null;
DataGrid1.DataSource = GetData();
DataGrid1.DataBind();
m_add.DatagridToDecorate = Datagrid2;
ArrayList header = new ArrayList();
// cell = new TableCell();
// cell.Text = "Code";
// cell.RowSpan = 2;
// cell.HorizontalAlign = HorizontalAlign.Center;
// header.Add(cell);
cell = new TableCell();
cell.Text = "Name";
cell.RowSpan = 2;
cell.HorizontalAlign = HorizontalAlign.Center;
header.Add(cell);
cell = new TableCell();
cell.Text = "Name";
cell.ColumnSpan = 3;
cell.HorizontalAlign = HorizontalAlign.Center;
header.Add(cell);
cell = new TableCell();
cell.Text = "Age";
cell.RowSpan = 2;
cell.HorizontalAlign = HorizontalAlign.Center;
header.Add(cell);
cell = new TableCell();
cell.Text = "School";
cell.ColumnSpan = 3;
cell.HorizontalAlign = HorizontalAlign.Center;
header.Add(cell);
cell = new TableCell();
cell.Text = "Religion";
cell.RowSpan = 2;
cell.HorizontalAlign = HorizontalAlign.Center;
header.Add(cell);
m_add.AddMergeHeader(header);
Datagrid2.DataSource = GetData();
Datagrid2.DataBind();
}
}
Tags:

Comments[ 0 ]


Đăng nhận xét