Hi felipe.oli,
Refer the below code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.myGrid
{
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
}
.myGrid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
}
.myGrid th
{
padding: 4px 2px;
color: #fff;
background-color: #424242;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.myGrid .alt
{
background-color: #EFEFEF;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// here clone our gridview first
var tab = $("#<%=GridView1.ClientID%>").clone(true);
// clone again for freeze
var tabFreeze = $("#<%=GridView1.ClientID%>").clone(true);
// set width (for scroll)
var totalWidth = $("#<%=GridView1.ClientID%>").outerWidth();
var firstColWidth = $("#<%=GridView1.ClientID%> th:first-child").outerWidth();
tabFreeze.width(firstColWidth);
tab.width(totalWidth - firstColWidth);
// here make 2 table 1 for freeze column 2 for all remain column
tabFreeze.find("th:gt(0)").remove();
tabFreeze.find("td:not(:first-child)").remove();
tab.find("th:first-child").remove();
tab.find("td:first-child").remove();
// create a container for these 2 table and make 2nd table scrollable
var container = $('<table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top"><div id="FCol"></div></td><td valign="top"><div id="Col" style="width:320px; overflow:auto"></div></td></tr></table)');
$("#FCol", container).html($(tabFreeze));
$("#Col", container).html($(tab));
// clear all html
$("#gridContainer").html('');
$("#gridContainer").append(container);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="gridContainer">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CellPadding="5"
CssClass="myGrid" AlternatingRowStyle-CssClass="alt">
<Columns>
<asp:BoundField DataField="Table" HeaderText="Table" ItemStyle-Width="100px" />
<asp:BoundField DataField="Column1" HeaderText="Column1" ItemStyle-Width="150px" />
<asp:BoundField DataField="Column2" HeaderText="Column2" ItemStyle-Width="150px" />
<asp:BoundField DataField="Column3" HeaderText="Column3" ItemStyle-Width="150px" />
<asp:BoundField DataField="Column4" HeaderText="Column4" ItemStyle-Width="150px" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[5] {
new DataColumn("Table"), new DataColumn("Column1"), new DataColumn("Column2"), new DataColumn("Column3"), new DataColumn("Column4") });
dt.Rows.Add("Row1", "Value1", "Value2", "Value3", "Value4");
dt.Rows.Add("Row2", "Value1", "Value2", "Value3", "Value4");
dt.Rows.Add("Row3", "Value1", "Value2", "Value3", "Value4");
dt.Rows.Add("Row4", "Value1", "Value2", "Value3", "Value4");
dt.Rows.Add("Row5", "Value1", "Value2", "Value3", "Value4");
dt.Rows.Add("Row6", "Value1", "Value2", "Value3", "Value4");
dt.Rows.Add("Row7", "Value1", "Value2", "Value3", "Value4");
dt.Rows.Add("Row8", "Value1", "Value2", "Value3", "Value4");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
