Answered by:
Add header to gridview with Templatefield

Question
-
User1310055179 posted
Hi,
How can I add a header row to the following gridview inside the modal window extender:
<asp:Panel ID="showMessagesPanel" CssClass="ModalWindowQur" style = "display:none; text-align:center; height:120%; overflow:auto;" runat="server"> <div style="max-height: 400px; overflow: auto; text-align: left;"> <div class="popup_header" style="padding-left:0%;"> <span class="popup_Buttons_qur"><asp:Button ID="cancelEditButton" runat="server" Text="X"/></span> <span style="margin-left:35px;">Messages</span> </div> <div class="popup_Body" style="padding-left:9%; margin-bottom:15px;"> <span> <asp:GridView ID="messagesGridView" runat="server" DataKeyNames="Memo_Idx" AutoGenerateColumns="False" ShowHeader="False" BackColor="#ffffff" GridLines="None" OnRowDeleting="gv_MessagesRowDeleting" OnSelectedIndexChanged="messagesGridView_SelectedIndexChanged" OnRowDataBound="messagesGridView_RowDataBound"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:Panel CssClass="popupMenu" ID="PopupMenu2" runat="server"> <div style="border: 1px outset white; padding: 2px; z-index:5000"> <div> <asp:LinkButton ID="LinkButtonRepsDelete" runat="server" CommandName="Delete" Text="Delete" /> <br /> <asp:LinkButton ID="LinkButtonRepsSelect" runat="server" CommandName="Select" Text="View Rec." OnClientClick="openMessageForm"/> </div> </div> </asp:Panel> <asp:Panel ID="Panel10" runat="server"> <table style="width:700px; table-layout:fixed;"> <tr> <td style="width:5%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label11" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Memo_Idx"))) %>' /> </td> <td style="width:5%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label5" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("App_Code"))) %>' /> </td> <td style="width:10%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label6" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_Rec_Numbr"))) %>' /> </td> <td style="width:15%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label7" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_From"))) %>' /> </td> <td style="width:15%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label9" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_To_Date2"))) %>' /> </td> <td style="width:50%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label10" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_MSG"))) %>' /> </td> </tr> </table> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="hme12" runat="Server" HoverCssClass="popupHover" PopupControlID="PopupMenu2" PopupPosition="Left" TargetControlID="Panel10" PopDelay="25" /> </ItemTemplate> <EditItemTemplate> <!-----Panel for displaying the update and cancel options for selected row------> <asp:Panel ID="panel_updateDelete" runat="server" CssClass="popupMenu"> <div style="border: 1px outset white; padding: 2px; z-index:5000"> <asp:LinkButton ID="lnkUpdate" CommandName="Update" runat="server" Text="Update"></asp:LinkButton><br /> <asp:LinkButton ID="lnkCanel" runat="server" Text="Cancel" CommandName="Cancel"></asp:LinkButton> </div> </asp:Panel> <!-----Panel for displaying the TextBoxes in GridView------> <asp:Panel ID="panel_TB" runat="server" Style="width:90%;"> <table border="1" style="border-collapse:collapse; width:100%;"> <tr> <td style="width:30%;"><asp:TextBox ID="txtName" style="width:auto;" Text='<%#Eval("Qur_Name") %>' runat="server"> </asp:TextBox></td> <td style="width:70%;"><asp:TextBox ID="txtDesc" style="width:auto;" Text='<%#Eval("Qur_Desc") %>' runat="server"> </asp:TextBox></td> </tr> </table> </asp:Panel> <!-----HoverMenuExtender for displaying update and cancel options------> <ajaxToolkit:HoverMenuExtender ID="hme2" TargetControlID="panel_TB" PopupControlID="panel_updateDelete" PopupPosition="Right" HoverDelay="25" runat="server"></ajaxToolkit:HoverMenuExtender> </EditItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </span> </div> </div> </asp:Panel>
Monday, June 10, 2019 7:09 AM
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
Tuesday, June 11, 2019 1:17 AM
All replies
-
User-1038772411 posted
Hello qsoft_developer,
Use the header template:
<Columns> <asp:TemplateField> <ItemTemplate> .................... </ItemTemplate> <HeaderTemplate> Full Name </HeaderTemplate> </asp:TemplateField> </Columns>
For more information, read.
Thank You.
Monday, June 10, 2019 7:31 AM -
User1310055179 posted
I only have one item template.
The item template contains the following code:
<ItemTemplate> <asp:Panel CssClass="popupMenu" ID="PopupMenu2" runat="server"> <div style="border: 1px outset white; padding: 2px; z-index:5000"> <div> <asp:LinkButton ID="LinkButtonRepsDelete" runat="server" CommandName="Delete" Text="Delete" /> <br /> <asp:LinkButton ID="LinkButtonRepsSelect" runat="server" CommandName="Select" Text="View Rec." OnClientClick="openMessageForm"/> </div> </div> </asp:Panel> <asp:Panel ID="Panel10" runat="server"> <table style="width:700px; table-layout:fixed;"> <tr> <td style="width:5%; border-bottom: 1px solid #ddd;"> <asp:Label ID="Label11" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Memo_Idx"))) %>' /> </td> <td style="width:5%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label5" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("App_Code"))) %>' /> </td> <td style="width:10%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label6" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_Rec_Numbr"))) %>' /> </td> <td style="width:15%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label7" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_From"))) %>' /> </td> <td style="width:15%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label9" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_To_Date2"))) %>' /> </td> <td style="width:50%; border-bottom: 1px solid #ddd; "> <asp:Label ID="Label10" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_MSG"))) %>' /> </td> </tr> </table> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="hme12" runat="Server" HoverCssClass="popupHover" PopupControlID="PopupMenu2" PopupPosition="Left" TargetControlID="Panel10" PopDelay="25" /> </ItemTemplate>
I didn't find a way to add the header template. Can you maybe show me how to do it according to my code?
I would like to add headers to the table inside the Item template.
Monday, June 10, 2019 8:17 AM -
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.
Monday, June 10, 2019 8:56 AM -
User1310055179 posted
Thanks for your reply.
At first, I tried changing the ShowHeader= "True" but it didn't show any header.
I tried implementing your solution using the OnRowCreated method. However, In my example, there is only one column in the gridview.
messagesGridview.Columns.Count returns 1.
protected void messagesGridView_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 < messagesGridView.Columns.Count; i++) for (int i = 0; i < 6; i++) { TableCell HeaderCell = new TableCell(); HeaderCell = new TableCell(); HeaderCell.Text = "Header" + i.ToString(); HeaderGridRow.Cells.Add(HeaderCell); } messagesGridView.Controls[0].Controls.AddAt(0, HeaderGridRow); }
Monday, June 10, 2019 9:10 AM -
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
Tuesday, June 11, 2019 1:17 AM