Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1559
  • Last Modified:

Fixed header row

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
tgatif
Asked:
tgatif
  • 2
  • 2
1 Solution
 
Munawar HussainPrincipal Software EngineerCommented:
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
 
nisarkhanCommented:
0
 
tgatifAuthor Commented:
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
 
tgatifAuthor Commented:
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
 
nisarkhanCommented:
why the hell you are asking question after you accept yourself as a answer? make sense?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now