Add header to gridview with Templatefield
Question
Answers
-
User665608656 posted
Hi qsoft_developer,
According to your description, your GridView has only one Template, but there is a table with six columns in this template.
To add six column titles to this template, I recommend that you still use HeaderTemplate.
You need to set showHeader to true first, and then put a table in HeaderTemplate that is similar to your current itemTemplate content.
For more details,you could refer to the following code:
<HeaderTemplate> <table style="width: 700px; table-layout: fixed;"> <tr> <td style="width: 5%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label11" runat="server" Text='Column1' /> </td> <td style="width: 5%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label1" runat="server" Text='Column2' /> </td> <td style="width: 10%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label2" runat="server" Text='Column3' /> </td> <td style="width: 15%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label3" runat="server" Text='Column4' /> </table> </HeaderTemplate>This is the result of my work demo:
Best Regards,
YongQing.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
All replies
-
User665608656 posted
Hi qsoft_developer,
According to your description, I found that the code you provided added ShowHeader= "False" attribute to gridview, which hides the default header line of gridview.
Do you want to add another header line to GridView on the basis of ShowHeader="False"?
If so, I recommend that you add a header line to the OnRowCreated method of gridview, and you could style the header line.
First, in the OnRowCreated method, it determines whether the current row is a header row or not.
If it is a header row, it creates a GridViewRow-type row, and creates a TableCell-type cell, which assigns the content of the header to each corresponding cell.
Finally, add rows to the gridview.
For more details, you could refer to the following code:
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { GridView HeaderGrid = (GridView)sender; GridViewRow HeaderGridRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert); for (int i = 0; i < GridView1.Columns.Count; i++) { TableCell HeaderCell = new TableCell(); HeaderCell = new TableCell(); HeaderCell.Text = "Header" + i.ToString(); HeaderGridRow.Cells.Add(HeaderCell); } GridView1.Controls[0].Controls.AddAt(0, HeaderGridRow); } }Here is the result of my work demo:
Best Regards,
YongQing.
-
User665608656 posted
Hi qsoft_developer,
According to your description, your GridView has only one Template, but there is a table with six columns in this template.
To add six column titles to this template, I recommend that you still use HeaderTemplate.
You need to set showHeader to true first, and then put a table in HeaderTemplate that is similar to your current itemTemplate content.
For more details,you could refer to the following code:
<HeaderTemplate> <table style="width: 700px; table-layout: fixed;"> <tr> <td style="width: 5%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label11" runat="server" Text='Column1' /> </td> <td style="width: 5%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label1" runat="server" Text='Column2' /> </td> <td style="width: 10%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label2" runat="server" Text='Column3' /> </td> <td style="width: 15%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label3" runat="server" Text='Column4' /> </table> </HeaderTemplate>This is the result of my work demo:
Best Regards,
YongQing.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
