Solved

Fixed header row

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Hide un-named HTML Label with CSS 14 36
IEnumerable<T> to a List<T> 8 40
Testing of the web services 1 35
Fix Form size HTML 16 15
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 …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 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