Scroll box with "locked" header on DataGrid 1

[Isadore]

Some time back jfrost, Zarcom et al. discussed a technique whereby a datagrid could be scrolled in a scroll box instead of scrolling the entire page; a nice technique. The code is simply:

<div style=&quot;OVERFLOW: auto; HEIGHT: 500px&quot;>
<aspataGrid id=&quot;dgMyGrid&quot;...
<Columns>
...
</Columns>
</aspataGrid>
</div>

..where the division tags take care of it. Now the question. To take this technique one step further, and to be a superior method over scrolling the entire html page for a datagrid, would be to combine this technique with &quot;locking&quot; the header column of the datagrid while the rows scrolled underneath it. In this way this technique would be much preferred over page scrolling, otherwise, there is not a great advantage to it.

No rush. Just thought I'd post the idea and put it out there.

 

[link9]

Consider the following bit of UI code (which is going to get mangled by the forum here). It's a simple list of employees at a company with First Name, Last Name, empID, and Initials:

<table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; width=300>
	<tr>
		<td bgcolor=&quot;lightsteelblue&quot; style=&quot;font-size:x-small;width:75px&quot;>First Name</td>
		<td bgcolor=&quot;lightsteelblue&quot; style=&quot;font-size:x-small;width:75px&quot;>Last Name</td>
		<td bgcolor=&quot;lightsteelblue&quot; style=&quot;font-size:x-small;width:75px&quot;>Employee ID</td>
		<td bgcolor=&quot;lightsteelblue&quot; style=&quot;font-size:x-small;width:75px&quot;>Initials</td>
	</tr>
	<tr>
		<td colspan=&quot;4&quot;>
			<div style=&quot;height:100px;overflow:auto;width:300px;&quot;>
				<asp:datagrid id=&quot;Datagrid1&quot; runat=&quot;server&quot; AutoGenerateColumns=&quot;False&quot; CellPadding=&quot;0&quot; ShowHeader=&quot;False&quot; Width=&quot;100%&quot;>
					<AlternatingItemStyle Font-Size=&quot;X-Small&quot; HorizontalAlign=&quot;Center&quot; BackColor=&quot;WhiteSmoke&quot; Width=75></AlternatingItemStyle>
					<ItemStyle Font-Size=&quot;X-Small&quot; HorizontalAlign=&quot;Center&quot; Width=75></ItemStyle>
					<HeaderStyle Font-Size=&quot;X-Small&quot; Font-Bold=&quot;True&quot; HorizontalAlign=&quot;Center&quot; BackColor=&quot;LightSteelBlue&quot;></HeaderStyle>
					<Columns>
						<asp:BoundColumn DataField=&quot;fName&quot; HeaderText=&quot;First Name&quot;></asp:BoundColumn>
						<asp:BoundColumn DataField=&quot;lName&quot; HeaderText=&quot;Last Name&quot;></asp:BoundColumn>
						<asp:BoundColumn DataField=&quot;empID&quot; HeaderText=&quot;Employee ID&quot;></asp:BoundColumn>
						<asp:BoundColumn DataField=&quot;initials&quot; HeaderText=&quot;Initials&quot;></asp:BoundColumn>
					</Columns>
				</asp:datagrid>
			</div>
		</td>
	</tr>
</table>

Making the actual header on a datagrid stationary (at least as far as I know) is impossible. However, as in every other case, there is a workaround.

As shown, you create the header yourself as the first row in a table, and insert the datagrid (with no header) into the second row along with the scrolling div.

Getting the column widths perfect is a real headache (if you take my example, it is close, but no cigar), but with more time spent tweaking, it would be perfect.

To get this example to work, simply bind a valid datasource to it, and spend more time than I have at the moment to get the column widths to match up (I still have issues with getting datagrid columns to do what I say).

Good Question!
paul

The answer to getting answered -- faq855-2992

 

[Isadore]

Paul -

Thanks. I was thinking in this direction, but was thinking of loading a &quot;columnless&quot; grid followed by a &quot;headerless&quot; grid.

Didn't dawn on me to use a nested DataGrid. I'll work on this and then post the final results.

Yes, if you can add a &quot;scroll box&quot; with a &quot;locked header&quot; then you have something kinda neat - at least I can use it right away. Thanks for the input Paul.

1/2 of the star if for you, 1/4 for jfrost for initiating, and 1/4 for Zarcom for improving. Thanks.