Home » Asp.netRSS

gridview header formatting

Hi,

Using C# to develop a web application. Have a gridview to display data from the a sql table.

The headers of the gridview is achieve using a table. Need to format the header cells to align with the columns of the gridview.

Currently I'm using a trial an error method to set the width of the header to align with the gridview columns. Can I align the Table header to concide with the gird view column width progarmatically?


Here is my ASPX code

<div id="ProjectTableHeader" runat="server"
        style="background-color: #993300; height: 40px; width: 300; margin: 0; padding: 0">
        <table cellspacing="0" cellpadding="0" rules="all" border="1" id="tblHeader" style="font-family: Arial;font-size: 10pt; width: 300; color: white; border-collapse: collapse; height: 100%;">
            <tr>
                <td style="width: 64px; text-align: center">
                    Project Owner
                </td>
                <td style="width: 102px; text-align: center">
                    State
                </td>
                <td style="width: 102px; text-align: center">
                    County
                </td>
                <td style="width: 102px; text-align: center">
                    Project Name
                </td>
                <td style="width: 102px; text-align: center">
                    Quarter
                </td>
                <td style="width: 102px; text-align: center">
                    Manager
                </td>
                <td style="width: 102px; text-align: center">
                    Comments
                </td>                
            </tr>
        </table>
    </div>
<div  id="ProjectTable" runat="server" style="width: 560px; height: 400px; overflow: auto">
        <asp:GridView ID="grdSummary" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84"
            BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2"
            Font-Size="XX-Small"  ShowHeader="False" AutoGenerateColumns="False" >
            <Columns>
                
                <asp:BoundField ItemStyle-Width="100px" DataField="Project Owner">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField ItemStyle-Width="100px" DataField="State">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField ItemStyle-Width="100px" DataField="County">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField ItemStyle-Width="100px" DataField="Project Name">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField ItemStyle-Width="100px" DataField="Quarter">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField ItemStyle-Width="100px" DataField="Manager">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField ItemStyle-Width="100px" DataField="Comments">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>            
                </Columns>
            <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
            <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        </asp:GridView>
    </div>


Here is my .cs code

void Display()
    {
        DBConnect db = new DBConnect();
        DataSet ds = new DataSet();
        string sql = "Select * from Project";

        ds = db.getDataForgrid(sql);
        DataTable dt = ds.Tables[0];

        grdSummary.DataSource = dt;
        grdSummary.DataBind();

     }


Any suggestions how I can achieve this?


Thanks

 

4 Answers Found

 

Answer 1

Try using  template fields and then you can use the headerTemplate property.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.templatefield.headertemplate.aspx

 

 

Answer 2

Yes, you can achieve  this, but you need to give fixed widths for all columns  in the header  as well as the gridview.

<div id="ProjectTableHeader" runat="server" style="background-color#993300height40px;
    
margin0padding0">
    <table cellpadding="3" cellspacing="2" rules="all" border="1" id="tblHeader" style="font-familyArial;
        
font-size10ptwidth670pxcolorwhiteborder-collapsecollapse;">
        <tr>
            <td style="width70pxtext-aligncenter">
                Project Owner
            </td>
            <td style="width100pxtext-aligncenter">
                State
            </td>
            <td style="width100pxtext-aligncenter">
                County
            </td>
            <td style="width100pxtext-aligncenter">
                Project Name
            </td>
            <td style="width100pxtext-aligncenter">
                Quarter
            </td>
            <td style="width100pxtext-aligncenter">
                Manager
            </td>
            <td style="width100pxtext-aligncenter">
                Comments
            </td>
        </tr>
    </table>
</div>
<div id="ProjectTable" runat="server" style="table-layoutfixedheight400px;
    
overflowauto">
    <asp:GridView ID="grdSummary" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84"
        GridLines="None" BorderStyle="None" BorderWidth="1px" CellPadding="1" CellSpacing="2"
        Font-Size="XX-Small" ShowHeader="False" AutoGenerateColumns="False" Width="670px">
        <Columns>
            <asp:BoundField ItemStyle-Width="70px" DataField="Project Owner" />
            <asp:BoundField ItemStyle-Width="100px" DataField="State" />
            <asp:BoundField ItemStyle-Width="100px" DataField="County" />
            <asp:BoundField ItemStyle-Width="100px" DataField="Project Name" />
            <asp:BoundField ItemStyle-Width="100px" DataField="Quarter" />
            <asp:BoundField ItemStyle-Width="100px" DataField="Manager" />
            <asp:BoundField ItemStyle-Width="100px" DataField="Comments" />
        </Columns>
        <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
    </asp:GridView>
</div>

Try that and see if you the gridview  is aligned with the top header.

 

Answer 3

Your answer wprks fine.

Txs !!!


Couple of questions though...

1) What is the use of the java sript in the header?

<script type="text/javascript">
        function setWidth() {
            if (ProjectTable.scrollHeight > ProjectTable.clientHeight)
                tdPadding.style.display = 'block';
            else
                tdPadding.style.display = 'none';
        }
    </script>


2) What does the following line do?
ScriptManager.RegisterStartupScript(Page, typeof(Page), "scroll""setWidth();"true);

If I Don't have these also it runs fine.So was a bit curious .

 

Answer 4

Once, I had a similar requirement to implement gridview  with fixed header  without css.

By Default, scroll width  is 16px and when the gridview has more records scrollbar appears. Then, top header div layout changes and columns  won't be aligned. So, Idea is to show a blank column(width 16px) after comments  when there is a scroll. If there is no scroll, we need to hide that extra column.

shamsam:
 if (ProjectTable.scrollHeight > ProjectTable.clientHeight)

That line checks if the div has any scrollbar when content exceeds a given height. Then, blank column(tdPadding) in the header will be shown. So, that all columns in header as well as gridview will be aligned.

shamsam:
ScriptManager.RegisterStartupScript(Page, typeof(Page), "scroll""setWidth();"true);

After loading the GridView, you need to hide/show that extra column  which accounts for the scrollbar width. Otherwise, you may see mismatch in alignment of headers.

 
 
 

<< Previous      Next >>


Microsoft   |   Windows   |   Visual Studio   |   Follow us on Twitter