ASP.NET 3.5 interview question: Scrollable DataGrid

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>

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

<%@ Page Language="VB" %>

<html>

 <head>

    <script language="VB" runat="server">

    Sub Page_Load(Sender As Object, e As EventArgs)

        If Not IsPostBack Then

            Dim values As New ArrayList()

            values.Add(New PositionData("Microsoft", "Msft"))

            values.Add(New PositionData("Intel", "Intc"))

            values.Add(New PositionData("Dell", "Dell"))

            myDataGrid.DataSource = values

            myDataGrid.DataBind()

        End If

        ' add a client click event to the button

        Button1.Attributes.Add("OnClick", "button=this.value")

        'Create and register delete confirmation script

        'Only check for delete when a button labeled Delete Company is pressed

        Dim myScript As String

        myScript = "<script language=Javascript>var button;<"

        myScript += "/"

        myScript += "script>"

        Page.RegisterClientScriptBlock("definebutton", myScript)

        Page.RegisterOnSubmitStatement("OnSubmit", "if(button == 'Delete Company'){return confirm('Are you Sure you want to delete this company?') }else ")

    End Sub

    Public Class PositionData

        Private myName As String

        Private myTicker As String

        Public Sub New(newName As String, newTicker As String)

            Me.myName = newName

            Me.myTicker = newTicker

        End Sub

        Public ReadOnly Property Name() As String

Get

                Return myName

            End Get

        End Property

        Public ReadOnly Property Ticker() As String

Get

                Return myTicker

            End Get

        End Property

    End Class

    Sub MyDataGrid_Delete(Sender As Object, E As DataGridCommandEventArgs)

        Label1.Text = "HEY, you can't delete " & MyDataGrid.DataKeys(CInt(E.Item.ItemIndex)) & "!"

    End Sub

    Sub MyDataGrid_ItemCreated(Sender As Object, e As DataGridItemEventArgs)

        Select Case e.Item.ItemType

            Case ListItemType.Item, ListItemType.AlternatingItem, ListItemType.EditItem

               Dim myTableCell As TableCell

               myTableCell = e.Item.Cells(0)

                Dim myDeleteButton As Button

                myDeleteButton = myTableCell.Controls(0)

                myDeleteButton.Attributes.Add("OnClick","button=this.value")

        End Select

    End Sub

 </script>

 </head>

 <body>

    <asp:Label id="Label1" runat="Server" />

    <form runat=server>

       <asp:DataGrid id="myDataGrid"

           DataKeyField="Name"

           AutoGenerateColumns="True"

           OnDeleteCommand="MyDatagrid_Delete"

           OnItemCreated="MyDataGrid_ItemCreated"

           runat="server">

        <Columns>

               <asp:ButtonColumn Text="Delete Company" CommandName="Delete" ButtonType="PushButton"/>

        </Columns>

       </asp:DataGrid>

<p>

       <asp:TextBox id="TokenTextBox" runat="Server" Columns="40" Text="The required field validator will not fire" />

       <asp:RequiredFieldValidator Display="dynamic" id="TokentValidator" runat="Server" ControlToValidate="TokenTextBox" ErrorMessage="Please enter some text" /><br>

       <asp:Button id="Button1" runat="Server" Value="Validate" Text="Fire Validator Control" />

    </form>

 </body>

 </html>

Windows Live Spaces is here! It's easy to create your own personal Web site. Check it out!

Scrollable DataGrid

Scrollable DataGrid

Scrollable DataGrid with Fixed Header

No comments: