Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Microsoft: ASP.NET FAQ

ASP.NET Forum General Use

Datagrid: Matching header widths to column widths by dpdoug
Posted: 9 Aug 04

I use scrolling datagrids very frequently so I need to make the a custom header to be independent from the datagrid. The problem is getting the widths of header columns the same as the DataItem column widths.

The problem is that depending on what data is filtered into the grid, the widths of the grid can vary and the header widths not. I have mainly just made a close estimate in percentages and the columns usually more or less line up. But it's a lot of work guessing and trying till I finally get columns more or less lined up.

But I found a way to get around this problem:

Use fixed width columns and headers.

This will not work in every case since some columns could vary greatly, but even then the cells could be configured to wrap if the length is longer than the fixed width of the cell.

1) After you have built your scrolling grid and header, run it to see what the widths of the dataItem columns will be like.

2) Take a ruler with milimeters on it. Measure each column width and multiply the milimeters by 3. This will give you the width of the columns in pixels for each column header.

- Be sure to add an extra header cell to compensate for the area reserved for the scroll bar.

- The total of the header cell widths should be the same as the width of the grid plus the area reserved for the scroll bar.

<TH width="132px"><A class=sorthead onclick="SetSource('u.LastAction')" href="#" >Last Action</A></TH>

3) Set the width of each column in pixels in the ItemStyle tag of the DataGrid to the same width as the column header width:

<ItemStyle HorizontalAlign="Left" Width="132px">

4) The last thing to do is turn off the header to the DataGrid:


NOTE: If you have any columns that could possibly vary greatly in width set Wrap to true. Fields like dates, phone numbers and some types of numbers are likely to always be the same width. But if there are some numbers that could possibly get real long, you don't want to wrap those, so make sure those are wide enough to accomodate.

I noticed the other day that someone had a question about this, so I believe that this tip may benefit a few others also. I've been benefitted greatly from these forums, so I hope to be giving back something to help others.

happy programming!


Back to Microsoft: ASP.NET FAQ Index
Back to Microsoft: ASP.NET Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close