|
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public partial class FrozenGridHeader : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataProvider objDataProvider = new DataProvider();
gvCustomers.DataSource = objDataProvider.GetCustomers();
gvCustomers.DataBind();
System.Web.HttpBrowserCapabilities browser = Request.Browser;
FreezeHeaderRowUponScroll();
}
private void FreezeHeaderRowUponScroll()
{
//NOTE: This JQuery script must be inserted at code-bebind to make sure dynamic loading is running fine, otherwise it doesn't take into effect for the subsequent postbacks.
string jQuery = @"
<script type=""text/javascript"">
var gridview_header_top_position = 0;
$(document).ready(function() {
$(window).scroll(function()
{
try{
var jHeaderRow = $('table.gridview_style tr th');
if(gridview_header_top_position == 0 && jHeaderRow.offset() != null)
gridview_header_top_position = jHeaderRow.offset().top;
if ($(window).scrollTop() >= gridview_header_top_position)
{
//Persist the value of the left, the width, the height and save them in the attribute
if(jHeaderRow.attr('scrolling') == null || jHeaderRow.attr('scrolling') == 'false')
{
//jHeaderRow.attr('orginal_vertical_align', jHeaderRow.css('vertical-align'));
if(jHeaderRow.attr('orginal_height') == null) //Make sure the attribute is assigned in one time deal.
jHeaderRow.attr('orginal_height', jHeaderRow.height());
jHeaderRow.each(function() {
var jHeaderCell = $(this);
if(jHeaderCell.attr('orginal_left') == null) //Make sure the attribute is assigned in one time deal.
{
var left = jHeaderCell.offset().left;
var browserInfo = navigator.userAgent.toLowerCase();
//The overlapping border between adjacent cells occurs.
//There is no absolute solution for that. Must apply the workaround for each browser.
if(browserInfo.indexOf('firefox') > -1) //For FireFox
{
jHeaderCell.attr('orginal_left', left - 1); //Must substract 1 pixel for FireFox
jHeaderCell.attr('orginal_width', jHeaderCell.width());
}
else
if(browserInfo.indexOf('ie') > -1 || browserInfo.indexOf('chrome') > -1 || browserInfo.indexOf('opera') > -1)
{
jHeaderCell.attr('orginal_left', left);
//For browswers Chrome, Opera: Add up 1 pixel for the header cell's width
jHeaderCell.attr('orginal_width', jHeaderCell.width() + 1);
}
else
{
jHeaderCell.attr('orginal_left', left);
jHeaderCell.attr('orginal_width', jHeaderCell.width());
}
}
});
//After setting row to be fixed, the 'vertical-align' doesn't work because now the cell becomes a DIV rather than a <TD>
//To fix this issue, must calculate the middle point and set the padding to that point.
var padding_top = jHeaderRow.attr('orginal_height')/2 - 6;
//Note that this above workaround should only apply if the header row's heigh is not large, then we cannot see the problem of vertical align
jHeaderRow.each(function() {
var jHeaderCell = $(this);
//var left = jHeaderCell.offset().left;
jHeaderCell.css('position', 'fixed');
jHeaderCell.css('top', '0px');
//Restore the left, the width and padding-top after changing cell's position
jHeaderCell.css('left', jHeaderCell.attr('orginal_left') + 'px');
jHeaderCell.css('width', jHeaderCell.attr('orginal_width') + 'px');
//Adjusting the padding-top to resolve the 'vertical-align' problem.
jHeaderCell.css('padding-top', padding_top);
});
//When adjusting the padding-top, the height is automatically resized.
//To resolve it, must re-calculate the height.
jHeaderRow.css('height', (jHeaderRow.attr('orginal_height') - padding_top) + 'px');
var lastHeaderCell = $('table.gridview_style tr th:last-child');
if(lastHeaderCell.children().size() == 0)
lastHeaderCell.append(""<img id='imgIcon' src='" + ResolveUrl("Images/icon_movedown_animated.gif") + @"' "" +
""title='Grid Status: Header Row is freezing on top...'"" +
""alt='Grid Status: Header Row is freezing on top...'"" +
""></img>"");
jHeaderRow.attr('scrolling', 'true');
}
}
else
{
jHeaderRow.css('position', ''); //Put it back where the orginal position belongs
jHeaderRow.css('top', gridview_header_top_position + 'px');
//Restore both 'height' and 'padding-top'
if(jHeaderRow.attr('orginal_height') != undefined)
jHeaderRow.css('height', jHeaderRow.attr('orginal_height') + 'px');
jHeaderRow.css('padding-top', '0px');
var lastHeaderCell = $('table.gridview_style tr th:last-child');
if(lastHeaderCell.children().size() > 0)
lastHeaderCell.children().remove();
jHeaderRow.attr('scrolling', 'false');
}
} catch(e) {alert(e);}
});
});
</script>
";
ScriptManager.RegisterStartupScript(this, this.GetType(), "script_scroll", jQuery, false);
}
}
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
I love working with Web-based workflow automation systems, ERP systems for SME, Data Visualization and Augmented Intelligence.
I have been working in ASP.NET for more than 12 years. I've also been working on Java and Windows-based apps for more than 5 years. My core competencies include ASP.NET (+net core), MVC, Restful API, Advance JavaScript, JQuery, Bootstrap, SubSonic, Dapper, Entity Framework, Lucne.net, ElasticSearch Ajax... I'm particularly interested in building smart apps with great UI/UX and high earned value.
I love to write elegant code. I am a type of pragmatic personality.
Recently, I've been interested in developing SPA apps using Angular with NodeJS backend. I also love to write the progressive web apps which could be the next big thing for the mobile web.
Feel free to discuss with me at: phamdinhtruong@gmail.com