Asp.net gridview specifies a column to scroll

// Basic code design
<Div id = "div-datagrid">
<Asp: DataGrid id = "DataGrid1" runat = "server" CssClass = "Grid" UseAccessibleHeader = "True">
<AlternatingItemStyle CssClass = "GridAltRow"> </AlternatingItemStyle>
<ItemStyle CssClass = "GridRow"> </ItemStyle>
<Columns>
<Asp: BoundColumn DataField = "Name" HeaderText = "Name"
ItemStyle-Wrap = "False"> </asp: BoundColumn>
<Asp: BoundColumn DataField = "Address" HeaderText = "Address"
ItemStyle-Wrap = "False"> </asp: BoundColumn>
<Asp: BoundColumn DataField = "City" HeaderText = "City"
ItemStyle-Wrap = "False"> </asp: BoundColumn>
<Asp: BoundColumn DataField = "State" HeaderText = "State"
ItemStyle-Wrap = "False"> </asp: BoundColumn>
<Asp: BoundColumn DataField = "Zip" HeaderText = "Zip"
ItemStyle-Wrap = "False"> </asp: BoundColumn>
<Asp: BoundColumn DataField = "Random Babble"
HeaderText = "Random Babble"
ItemStyle-Wrap = "False"> </asp: BoundColumn>
</Columns>
</Asp: DataGrid>
</Div>

// A button can be used to trigger lockCol ('');
Function lockCol (tblID ){
Var table = document. getElementById (tblID );
Var button = document. getElementById ('toggle ');
Var cTR = table. getElementsByTagName ('tr'); // collection of rows
If (table. rows [0]. cells [0]. className = ''){
For (I = 0; I <cTR. length; I ++)
{
Var tr = cTR. item (I );
Tr. cells [0]. className = 'locked'
}
Button. innerText = "Unlock First Column ";
} Else {
For (I = 0; I <cTR. length; I ++)
{
Var tr = cTR. item (I );
Tr. cells [0]. className =''
}
Button. innerText = "Lock First Column ";
}
}





// Css style code
/* Div container to wrap the datagrid */
Div # div-datagrid {
Width: 420px;
Height: 200px;
Overflow: auto;
Scrollbar-base-color: # ffeaff;
}
/* Locks the left column */
Td. locked, th. locked {
Font-size: 14px;
Font-weight: bold;
Text-align: center;
Background-color: navy;
Color: white;
Border-right: 1px solid silver;
Position: relative;
Cursor: default;
/* IE5 + only */
Left: expression (document. getElementById ("div-datagrid"). scrollLeft-2 );
}
/* The Locks table header does not move the table header. If you want to move the table header, comment this section! */
Th {
Font-size: 14px;
Font-weight: bold;
Text-align: center;
Background-color: navy;
Color: white;
Border-right: 1px solid silver;
Position: relative;
Cursor: default;
/* IE5 + only */
Top: expression (document. getElementById ("div-datagrid"). scrollTop-2 );
Z-index: 10;
}
/* Keeps the header as the top most item. Important for top left item */
Th. locked {z-index: 99 ;}
/* DataGrid Item and AlternatingItem Style */
. GridRow {font-size: 10pt; color: black; font-family: Arial;
Background-color: # ffffff; height: 35px ;}
. GridAltRow {font-size: 10pt; color: black; font-family: Arial;
Background-color: # eeeeee; height: 35px ;}



/// Specify those that do not move!
Sub Item_Bound (ByVal sender As Object, ByVal e As DataGridItemEventArgs )_
Handles DataGrid1.ItemDataBound
E. Item. Cells (0). CssClass = "locked"
// E. Item. Cells (1). CssClass = "locked"
End Sub