Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
 New Feature: Community Sites:
Create your own .NET community website and start earning from Google AdSense !
It's Free !
|
Creating a Scrollable DataGrid Web Server Control
|
Introduction
A most common question in many of the newsgroups and message board is “how to have 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,
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/overflow.asp
<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>
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" DataField="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>
Unfortunately, if you will try the above code, 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>
Summary
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.
|
Responses
|
No responses found. Be the first to respond and make money from revenue sharing program.
|
|