A most common question in many of the newsgroups and message board is “how to have a scrollable DataGrid” in a web page. In this article we are going to see how to create a scrollable DataGrid in a web page. By default DataGrid (Web Server control) doesn’t provide any features for scrolling. But this can be done with help of Cascading Style Sheet (CSS). CSS contains a property called “Overflow” which can used for this purposes.
Scrollable DataGrid
You can add a vertical scrollbar to a DataGrid by placing the DataGrid within a div tag with a fixed height and Overflow property. Overflow property is to manage the content of the object when the content exceeds the height or width of the object. So when the rows exceed your specified height a scrollbar will appear. The overflow attribute should be set either to auto or scroll. Auto displays a scrollbar only if the content is clipped (that is, the DataGrid extends beyond the specified height). With scroll, the scrollbar is displayed regardless of whether the DataGrid's height exceeds the specified height. For more details on Overflow property,
Code snippet for scrollable DataGrid is,
<div style="vertical-align top; height: 152px; overflow:auto;width:800px;">
<asp:DataGrid id="DataGrid1" runat="server" SelectedItemStyle-BackColor="#99ccff"
PagerStyle-Visible="False" PageSize="10" ItemStyle-CssClass="tableItem" HeaderStyle-
CssClass="tableHeader" HeaderStyle-BackColor="#aaaadd" BorderColor="black"
AutoGenerateColumns="False" DataKeyField="CustomerID" ShowHeader=True >
<Columns>
<asp:templatecolumn headertext="Row Number" ItemStyle-Width="200px" >
<itemtemplate>
<%# Container.ItemIndex+1 %>
</itemtemplate>
</asp:templatecolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server"
DataField="CompanyName" HeaderText="Company Name" >
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server"
DataField="ContactName" HeaderText="Contact Name" >
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server"
DataField="Address" HeaderText="Address" >
</asp:boundcolumn>
</Columns>
</asp:DataGrid>
</div>
If you see the code of the Scrollable DataGrid, DataGrid is placed within div tag. In the div tag we have explicitly mentioned the width and height of the DataGrid in pixels. If the DataGrid width and height exceeds div width and height. Then Scrollbar will appear in the web page since we mentioned Overflow property as auto. Web page will look like this,
Now we know how to create a scrollable DataGrid in a web page. However, when scrolling through the DataGrid, the header columns would not be visible, since they will also scroll along with other rows. Ideally, when displaying a scrollable DataGrid we want to have the header columns fixed, and only the body of the DataGrid scrolling.
Scrollable DataGrid with Fixed Header
Scrollable DataGrid with fixed header can be created in the same way like Scrollable DataGrid. This can be accomplished by having DataGrid within Div tag whose overflow attribute is set to auto or scroll. However to have fixed headers, what we can do is hide the Scrollable 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 column. In the HTML table, we will have only one row which will be the header for Scrollable DataGrid. Code for Scrollable DataGrid with fixed header is,
<div>
<table border="1" cellspacing="0" style="WIDTH:800px;BORDER-COLLAPSE:collapse">
<tr class="tableHeader" bgcolor="#aaaadd" BorderColor="black">
<td style="WIDTH:200px">
Row Number
</td>
<td style="WIDTH:200px">
Company Name
</td>
<td style="WIDTH:200px">
Contact Name
</td>
<td style="WIDTH:200px">
Address
</td>
</tr>
</table>
</div>
<div style=" OVERFLOW: auto; WIDTH: 800px; HEIGHT: 152px">
<asp:DataGrid id="DataGrid1" runat="server" SelectedItemStyle-BackColor="#99ccff" PagerStyle-
Visible="False" PageSize="10" ItemStyle-CssClass="tableItem" HeaderStyle-
CssClass="tableHeader" HeaderStyle-BackColor = "#aaaadd" BorderColor="black"
AutoGenerateColumns="False" DataKeyField="CustomerID" ShowHeader="False">
<Columns>
<asp:templatecolumn ItemStyle-Width="200px">
<itemtemplate>
<%# Container.ItemIndex+1 %>
</itemtemplate>
</asp:templatecolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" taField="CompName">
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" DataField="ContName" >
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" DataField="Address" >
</asp:boundcolumn>
</Columns>
</asp:DataGrid>
</div>
Note that first, a standard HTML table is used to display the values of the header. Then, a scrollable DataGrid is displayed, with its ShowHeader property set to False. The result is a scrollable DataGrid whose "header column" is fixed. Scrollable DataGrid will look like this,
Unfortunately, if you see the above figure, header doesn't line up perfectly with the DataGrid. This is because the displayed scrollbar pushes over the content of the DataGrid just a bit. If you remove the scrollbar from the DataGrid, then everything is perfect. This type of Scrollable DataGrid wont look good in a web page.
Only way to overcome this problem is by playing around the style properties of DataGrid. Mainly we need to change the width of the DataGrid to include the Scroll bar size. For example in this case, we need to increase the DataGrid width by 13 pixels which is the size of the Scroll bar. Then everything will be fine. Code for Scrollable DataGrid now is,
<div>
<table border="1" cellspacing="0" style="WIDTH:800px;BORDER-COLLAPSE:collapse">
<tr class="tableHeader" bgcolor="#aaaadd" BorderColor="black">
<td style="WIDTH:200px">
Row Number
</td>
<td style="WIDTH: 200px">
Company Name
</td>
<td style="WIDTH:200px">
Contact Name
</td>
<td style="WIDTH:200px">
Address
</td>
</tr>
</table>
</div>
<div style=" OVERFLOW: auto; WIDTH: 813px; HEIGHT: 152px">
<asp:DataGrid id="DataGrid1" runat="server" SelectedItemStyle-BackColor="#99ccff" PagerStyle-
Visible="False" PageSize="10" ItemStyle-CssClass="tableItem" HeaderStyle-
CssClass="tableHeader" HeaderStyle-BackColor="#aaaadd" BorderColor="black"
AutoGenerateColumns="False" DataKeyField="CustomerID" ShowHeader="False">
<Columns>
<asp:templatecolumn ItemStyle-Width="200px">
<itemtemplate>
<%# Container.ItemIndex+1 %>
</itemtemplate>
</asp:templatecolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" taField="CompName">
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" DataField="ContName" >
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" DataField="Address" >
</asp:boundcolumn>
</Columns>
</asp:DataGrid>
</div>
As you seen in the about code, only change is width of the DataGrid. Now the Scrollable DataGrid will look like this,
Recall that with the overflow: auto setting, the scrollbars only appear if the DataGrid exceeds beyond the specified height constraint. If you adjust the DataGrid width by 13 pixels then the "header column" and DataGrid will be nicely lined up if scrollbars are displayed, but will again be offset if scrollbars are not needed. One way to overcome this is to always have scrollbars displayed via the overflow: scroll setting.
