locked
Add header to gridview with Templatefield RRS feed

  • 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:nonetext-align:centerheight:120%overflow:auto;" runat="server">
                                <div style="max-height400pxoverflowautotext-alignleft;">
                                    <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="border1px outset whitepadding2pxz-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-bottom1px solid #ddd;">
                                                                            <asp:Label ID="Label11" runat="server" 
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Memo_Idx"))) %>' />
                                                                        </td>
                                                                        <td style="width:5%border-bottom1px solid #ddd; ">
                                                                            <asp:Label  ID="Label5" runat="server"
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("App_Code"))) %>' />
                                                                        </td>
                                                                        <td style="width:10%border-bottom1px solid #ddd; ">
                                                                            <asp:Label  ID="Label6" runat="server"
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_Rec_Numbr"))) %>' />
                                                                        </td>
                                                                        <td style="width:15%border-bottom1px solid #ddd; ">
                                                                            <asp:Label  ID="Label7" runat="server"
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_From"))) %>' />
                                                                        </td>
                                                                        <td style="width:15%border-bottom1px solid #ddd; ">
                                                                            <asp:Label  ID="Label9" runat="server"
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_To_Date2"))) %>' />
                                                                        </td>
                                                                        <td style="width:50%border-bottom1px 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="border1px outset whitepadding2pxz-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:collapsewidth: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="border1px outset whitepadding2pxz-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-bottom1px solid #ddd;">
                                                                            <asp:Label ID="Label11" runat="server" 
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Memo_Idx"))) %>' />
                                                                        </td>
                                                                        <td style="width:5%border-bottom1px solid #ddd; ">
                                                                            <asp:Label  ID="Label5" runat="server"
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("App_Code"))) %>' />
                                                                        </td>
                                                                        <td style="width:10%border-bottom1px solid #ddd; ">
                                                                            <asp:Label  ID="Label6" runat="server"
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_Rec_Numbr"))) %>' />
                                                                        </td>
                                                                        <td style="width:15%border-bottom1px solid #ddd; ">
                                                                            <asp:Label  ID="Label7" runat="server"
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_From"))) %>' />
                                                                        </td>
                                                                        <td style="width:15%border-bottom1px solid #ddd; ">
                                                                            <asp:Label  ID="Label9" runat="server"
                                                                                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Mem_To_Date2"))) %>' />
                                                                        </td>
                                                                        <td style="width:50%border-bottom1px 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