Solved

Fixed header row

Posted on 2007-11-19
5
1,519 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
Comment Utility
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
Comment Utility
0
 

Author Comment

by:tgatif
Comment Utility
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
Comment Utility
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
Comment Utility
why the hell you are asking question after you accept yourself as a answer? make sense?
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

743 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

16 Experts available now in Live!

Get 1:1 Help Now