Solved

Fixed header row

Posted on 2007-11-19
5
1,521 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

863 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

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now