How to Freeze Grid View Header Row ?

Ranjeet_8
Posted by Ranjeet_8 under ASP.NET category on | Points: 40 | Views : 2943
Java Script

<script language="javascript" type="text/javascript">
function CreateFixGridHeader(DivGridViewData, GridView1, FixHeaderDiv)
{
var ObjDivGVData = document.getElementById(DivGridViewData);
var ObjGVdata = document.getElementById(GridView1);
var FixHeaderDivObj = document.getElementById(FixHeaderDiv);
//**** New table for header Row ****
var ObjHeaderTbl = FixHeaderDivObj.appendChild(document.createElement('table'));
ObjDivGVData.style.paddingTop = '0px';
var DivGridViewDataWidth = ObjDivGVData.clientWidth;
ObjDivGVData.style.width = '5000px';
FixHeaderDivObj.className = ObjDivGVData.className;
FixHeaderDivObj.style.cssText = ObjDivGVData.style.cssText;
FixHeaderDivObj.style.overflow = 'auto';
FixHeaderDivObj.style.overflowX = 'hidden';
FixHeaderDivObj.style.overflowY = 'hidden';
FixHeaderDivObj.style.height = ObjGVdata.rows[0].clientHeight + 'px';
FixHeaderDivObj.style.borderBottomWidth = '0px';
ObjHeaderTbl.className = ObjGVdata.className;
ObjHeaderTbl.style.cssText = ObjGVdata.style.cssText;
ObjHeaderTbl.border = '1px';
ObjHeaderTbl.rules = 'all';
ObjHeaderTbl.cellPadding = ObjGVdata.cellPadding;
ObjHeaderTbl.cellSpacing = ObjGVdata.cellSpacing;

//**** Creating New header Row ****
var NewHeaderRow = ObjHeaderTbl.insertRow(0);
NewHeaderRow.className = ObjGVdata.rows[0].className;
NewHeaderRow.style.cssText = ObjGVdata.rows[0].style.cssText;
NewHeaderRow.style.fontWeight = 'bold';

//**** Loop will create each header cell *****
for(var Counter =0; Counter < ObjGVdata.rows[0].cells.length; Counter++)
{
var spanTag = NewHeaderRow.appendChild(document.createElement('td'));
spanTag.innerHTML = ObjGVdata.rows[0].cells[Counter].innerHTML;
var width = 0;
//**** Setting d width of Header Cells ****
if(spanTag.clientWidth > ObjGVdata.rows[1].cells[Counter].clientWidth)
{
width = spanTag.clientWidth;
}
else
{
width = ObjGVdata.rows[1].cells[Counter].clientWidth;
}
if(Counter<=ObjGVdata.rows[0].cells.length-2)
{
spanTag.style.width = width + 'px';
}
else
{
spanTag.style.width = width + 20 + 'px';
}
ObjGVdata.rows[1].cells[Counter].style.width = width + 'px';
}
var tableWidth = ObjGVdata.clientWidth;
//**** Hidding d original header of GridView ****
ObjGVdata.rows[0].style.display = 'none';
//**** Setting d same width of all d GridView Data ****
FixHeaderDivObj.style.width = DivGridViewDataWidth + 'px';
ObjDivGVData.style.width = DivGridViewDataWidth + 'px';
ObjGVdata.style.width = tableWidth + 'px';
ObjHeaderTbl.style.width = tableWidth + 20 + 'px';
return false;
}
function DIVOnscroll()
{
var GridViewDiv = document.getElementById('DivGridViewData');
var FixDiv = document.getElementById('FixHeaderDiv');
FixDiv.scrollLeft = GridViewDiv.scrollLeft;
return false;
}
</script>

Add this on .ASPX Design Page

<div>
<div id="FixHeaderDiv">
</div>
<div id="DivGridViewData" style="border: 1px solid olive; width: 450px; height: 250px;overflow: auto;" onscroll="DIVOnscroll();">
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="true" CellPadding="4" >
</asp:GridView>
</div>
<asp:Button ID="Button1" runat="server" Height="39px"
style="top: 344px; left: 15px;position:absolute;"
Text="Click Me to Display Grid Data" onclick="Button1_Click" />
</div>

Add this on .CS page

protected void Page_Load(object sender, EventArgs e)
{
if (GridView1.Rows.Count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateFixGridHeader", "<script>CreateFixGridHeader('DivGridViewData', 'GridView1', 'FixHeaderDiv');</script>");
}
}
protected void Button1_Click(object sender, EventArgs e)
{
// Create Your Connection String here.
string sqlQuery = "SELECT * FROM CUSTOMERS";
SqlDataAdapter da = new SqlDataAdapter(sqlQuery, YourConnectionString);
DataSet ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds.Tables[0];
GridView1.DataBind();
ClientScript.RegisterStartupScript(this.GetType(), "CreateFixGridHeader", "<script>CreateFixGridHeader('DivGridViewData', 'GridView1', 'FixHeaderDiv');</script>");
}

Comments or Responses

Posted by: Datta89 on: 6/27/2013 Level:Starter | Status: [Member] | Points: 10
Hi Ranjeet

You code not working on IE9 and it will not display Header Row i want a my gridview header fixed when scrolling and that header row will not goes outside the gridview.

Thanks.

Login to post response