CODEWITHSUNDEEP
c#cssasp.netgridview
Indianaadmin stopstuck
Indianaadmin stopstuck

Reputation: 159

Trying to underline the headertext in this gridview

I am trying to underline the entire header text so that it looks like the picture below (labelled as "trying to make it look like"). But it will not carry a consistent underline throughout the entirety of the header text(s). Thanks for your help.

The part of the picture that states: "Trying to make it look like" is what I want it to look like The part of the picture that states: "looks like currently" is what it currently looks like.

Code is attached below

enter image description here

  <asp:GridView runat="server" ID="grdvwDepositTransaction"
                AutoGenerateColumns="false" DataKeyNames="Status"
                OnRowCommand="grdvwDepositTransaction_RowCommand" ShowHeaderWhenEmpty="true" OnRowDataBound="grd_RowDataBound"
                CssClass="grid">

               <Columns>
                  <asp:TemplateField>
              <ItemTemplate>

              </ItemTemplate>
               </asp:TemplateField>

                  <asp:BoundField DataField="DepositEntry.cardNumber" HeaderText="Card Number" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.accountNumber" HeaderText="Account Number" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.firstName" HeaderText="Customer Name" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.transactionDateTime" HeaderText="Transaction Date/Time" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.cashAmount" HeaderText="Cash Amount" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.depositAmount" HeaderText="Envelope Deposit Amount" ItemStyle-CssClass="mediumColumn columnCenter" />
               </Columns>
                    <EmptyDataTemplate>
                        <br />
                         <br /><br />
                        <span style="font-weight: bold; text-anchor:middle;">No Transactions have been entered</span>
                            </EmptyDataTemplate>                   
                           </asp:GridView>









  <table class="grid" cellspacing="0" rules="all" border="1"      id="MainContent_grdvwDepositTransaction" style="border-collapse:collapse;">
    <tr style="text-decoration:underline;">
        <th scope="col">&nbsp;</th><th scope="col">Card Number</th><th scope="col">Account Number</th><th scope="col">Customer Name</th><th scope="col">Transaction Date/Time</th><th scope="col">Cash Amount</th><th scope="col">Envelope Deposit Amount</th>
    </tr><tr>
        <td colspan="7">
                        <br />
                         <br />
                        <br />
                        <span style="font-weight: bold; text-anchor:middle;">No Transactions have been entered</span>
                    </td>
    </tr>
</table>


               <br />

                </div>

          </div>

Upvotes: 0

Views: 2186

Answers (3)

Arindam Nayak
Arindam Nayak

Reputation: 7462

I agree, you can do it with CSS. But if you are interested in doing it programatically from server side, i can help you on this.

  1. Define row_databound event like following. OnRowDataBound="gvw_RowDataBound"
  2. Then on server side, if you find header row,

Next do the following.

  • create a extra row,
  • set colspan = cells count
  • add required html, in this case <hr />
  • then just append that extra row to header row.

Full code .

protected void gvw_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        GridViewRow extraRow = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);
        TableCell tc = new DataControlFieldCell(((DataControlFieldCell)e.Row.Cells[0]).ContainingField);
        tc.Text = "<hr/>";
        tc.ColumnSpan = e.Row.Cells.Count;
        extraRow.Cells.Add(tc);
        e.Row.Parent.Controls.AddAt(1, extraRow);
    }
}

SOURCE - http://forums.asp.net/p/1534978/3725419.aspx#3725419

Hope, this will be helpful, in other way ( in case some one wants to add any custom html)!

Upvotes: 1

NETRookie
NETRookie

Reputation: 86

Before your Columns Tag add this:

<HeaderStyle CssClass="HeaderTemplate" />

on your CSS code, add this:

.HeaderTemplate {
    border-bottom: 2px solid black;
}

Upvotes: 0

DavidG
DavidG

Reputation: 118987

This CSS will give a bottom border to the first tr of a table with grid class:

table.grid tr:first-of-type {
    border-bottom: 5px solid black;
}

Upvotes: 1

Related Questions