Description:
In this example we explain that how to create scrollable Grid View with Fixed header in asp.net using JavaScript and CSS.or Grid View with Fixed Header and scrollbar in asp.net using JavaScript. Or Fixed Grid view header with horizontal and vertical scrolling in asp.net using CSS.
Previously we already
explain that fixed header when scrolling in grid view in asp.net but here we demonstrate
same thing using JavaScript and also it responsive also.so responsive fixed
header when scrolling grid view in asp.net using JavaScript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.stickytableheaders.js" type="text/javascript"></script>
<script>
$('#<%=
grdViewOrders.ClientID %>').stickyTableHeaders();
</script>
/*! Copyright (c) Jonas Mosbech -
https://github.com/jmosbech/StickyTableHeaders
MIT license info:
https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */
;(function ($, window, undefined) {
'use
strict';
var
name = 'stickyTableHeaders',
id = 0,
defaults = {
fixedOffset:
0,
leftOffset:
0,
marginTop:
0,
objDocument:
document,
objHead: 'head',
objWindow:
window,
scrollableArea:
window,
cacheHeaderHeight:
false,
zIndex: 3
};
function
Plugin (el, options) {
//
To avoid scope issues, use 'base' instead of 'this'
//
to reference this class from internal events and functions.
var
base = this;
//
Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;
base.id = id++;
//
Listen for destroyed, call teardown
base.$el.bind('destroyed',
$.proxy(base.teardown,
base));
//
Cache DOM refs for performance reasons
base.$clonedHeader = null;
base.$originalHeader = null;
//
Cache header height for performance reasons
base.cachedHeaderHeight
= null;
//
Keep track of state
base.isSticky = false;
base.hasBeenSticky = false;
base.leftOffset = null;
base.topOffset = null;
base.init = function () {
base.setOptions(options);
//
debugger;
base.$el.each(function () {
var $this = $(this);
// remove padding on <table> to fix issue #7
$this.css('padding', 0);
base.$originalHeader
= $('tr:first', this);
base.$clonedHeader
= base.$originalHeader.clone();
$this.trigger('clonedHeader.' + name, [base.$clonedHeader]);
base.$clonedHeader.addClass('tableFloatingHeader');
base.$clonedHeader.css({display:
'none', opacity: 0.0});
base.$originalHeader.addClass('tableFloatingHeaderOriginal');
base.$originalHeader.after(base.$clonedHeader);
base.$printStyle
= $('<style type="text/css"
media="print">' +
'.tableFloatingHeader{display:none !important;}' +
'.tableFloatingHeaderOriginal{position:static
!important;}' +
'</style>');
base.$head.append(base.$printStyle);
});
base.$clonedHeader.find("input, select").attr("disabled", true);
base.updateWidth();
base.toggleHeaders();
base.bind();
};
base.destroy = function (){
base.$el.unbind('destroyed', base.teardown);
base.teardown();
};
base.teardown = function(){
if (base.isSticky) {
base.$originalHeader.css('position', 'static');
}
$.removeData(base.el,
'plugin_' + name);
base.unbind();
base.$clonedHeader.remove();
base.$originalHeader.removeClass('tableFloatingHeaderOriginal');
base.$originalHeader.css('visibility', 'visible');
base.$printStyle.remove();
base.el = null;
base.$el = null;
};
base.bind = function(){
base.$scrollableArea.on('scroll.' + name, base.toggleHeaders);
if (!base.isWindowScrolling) {
base.$window.on('scroll.' + name + base.id,
base.setPositionValues);
base.$window.on('resize.' + name + base.id, base.toggleHeaders);
}
base.$scrollableArea.on('resize.' + name, base.toggleHeaders);
base.$scrollableArea.on('resize.' + name, base.updateWidth);
};
base.unbind = function(){
// unbind window events by specifying handle so we
don't remove too much
base.$scrollableArea.off('.' + name, base.toggleHeaders);
if (!base.isWindowScrolling) {
base.$window.off('.' + name + base.id, base.setPositionValues);
base.$window.off('.' + name + base.id, base.toggleHeaders);
}
base.$scrollableArea.off('.' + name, base.updateWidth);
};
//
We debounce the functions bound to the scroll and resize events
base.debounce = function (fn, delay) {
var timer = null;
return function () {
var context = this,
args = arguments;
clearTimeout(timer);
timer
= setTimeout(function () {
fn.apply(context,
args);
},
delay);
};
};
base.toggleHeaders =
base.debounce(function () {
if (base.$el) {
base.$el.each(function () {
var $this = $(this),
newLeft,
newTopOffset
= base.isWindowScrolling ? (
isNaN(base.options.fixedOffset)
?
base.options.fixedOffset.outerHeight()
:
base.options.fixedOffset
)
:
base.$scrollableArea.offset().top
+ (!isNaN(base.options.fixedOffset) ? base.options.fixedOffset : 0),
offset
= $this.offset(),
scrollTop
= base.$scrollableArea.scrollTop() + newTopOffset,
scrollLeft
= base.$scrollableArea.scrollLeft(),
headerHeight,
scrolledPastTop
= base.isWindowScrolling ?
scrollTop
> offset.top :
newTopOffset
> offset.top,
notScrolledPastBottom;
if (scrolledPastTop) {
headerHeight
= base.options.cacheHeaderHeight ? base.cachedHeaderHeight :
base.$clonedHeader.height();
notScrolledPastBottom
= (base.isWindowScrolling ? scrollTop : 0) <
(offset.top
+ $this.height() - headerHeight - (base.isWindowScrolling ? 0 : newTopOffset));
}
if (scrolledPastTop && notScrolledPastBottom)
{
newLeft
= offset.left - scrollLeft + base.options.leftOffset;
base.$originalHeader.css({
'position': 'fixed',
'margin-top': base.options.marginTop,
'top': 0,
'left':
newLeft,
'z-index': base.options.zIndex
});
base.leftOffset
= newLeft;
base.topOffset
= newTopOffset;
base.$clonedHeader.css('display', '');
if (!base.isSticky) {
base.isSticky
= true;
// make sure the width is correct: the user might have
resized the browser while in static mode
base.updateWidth();
$this.trigger('enabledStickiness.' + name);
}
base.setPositionValues();
}
else if
(base.isSticky) {
base.$originalHeader.css('position', 'static');
base.$clonedHeader.css('display', 'none');
base.isSticky
= false;
base.resetWidth($('td,th', base.$clonedHeader), $('td,th', base.$originalHeader));
$this.trigger('disabledStickiness.' + name);
}
});
}
}, 0);
base.setPositionValues =
base.debounce(function () {
var winScrollTop = base.$window.scrollTop(),
winScrollLeft
= base.$window.scrollLeft();
if (!base.isSticky ||
winScrollTop
< 0 || winScrollTop + base.$window.height() > base.$document.height() ||
winScrollLeft
< 0 || winScrollLeft + base.$window.width() > base.$document.width()) {
return;
}
base.$originalHeader.css({
'top': base.topOffset - (base.isWindowScrolling ? 0
: winScrollTop),
'left': base.leftOffset - (base.isWindowScrolling ?
0 : winScrollLeft)
});
}, 0);
base.updateWidth =
base.debounce(function () {
if (!base.isSticky) {
return;
}
// Copy cell widths from clone
if (!base.$originalHeaderCells) {
base.$originalHeaderCells
= $('th,td', base.$originalHeader);
}
if (!base.$clonedHeaderCells) {
base.$clonedHeaderCells
= $('th,td', base.$clonedHeader);
}
var cellWidths =
base.getWidth(base.$clonedHeaderCells);
base.setWidth(cellWidths,
base.$clonedHeaderCells, base.$originalHeaderCells);
// Copy row width from whole table
base.$originalHeader.css('width', base.$clonedHeader.width());
// If we're caching the height, we need to update the
cached value when the width changes
if (base.options.cacheHeaderHeight) {
base.cachedHeaderHeight
= base.$clonedHeader.height();
}
}, 0);
base.getWidth = function ($clonedHeaders) {
var widths = [];
$clonedHeaders.each(function (index) {
var width, $this = $(this);
if ($this.css('box-sizing')
=== 'border-box') {
var boundingClientRect =
$this[0].getBoundingClientRect();
if(boundingClientRect.width) {
width
= boundingClientRect.width; // #39: border-box
bug
}
else {
width =
boundingClientRect.right - boundingClientRect.left; //
ie8 bug: getBoundingClientRect() does not have a width property
}
}
else {
var $origTh = $('th',
base.$originalHeader);
if ($origTh.css('border-collapse')
=== 'collapse') {
if (window.getComputedStyle) {
width
= parseFloat(window.getComputedStyle(this, null).width);
}
else {
// ie8 only
var leftPadding = parseFloat($this.css('padding-left'));
var rightPadding = parseFloat($this.css('padding-right'));
// Needs more investigation - this is assuming constant
border around this cell and it's neighbours.
var border = parseFloat($this.css('border-width'));
width
= $this.outerWidth() - leftPadding - rightPadding - border;
}
}
else {
width
= $this.width();
}
}
widths[index]
= width;
});
return widths;
};
base.setWidth = function (widths, $clonedHeaders, $origHeaders) {
$clonedHeaders.each(function (index) {
var width = widths[index];
$origHeaders.eq(index).css({
'min-width': width,
'max-width': width
});
});
};
base.resetWidth = function ($clonedHeaders, $origHeaders) {
$clonedHeaders.each(function (index) {
var $this = $(this);
$origHeaders.eq(index).css({
'min-width': $this.css('min-width'),
'max-width': $this.css('max-width')
});
});
};
base.setOptions = function (options) {
base.options
= $.extend({}, defaults, options);
base.$window
= $(base.options.objWindow);
base.$head =
$(base.options.objHead);
base.$document
= $(base.options.objDocument);
base.$scrollableArea
= $(base.options.scrollableArea);
base.isWindowScrolling
= base.$scrollableArea[0] === base.$window[0];
};
base.updateOptions = function (options) {
base.setOptions(options);
// scrollableArea might have changed
base.unbind();
base.bind();
base.updateWidth();
base.toggleHeaders();
};
//
Run initializer
base.init();
}
// A
plugin wrapper around the constructor,
//
preventing against multiple instantiations
$.fn[name] = function ( options ) {
return
this.each(function
() {
var instance = $.data(this,
'plugin_' + name);
if (instance) {
if (typeof options ===
'string') {
instance[options].apply(instance);
}
else {
instance.updateOptions(options);
}
} else if(options !== 'destroy') {
$.data(this, 'plugin_' +
name, new Plugin( this,
options ));
}
});
};
})(jQuery,
window);
0 comments:
Post a Comment