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