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>
can give a button 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-A-Column";
} else {
for (i = 0; i < ctr.length; i++)
{
var tr = Ctr.item (i);
Tr.cells[0].classname = ' '
}
Button.innertext = "Lock-A-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);
}
/* Locks table header Here is the head of the table is not moving, to the head of the table to move that note!*/
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 who 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
