locked
Positioning header text in a gridview RRS feed

  • Question

  • User-2006371901 posted

    I hav a gridview, and i need to give it a display title above the header row of text, in which the header row will display my field names:

     <Columns>
                                                <asp:templatefield>

                                                <headertemplate>
                                                    <asp:Label ID="gv1Hdr" runat="server" Text="My Stats" />
                                                </headertemplate>
                                              </asp:templatefield>
                                           
                                            
                                                <asp:BoundField DataField="UserName" HeaderText="Name" >
                                                <asp:BoundField DataField="Department" HeaderText="Dept" >
                                                <asp:BoundField DataField="Amount" HeaderText="Total" >
                                                  ......

    ..but when running the project and looking at the gridview display, the My Stats text is on the same line as Name, Dept, Total , where as I cannot find a way to have "My Stats" sit on its own line above the header text

    ???
    Ned

    Tuesday, June 11, 2019 12:55 AM

Answers

  • User665608656 posted

    Hi Norkle,

    According to your description, in order to add another line of heading to the head line of gridview, I suggest you use the OnRowCreated method of gridview.

    First, in the OnRowCreated method of gridview, determine whether the current row is the header row type. If so, start creating rows of GridViewRow type, and then create cells of TableCell type.

    Your "My Stats" header row should span all columns, right? You could assign values to cells, and make the cell's ColumnSpan equal to the number of columns in the gridview.

    You could also set the current location of the cell's text content in the middle, then add the cell to the row, and finally add the row 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);
                    TableCell HeaderCell = new TableCell();
                    HeaderCell = new TableCell();
                    HeaderCell.Text = "My Stats";
                    HeaderCell.ColumnSpan = GridView1.Columns.Count;
                    HeaderCell.HorizontalAlign = HorizontalAlign.Center;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    GridView1.Controls[0].Controls.AddAt(0, HeaderGridRow);
    
                }
            }

    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 2:11 AM

All replies

  • User665608656 posted

    Hi Norkle,

    According to your description, in order to add another line of heading to the head line of gridview, I suggest you use the OnRowCreated method of gridview.

    First, in the OnRowCreated method of gridview, determine whether the current row is the header row type. If so, start creating rows of GridViewRow type, and then create cells of TableCell type.

    Your "My Stats" header row should span all columns, right? You could assign values to cells, and make the cell's ColumnSpan equal to the number of columns in the gridview.

    You could also set the current location of the cell's text content in the middle, then add the cell to the row, and finally add the row 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);
                    TableCell HeaderCell = new TableCell();
                    HeaderCell = new TableCell();
                    HeaderCell.Text = "My Stats";
                    HeaderCell.ColumnSpan = GridView1.Columns.Count;
                    HeaderCell.HorizontalAlign = HorizontalAlign.Center;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    GridView1.Controls[0].Controls.AddAt(0, HeaderGridRow);
    
                }
            }

    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 2:11 AM
  • User-1038772411 posted

    Hi, Norkle

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:GridView ID="grvMergeHeader" runat="server" 
                          BackColor="LightGoldenrodYellow" 
                          BorderColor="Tan" BorderWidth="5px" 
                          CellPadding="3" ForeColor="Black" 
                          GridLines="None" BorderStyle="None" CellSpacing="2" 
                          AutoGenerateColumns="False" 
                          DataSourceID="SqlDataSource1" 
                          OnRowCreated="grvMergeHeader_RowCreated">
                  <FooterStyle BackColor="Tan" />
                  <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                  <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" 
                          HorizontalAlign="Center" />
                  <HeaderStyle BackColor="Tan" Font-Bold="True" />
                  <AlternatingRowStyle BackColor="PaleGoldenrod" />
                <Columns>
                    <asp:BoundField DataField="DepartMentID" 
                                    HeaderText="DepartMentID" 
                                    SortExpression="DepartMentID" />
                    <asp:BoundField DataField="DepartMent" 
                                    HeaderText="DepartMent" 
                                    SortExpression="DepartMent" />
                    <asp:BoundField DataField="Name" 
                                    HeaderText="Name" 
                                    SortExpression="Name" />
                    <asp:BoundField DataField="Location" 
                                    HeaderText="Location" 
                                    SortExpression="Location" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                SelectCommand="SELECT [DepartMentID], [DepartMent], [Name], [Location] FROM [Employee]">
            </asp:SqlDataSource>
            &nbsp;</div>
        </form>
    </body>
    </html>

    Code behind:

    protected void grvMergeHeader_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);
                TableCell HeaderCell = new TableCell();
                HeaderCell.Text = "Department";
                HeaderCell.ColumnSpan = 2;
                HeaderGridRow.Cells.Add(HeaderCell);
    
                HeaderCell = new TableCell();
                HeaderCell.Text = "Employee";
                HeaderCell.ColumnSpan = 2;
                HeaderGridRow.Cells.Add(HeaderCell);
    
                grvMergeHeader.Controls[0].Controls.AddAt(0, HeaderGridRow);
    
            } 
        }

     OutPut Image :

    Tuesday, June 11, 2019 8:30 AM
  • User-2006371901 posted

    A lot of code to just merely put title text on top of your gridview, but there are other things you can do with onRowCreated, so it can come in handy when developing robust gridviews. 
    In the asp:Gridview property lineup, need to add : 

    ....

    onrowcreated ="mygview_RowCreated"
    ....

    ...or whatever you name your method.

    thanks

    Ned

    Tuesday, June 11, 2019 2:46 PM