MSDN India - Article

Click Here to Install Silverlight

India

Change

Creating a Scrollable DataGrid Web Server Control

By Saravana

Article

Posted: June 24, 2003

Introduction

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,

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/overflow.asp

Code snippet for scrollable DataGrid is,

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>

            <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>

</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.

Conclusion

Scrollable DataGrid can be created by placing DataGrid inside a Div tag whose overflow property might be auto or scroll. If we want to have fixed header in this type, then we need to create header on our own and we need to set ShowHeader property of DataGrid to False. Both these methods will work only in modern browsers (higher versions only). If this is not a problem, then you can implement this Scrollable DataGrid in your web page.

Download the source code

Manage Your Profile |Contact us