SCROLLABLE DATAGRID:
Default, datagrid webserver control doesn’t have any feature of scrolling. This is achievable with the help of using CSS “Overflow” attribute.
Wrap the datagrid declaration inside the DIV tag, as follows
<div style="vertical-align top; height: 152px; overflow:auto; width:800px;”>
<asp:DataGrid runat=”server” …>
…
</asp:DataGrid>
</div>
The above code creates an area (the div) with fixed height of 152 pixels that automatically creates a scrollbar (overflow:auto style) if the content exceeds the height or width of the object.
The overflow attribute should be set either to auto or scroll. Auto displays a scrollbar only if content of the DataGrid extends beyond the specified height. With scroll, the scrollbar is displayed regardless of whether the DataGrid's height exceeds the specified height.
With Fixed Header:
The only problem is that this makes the entire DataGrid scroll, including its header. To resolve this, we need to hide the DataGrid’s headers. This can be done by setting “ShowHeader” property of DataGrid to false. Then create an HTML table above the Scrollable DataGrid’s Div tab which displays the header row.
The code shows for fixed header.
<div>
<table border="1" cellspacing="0" style="WIDTH:800px;BORDER-COLLAPSE:collapse">
<tr class="tableHeader" bgcolor="#aaaadd" BorderColor="black">
<td style="WIDTH:200px">ColumnHeader1</td>
<td style="WIDTH:200px"> ColumnHeader2</td>
<td style="WIDTH:200px"> ColumnHeader3</td>
<td style="WIDTH:200px"> ColumnHeader4</td>
</tr>
</table>
</div>
<div style=" OVERFLOW: auto; WIDTH: 800px; HEIGHT: 152px">
<asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False" ShowHeader="False">
<Columns>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" taField="ColHeader1">
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" taField="ColHeader2">
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" DataField=" ColHeader3" >
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" DataField=" ColHeader4" >
</asp:boundcolumn>
</Columns>
</asp:DataGrid>
</div>
If the header doesn’t lineup with the DataGrid column, we need to change the width of the DataGrid to include the Scroll bar size but will again be offset if scrollbars are not needed. To overcome, set the overflow setting always as “scroll”.
|
No responses found. Be the first to respond and make money from revenue sharing program.
|