Solved

Fixed header row

Posted on 2007-11-19
5
1,526 Views
Last Modified: 2008-05-22
I need to display a large amount of data with a fixed header row. The table needs to scroll vertically and horizontally. Basically, it should behave like this example: http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

I've used the same method as the code in the example, however, what the example lacks is variable width columns. As soon as I set a column width to 50px (for example), the header row stops scrolling horizontally with the data and overflows past the table on the right.

I've looked at several other methods and they're all missing horizontal scrolling or variable width columns.

See the code below, I've stripped the data from the table so when testing, add several more rows to get it to scroll vertically. Any help would be greatly appreciated. Thanks
Here is my stylesheet:
div.grid-container
{
	overflow: auto;
}
 
.grid
{
	table-layout: fixed;
	border-collapse: collapse;
	background-color: #FFFFCC;
}
 
div.grid-container table tr.grid-header td,div.grid-container table tr.grid-header th
{
	overflow:hidden;
}
 
tr.grid-header th, tr.grid-header th.locked, tr.grid-header td, tr.grid-header td.locked, thead th, thead th.locked
{
	position: relative;
}
	
tr.grid-header th, tr.grid-header td, thead th 
{
	top: expression(document.getElementById("grid-container").scrollTop-2); /*IE5+ only*/
	z-index: 190;
}
 
tr.grid-header th.locked, tr.header td.locked, thead th.locked
{
	z-index: 30;
}
 
td.locked,  th.locked
{
	font-weight: bold;
	border-right: 1px solid black;
	left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/
	position: relative;
	z-index: 10;
}
 
 
 
relevant html:
 
        <div id="grid-container" class="grid-container" style="width:98%; height:400px">
            <table class="grid" cellspacing="0" rules="all" border="1" id="grdOrders" style="border-collapse:collapse;">
	<tr class="grid-header">
		<th scope="col" style="width:80px;"><input name="grdOrders$ctl01$txtOrderNo             " type="text" id="grdOrders_ctl01_txtOrderNo             " style="width:80px;" /><span><br />Order                         </span></th>
		<th scope="col" style="width:20px;"><input name="grdOrders$ctl01$txtOrderTy             " type="text" value="SO" id="grdOrders_ctl01_txtOrderTy             " style="width:20px;" /><span><br />Type                          </span></th>
		<th scope="col" style="width:20px;"><input name="grdOrders$ctl01$txtHoldCode            " type="text" id="grdOrders_ctl01_txtHoldCode            " style="width:20px;" /><span><br />Hold                          </span></th>
		<th scope="col" style="width:80px;"><input name="grdOrders$ctl01$txtSoldToNo            " type="text" id="grdOrders_ctl01_txtSoldToNo            " style="width:80px;" /><span><br />Sold To                       </span></th>
		<th scope="col" style="width:300px;"><input name="grdOrders$ctl01$txtSoldToDesc          " type="text" id="grdOrders_ctl01_txtSoldToDesc          " style="width:300px;" /><span><br />Name                          </span></th>
		<th scope="col" style="width:200px;"><select name="grdOrders$ctl01$lstDateRequested       " id="grdOrders_ctl01_lstDateRequested       " style="width:200px;"></select><span><br />Reqd Date                     </span></th>
		<th scope="col" style="width:200px;"><select name="grdOrders$ctl01$lstDateTransaction     " id="grdOrders_ctl01_lstDateTransaction     " style="width:200px;"></select><span><br />Trans Date                    </span></th>
		<th scope="col" style="width:250px;"><select name="grdOrders$ctl01$lstItem                " id="grdOrders_ctl01_lstItem                " style="width:250px;"></select><span><br />Item                          </span></th>
		<th scope="col" style="width:200px;"><select name="grdOrders$ctl01$lstLotNo               " id="grdOrders_ctl01_lstLotNo               " style="width:200px;"></select><span><br />Lot Number                    </span></th>
		<th scope="col" style="width:120px;"><select name="grdOrders$ctl01$lstBranch              " id="grdOrders_ctl01_lstBranch              " style="width:120px;"></select><span><br />Branch                        </span></th>
	</tr>
	<tr>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;">SO</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;"></span></td>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:300px;"><span style="display:inline-block;width:300px;">My Customer</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;">01/01/06</span></td>
		<td style="width:250px;"><span style="display:inline-block;width:250px;">asdfasdfasdf</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:120px;"><span style="display:inline-block;width:120px;">1234</span></td>
	</tr>
	<tr>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;">SO</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;"></span></td>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:300px;"><span style="display:inline-block;width:300px;">My Customer</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;">01/01/06</span></td>
		<td style="width:250px;"><span style="display:inline-block;width:250px;">asdfasdfasdf</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:120px;"><span style="display:inline-block;width:120px;">1234</span></td>
	</tr>
	<tr>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;">SO</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;"></span></td>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:300px;"><span style="display:inline-block;width:300px;">My Customer</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;">01/01/06</span></td>
		<td style="width:250px;"><span style="display:inline-block;width:250px;">asdfasdfasdf</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:120px;"><span style="display:inline-block;width:120px;">1234</span></td>
	</tr>
	<tr>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;">SO</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;"></span></td>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:300px;"><span style="display:inline-block;width:300px;">My Customer</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;">01/01/06</span></td>
		<td style="width:250px;"><span style="display:inline-block;width:250px;">asdfasdfasdf</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:120px;"><span style="display:inline-block;width:120px;">1234</span></td>
	</tr>
</table></div>

Open in new window

0
Comment
Question by:tgatif
  • 2
  • 2
5 Comments
 
LVL 12

Expert Comment

by:needo_jee
ID: 20314102
Hi dear friend,

I used a way to achieve above functionality but not sure if you want exactly the same.

you need to use a table as header of grid like first get all the headers for grid and file the row of a table with headers and then in next row of the table place your datagrid but disable the header for DataGrid(as you have already created header)
then use the overflow property of div (sorry forget to mention above that you need to put header in a table and the grid in a div)

here is working sample for that
http://www.aspnetpro.com/NewsletterArticle/2003/09/asp200309mb_l/asp200309mb_l.asp

thanks
0
 
LVL 7

Expert Comment

by:nisarkhan
ID: 20314107
0
 

Author Comment

by:tgatif
ID: 20314251
needo jee:
This does not like the example I provided. These are the requirements:
1. Header needs to stay at the top while scrolling vertically
2. Header needs to scroll with data while scrolling horizontally (so field names stay above the appropriate column)
3. Columns need to be variable width (for example, first column is 80px, second is 140px etc)
4. Needs to work in IE at least (FF would be a plus).

nisarkhan:
The post you linked lists 2 solutions. The first seems incomplete and the second behaves like my current solution. Please be more specific.

Thanks,
0
 

Accepted Solution

by:
tgatif earned 0 total points
ID: 20328738
After a bit of tinkering, I've noticed my solution works if you take out the DOCTYPE declaration that ASP.NET automatically adds. Obviously we would like to stay within the transitional standards. Any ideas?
0
 
LVL 7

Expert Comment

by:nisarkhan
ID: 21623041
why the hell you are asking question after you accept yourself as a answer? make sense?
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question