修复了asp.net中具有水平和垂直滚动的GridView标题
我想在垂直滚动时修复（冻结）gridview标题 我还想在水平滚动时修复第一列修复了asp.net中具有水平和垂直滚动的GridView标题,asp.net,gridview,Asp.net,Gridview,我想在垂直滚动时修复（冻结）gridview标题 我还想在水平滚动时修复第一列 我希望在chrome和IE中都能做到这一点。可以通过自定义CSS规则（正如线程中讨论的）应用特定的GridView/表布局来修复GridView的标题。但是，这种方法并不适用于所有浏览器。提供此功能 还请检查以下代码项目解决方案： 您可以尝试溢出css属性。很长时间以来，我一直在寻找解决方案，发现大多数答案都无效或不适合我的情况。我还发现大多数java脚本代码都有效，但它们只适用于垂直滚动，而不适用于水平滚动
我希望在chrome和IE中都能做到这一点。可以通过自定义CSS规则（正如线程中讨论的）应用特定的GridView/表布局来修复GridView的标题。但是，这种方法并不适用于所有浏览器。提供此功能 还请检查以下代码项目解决方案：
溢出//创建此Js并添加引用
var GridViewScrollOptions=/**@class*/（函数（）{
函数GridViewScrollOptions（）{
}
返回GridViewScrollOptions；
}());
var GridViewScroll=/**@class*/（函数（）
{
功能GridViewScroll（选项）{
这是。_initialized=false；
if（options.elementID==null）
options.elementID=“”；
如果（options.width==null）
options.width=“700”；
如果（options.height==null）
options.height=“350”；
如果（options.freezeColumnCssClass==null）
options.cssclass=“”；
如果（options.footercssclass==null）
options.footercssclass=“”；
如果（options.freezeHeaderRowCount==null）
options.freezeHeaderRowCount=1；
如果（options.freezeColumnCount==null）
options.columnCount=1；
这包括：初始化选项（选项）；
}
GridViewScroll.prototype.initializeOptions=函数（选项）{
this.GridID=options.elementID；
this.GridWidth=options.width；
this.GridHeight=options.height；
this.FreezeColumn=options.FreezeColumn；
this.FreezeFooter=options.FreezeFooter；
this.FreezeColumnCssClass=options.FreezeColumnCssClass；
this.FreezeFooterCssClass=options.FreezeFooterCssClass；
this.FreezeHeaderRowCount=options.FreezeHeaderRowCount；
this.FreezeColumnCount=options.FreezeColumnCount；
};
GridViewScroll.prototype.enhance=函数（）
{
此参数为：单元格宽度=[]；
this.IsVerticalScrollbarEnabled=false；
this.IsHorizontalScrollbarEnabled=false；
if（this.GridID==null | | this.GridID===“”）
{
返回；
}
this.ContentGrid=document.getElementById（this.GridID）；
if（this.ContentGrid==null）{
返回；
}
if（this.ContentGrid.rows.length<2）{
返回；
}
如果（此项已初始化）{
这个。撤销（）；
}
这是。_initialized=true；
this.Parent=this.ContentGrid.parentNode；
this.ContentGrid.style.display=“无”；
if（typeof this.GridWidth=='string'&&this.GridWidth.indexOf（“%”）1）{
var percentage=parseInt（this.GridWidth）；
this.Width=this.Parent.offsetWidth*百分比/100；
}
否则{
this.Width=parseInt（this.GridWidth）；
}
if（typeof this.GridHeight=='string'&&this.GridHeight.indexOf（“%”）>-1）{
var percentage=parseInt（this.GridHeight）；
this.Height=this.Parent.offsetHeight*百分比/100；
}
否则{
this.Height=parseInt（this.GridHeight）；
}
this.ContentGrid.style.display=“”；
this.ContentGridHeaderRows=this.getGridHeaderRows（）；
this.ContentGridItemRow=this.ContentGrid.rows.item（this.FreezeHeaderRowCount）；
var footerIndex=this.ContentGrid.rows.length-1；
this.ContentGridFooterRow=this.ContentGrid.rows.item（footerIndex）；
this.Content=document.createElement（'div'）；
this.Content.id=this.GridID+“_Content”；
this.Content.style.position=“relative”；
this.Content=this.Parent.insertBefore（this.Content，this.ContentGrid）；
this.ContentFixed=document.createElement（'div'）；
this.ContentFixed.id=this.GridID+“\u Content\u Fixed”；
this.ContentFixed.style.overflow=“自动”；
this.ContentFixed=this.Content.appendChild（this.ContentFixed）；
this.ContentGrid=this.ContentFixed.appendChild（this.ContentGrid）；
this.ContentFixed.style.width=字符串（this.width）+“px”；
如果（this.ContentGrid.offsetWidth>this.Width）{
this.IsHorizontalScrollbarEnabled=true；
}
如果（this.ContentGrid.offsetHeight>this.Height）{
this.IsVerticalScrollbarEnabled=true；
}
this.Header=document.createElement（'div'）；
this.Header.id=this.GridID+“_Header”；
this.Header.style.backgroundColor=“#f0”；
this.Header.style.position=“relative”；
this.HeaderFixed=document.createElement（'div'）；
this.HeaderFixed.id=this.GridID+“\u Header\u Fixed”；
this.HeaderFixed.style.overflow=“hidden”；
this.Header=this.Parent.insertBefore（this.Header，this.Content）；
this.HeaderFixed=this.Header.appendChild（this.HeaderFixed）；
this.ScrollbarWidth=this.getScrollbarWidth（）；
这个。prepareHeader（）；
这个.calculateHeader（）；
this.Header.style.width=字符串（this.width）+“px”；
如果（此.IsVerticalScrollbarEnabled）{
this.HeaderFixed.style.width=字符串（this.width-this.ScrollbarWidth）+“px”；
如果（此.IsHorizontalScrollbarEnabled）{
这是我的
// create this Js and add reference
var GridViewScrollOptions = /** @class */ (function () {
function GridViewScrollOptions() {
}
return GridViewScrollOptions;
}());
var GridViewScroll = /** @class */ (function ()
{
function GridViewScroll(options) {
this._initialized = false;
if (options.elementID == null)
options.elementID = "";
if (options.width == null)
options.width = "700";
if (options.height == null)
options.height = "350";
if (options.freezeColumnCssClass == null)
options.freezeColumnCssClass = "";
if (options.freezeFooterCssClass == null)
options.freezeFooterCssClass = "";
if (options.freezeHeaderRowCount == null)
options.freezeHeaderRowCount = 1;
if (options.freezeColumnCount == null)
options.freezeColumnCount = 1;
this.initializeOptions(options);
}
GridViewScroll.prototype.initializeOptions = function (options) {
this.GridID = options.elementID;
this.GridWidth = options.width;
this.GridHeight = options.height;
this.FreezeColumn = options.freezeColumn;
this.FreezeFooter = options.freezeFooter;
this.FreezeColumnCssClass = options.freezeColumnCssClass;
this.FreezeFooterCssClass = options.freezeFooterCssClass;
this.FreezeHeaderRowCount = options.freezeHeaderRowCount;
this.FreezeColumnCount = options.freezeColumnCount;
};
GridViewScroll.prototype.enhance = function ()
{
this.FreezeCellWidths = [];
this.IsVerticalScrollbarEnabled = false;
this.IsHorizontalScrollbarEnabled = false;
if (this.GridID == null || this.GridID == "")
{
return;
}
this.ContentGrid = document.getElementById(this.GridID);
if (this.ContentGrid == null) {
return;
}
if (this.ContentGrid.rows.length < 2) {
return;
}
if (this._initialized) {
this.undo();
}
this._initialized = true;
this.Parent = this.ContentGrid.parentNode;
this.ContentGrid.style.display = "none";
if (typeof this.GridWidth == 'string' && this.GridWidth.indexOf("%") > -1) {
var percentage = parseInt(this.GridWidth);
this.Width = this.Parent.offsetWidth * percentage / 100;
}
else {
this.Width = parseInt(this.GridWidth);
}
if (typeof this.GridHeight == 'string' && this.GridHeight.indexOf("%") > -1) {
var percentage = parseInt(this.GridHeight);
this.Height = this.Parent.offsetHeight * percentage / 100;
}
else {
this.Height = parseInt(this.GridHeight);
}
this.ContentGrid.style.display = "";
this.ContentGridHeaderRows = this.getGridHeaderRows();
this.ContentGridItemRow = this.ContentGrid.rows.item(this.FreezeHeaderRowCount);
var footerIndex = this.ContentGrid.rows.length - 1;
this.ContentGridFooterRow = this.ContentGrid.rows.item(footerIndex);
this.Content = document.createElement('div');
this.Content.id = this.GridID + "_Content";
this.Content.style.position = "relative";
this.Content = this.Parent.insertBefore(this.Content, this.ContentGrid);
this.ContentFixed = document.createElement('div');
this.ContentFixed.id = this.GridID + "_Content_Fixed";
this.ContentFixed.style.overflow = "auto";
this.ContentFixed = this.Content.appendChild(this.ContentFixed);
this.ContentGrid = this.ContentFixed.appendChild(this.ContentGrid);
this.ContentFixed.style.width = String(this.Width) + "px";
if (this.ContentGrid.offsetWidth > this.Width) {
this.IsHorizontalScrollbarEnabled = true;
}
if (this.ContentGrid.offsetHeight > this.Height) {
this.IsVerticalScrollbarEnabled = true;
}
this.Header = document.createElement('div');
this.Header.id = this.GridID + "_Header";
this.Header.style.backgroundColor = "#F0F0F0";
this.Header.style.position = "relative";
this.HeaderFixed = document.createElement('div');
this.HeaderFixed.id = this.GridID + "_Header_Fixed";
this.HeaderFixed.style.overflow = "hidden";
this.Header = this.Parent.insertBefore(this.Header, this.Content);
this.HeaderFixed = this.Header.appendChild(this.HeaderFixed);
this.ScrollbarWidth = this.getScrollbarWidth();
this.prepareHeader();
this.calculateHeader();
this.Header.style.width = String(this.Width) + "px";
if (this.IsVerticalScrollbarEnabled) {
this.HeaderFixed.style.width = String(this.Width - this.ScrollbarWidth) + "px";
if (this.IsHorizontalScrollbarEnabled) {
this.ContentFixed.style.width = this.HeaderFixed.style.width;
if (this.isRTL()) {
this.ContentFixed.style.paddingLeft = String(this.ScrollbarWidth) + "px";
}
else {
this.ContentFixed.style.paddingRight = String(this.ScrollbarWidth) + "px";
}
}
this.ContentFixed.style.height = String(this.Height - this.Header.offsetHeight) + "px";
}
else {
this.HeaderFixed.style.width = this.Header.style.width;
this.ContentFixed.style.width = this.Header.style.width;
}
if (this.FreezeColumn && this.IsHorizontalScrollbarEnabled) {
this.appendFreezeHeader();
this.appendFreezeContent();
}
if (this.FreezeFooter && this.IsVerticalScrollbarEnabled) {
this.appendFreezeFooter();
if (this.FreezeColumn && this.IsHorizontalScrollbarEnabled) {
this.appendFreezeFooterColumn();
}
}
var self = this;
this.ContentFixed.onscroll = function (event) {
self.HeaderFixed.scrollLeft = self.ContentFixed.scrollLeft;
if (self.ContentFreeze != null)
self.ContentFreeze.scrollTop = self.ContentFixed.scrollTop;
if (self.FooterFreeze != null)
self.FooterFreeze.scrollLeft = self.ContentFixed.scrollLeft;
};
};
GridViewScroll.prototype.getGridHeaderRows = function () {
var gridHeaderRows = new Array();
for (var i = 0; i < this.FreezeHeaderRowCount; i++) {
gridHeaderRows.push(this.ContentGrid.rows.item(i));
}
return gridHeaderRows;
};
GridViewScroll.prototype.prepareHeader = function () {
this.HeaderGrid = this.ContentGrid.cloneNode(false);
this.HeaderGrid.id = this.GridID + "_Header_Fixed_Grid";
this.HeaderGrid = this.HeaderFixed.appendChild(this.HeaderGrid);
this.prepareHeaderGridRows();
for (var i = 0; i < this.ContentGridItemRow.cells.length; i++) {
this.appendHelperElement(this.ContentGridItemRow.cells.item(i));
this.appendHelperElement(this.HeaderGridHeaderCells[i]);
}
};
GridViewScroll.prototype.prepareHeaderGridRows = function () {
this.HeaderGridHeaderRows = new Array();
for (var i = 0; i < this.FreezeHeaderRowCount; i++) {
var gridHeaderRow = this.ContentGridHeaderRows[i];
var headerGridHeaderRow = gridHeaderRow.cloneNode(true);
this.HeaderGridHeaderRows.push(headerGridHeaderRow);
this.HeaderGrid.appendChild(headerGridHeaderRow);
}
this.prepareHeaderGridCells();
};
GridViewScroll.prototype.prepareHeaderGridCells = function () {
this.HeaderGridHeaderCells = new Array();
for (var i = 0; i < this.ContentGridItemRow.cells.length; i++) {
for (var rowIndex in this.HeaderGridHeaderRows) {
var cgridHeaderRow = this.HeaderGridHeaderRows[rowIndex];
var fixedCellIndex = 0;
for (var cellIndex = 0; cellIndex < cgridHeaderRow.cells.length; cellIndex++) {
var cgridHeaderCell = cgridHeaderRow.cells.item(cellIndex);
if (cgridHeaderCell.colSpan == 1 && i == fixedCellIndex) {
this.HeaderGridHeaderCells.push(cgridHeaderCell);
}
else {
fixedCellIndex += cgridHeaderCell.colSpan - 1;
}
fixedCellIndex++;
}
}
}
};
GridViewScroll.prototype.calculateHeader = function () {
for (var i = 0; i < this.ContentGridItemRow.cells.length; i++) {
var gridItemCell = this.ContentGridItemRow.cells.item(i);
var helperElement = gridItemCell.firstChild;
var helperWidth = parseInt(String(helperElement.offsetWidth));
this.FreezeCellWidths.push(helperWidth);
helperElement.style.width = helperWidth + "px";
helperElement = this.HeaderGridHeaderCells[i].firstChild;
helperElement.style.width = helperWidth + "px";
}
for (var i = 0; i < this.FreezeHeaderRowCount; i++) {
this.ContentGridHeaderRows[i].style.display = "none";
}
};
GridViewScroll.prototype.appendFreezeHeader = function () {
this.HeaderFreeze = document.createElement('div');
this.HeaderFreeze.id = this.GridID + "_Header_Freeze";
this.HeaderFreeze.style.position = "absolute";
this.HeaderFreeze.style.overflow = "hidden";
this.HeaderFreeze.style.top = "0px";
this.HeaderFreeze.style.left = "0px";
this.HeaderFreeze.style.width = "";
this.HeaderFreezeGrid = this.HeaderGrid.cloneNode(false);
this.HeaderFreezeGrid.id = this.GridID + "_Header_Freeze_Grid";
this.HeaderFreezeGrid = this.HeaderFreeze.appendChild(this.HeaderFreezeGrid);
this.HeaderFreezeGridHeaderRows = new Array();
for (var i = 0; i < this.HeaderGridHeaderRows.length; i++) {
var headerFreezeGridHeaderRow = this.HeaderGridHeaderRows[i].cloneNode(false);
this.HeaderFreezeGridHeaderRows.push(headerFreezeGridHeaderRow);
var columnIndex = 0;
var columnCount = 0;
while (columnCount < this.FreezeColumnCount) {
var freezeColumn = this.HeaderGridHeaderRows[i].cells.item(columnIndex).cloneNode(true);
headerFreezeGridHeaderRow.appendChild(freezeColumn);
columnCount += freezeColumn.colSpan;
columnIndex++;
}
this.HeaderFreezeGrid.appendChild(headerFreezeGridHeaderRow);
}
this.HeaderFreeze = this.Header.appendChild(this.HeaderFreeze);
};
GridViewScroll.prototype.appendFreezeContent = function () {
this.ContentFreeze = document.createElement('div');
this.ContentFreeze.id = this.GridID + "_Content_Freeze";
this.ContentFreeze.style.position = "absolute";
this.ContentFreeze.style.overflow = "hidden";
this.ContentFreeze.style.top = "0px";
this.ContentFreeze.style.left = "0px";
this.ContentFreeze.style.width = "";
this.ContentFreezeGrid = this.HeaderGrid.cloneNode(false);
this.ContentFreezeGrid.id = this.GridID + "_Content_Freeze_Grid";
this.ContentFreezeGrid = this.ContentFreeze.appendChild(this.ContentFreezeGrid);
var freezeCellHeights = [];
var paddingTop = this.getPaddingTop(this.ContentGridItemRow.cells.item(0));
var paddingBottom = this.getPaddingBottom(this.ContentGridItemRow.cells.item(0));
for (var i = 0; i < this.ContentGrid.rows.length; i++) {
var gridItemRow = this.ContentGrid.rows.item(i);
var gridItemCell = gridItemRow.cells.item(0);
var helperElement = void 0;
if (gridItemCell.firstChild.className == "gridViewScrollHelper") {
helperElement = gridItemCell.firstChild;
}
else {
helperElement = this.appendHelperElement(gridItemCell);
}
var helperHeight = parseInt(String(gridItemCell.offsetHeight - paddingTop - paddingBottom));
freezeCellHeights.push(helperHeight);
var cgridItemRow = gridItemRow.cloneNode(false);
var cgridItemCell = gridItemCell.cloneNode(true);
if (this.FreezeColumnCssClass != null || this.FreezeColumnCssClass != "")
cgridItemRow.className = this.FreezeColumnCssClass;
var columnIndex = 0;
var columnCount = 0;
while (columnCount < this.FreezeColumnCount) {
var freezeColumn = gridItemRow.cells.item(columnIndex).cloneNode(true);
cgridItemRow.appendChild(freezeColumn);
columnCount += freezeColumn.colSpan;
columnIndex++;
}
this.ContentFreezeGrid.appendChild(cgridItemRow);
}
for (var i = 0; i < this.ContentGrid.rows.length; i++) {
var gridItemRow = this.ContentGrid.rows.item(i);
var gridItemCell = gridItemRow.cells.item(0);
var cgridItemRow = this.ContentFreezeGrid.rows.item(i);
var cgridItemCell = cgridItemRow.cells.item(0);
var helperElement = gridItemCell.firstChild;
helperElement.style.height = String(freezeCellHeights[i]) + "px";
helperElement = cgridItemCell.firstChild;
helperElement.style.height = String(freezeCellHeights[i]) + "px";
}
if (this.IsVerticalScrollbarEnabled) {
this.ContentFreeze.style.height = String(this.Height - this.Header.offsetHeight - this.ScrollbarWidth) + "px";
}
else {
this.ContentFreeze.style.height = String(this.ContentFixed.offsetHeight - this.ScrollbarWidth) + "px";
}
this.ContentFreeze = this.Content.appendChild(this.ContentFreeze);
};
GridViewScroll.prototype.appendFreezeFooter = function () {
this.FooterFreeze = document.createElement('div');
this.FooterFreeze.id = this.GridID + "_Footer_Freeze";
this.FooterFreeze.style.position = "absolute";
this.FooterFreeze.style.overflow = "hidden";
this.FooterFreeze.style.left = "0px";
this.FooterFreeze.style.width = String(this.ContentFixed.offsetWidth - this.ScrollbarWidth) + "px";
this.FooterFreezeGrid = this.HeaderGrid.cloneNode(false);
this.FooterFreezeGrid.id = this.GridID + "_Footer_Freeze_Grid";
this.FooterFreezeGrid = this.FooterFreeze.appendChild(this.FooterFreezeGrid);
this.FooterFreezeGridHeaderRow = this.ContentGridFooterRow.cloneNode(true);
if (this.FreezeFooterCssClass != null || this.FreezeFooterCssClass != "")
this.FooterFreezeGridHeaderRow.className = this.FreezeFooterCssClass;
for (var i = 0; i < this.FooterFreezeGridHeaderRow.cells.length; i++) {
var cgridHeaderCell = this.FooterFreezeGridHeaderRow.cells.item(i);
var helperElement = this.appendHelperElement(cgridHeaderCell);
helperElement.style.width = String(this.FreezeCellWidths[i]) + "px";
}
this.FooterFreezeGridHeaderRow = this.FooterFreezeGrid.appendChild(this.FooterFreezeGridHeaderRow);
this.FooterFreeze = this.Content.appendChild(this.FooterFreeze);
var footerFreezeTop = this.ContentFixed.offsetHeight - this.FooterFreeze.offsetHeight;
if (this.IsHorizontalScrollbarEnabled) {
footerFreezeTop -= this.ScrollbarWidth;
}
this.FooterFreeze.style.top = String(footerFreezeTop) + "px";
};
GridViewScroll.prototype.appendFreezeFooterColumn = function () {
this.FooterFreezeColumn = document.createElement('div');
this.FooterFreezeColumn.id = this.GridID + "_Footer_FreezeColumn";
this.FooterFreezeColumn.style.position = "absolute";
this.FooterFreezeColumn.style.overflow = "hidden";
this.FooterFreezeColumn.style.left = "0px";
this.FooterFreezeColumn.style.width = "";
this.FooterFreezeColumnGrid = this.HeaderGrid.cloneNode(false);
this.FooterFreezeColumnGrid.id = this.GridID + "_Footer_FreezeColumn_Grid";
this.FooterFreezeColumnGrid = this.FooterFreezeColumn.appendChild(this.FooterFreezeColumnGrid);
this.FooterFreezeColumnGridHeaderRow = this.FooterFreezeGridHeaderRow.cloneNode(false);
this.FooterFreezeColumnGridHeaderRow = this.FooterFreezeColumnGrid.appendChild(this.FooterFreezeColumnGridHeaderRow);
if (this.FreezeFooterCssClass != null)
this.FooterFreezeColumnGridHeaderRow.className = this.FreezeFooterCssClass;
var columnIndex = 0;
var columnCount = 0;
while (columnCount < this.FreezeColumnCount) {
var freezeColumn = this.FooterFreezeGridHeaderRow.cells.item(columnIndex).cloneNode(true);
this.FooterFreezeColumnGridHeaderRow.appendChild(freezeColumn);
columnCount += freezeColumn.colSpan;
columnIndex++;
}
var footerFreezeTop = this.ContentFixed.offsetHeight - this.FooterFreeze.offsetHeight;
if (this.IsHorizontalScrollbarEnabled) {
footerFreezeTop -= this.ScrollbarWidth;
}
this.FooterFreezeColumn.style.top = String(footerFreezeTop) + "px";
this.FooterFreezeColumn = this.Content.appendChild(this.FooterFreezeColumn);
};
GridViewScroll.prototype.appendHelperElement = function (gridItemCell) {
var helperElement = document.createElement('div');
helperElement.className = "gridViewScrollHelper";
while (gridItemCell.hasChildNodes()) {
helperElement.appendChild(gridItemCell.firstChild);
}
return gridItemCell.appendChild(helperElement);
};
GridViewScroll.prototype.getScrollbarWidth = function () {
var innerElement = document.createElement('p');
innerElement.style.width = "100%";
innerElement.style.height = "200px";
var outerElement = document.createElement('div');
outerElement.style.position = "absolute";
outerElement.style.top = "0px";
outerElement.style.left = "0px";
outerElement.style.visibility = "hidden";
outerElement.style.width = "200px";
outerElement.style.height = "150px";
outerElement.style.overflow = "hidden";
outerElement.appendChild(innerElement);
document.body.appendChild(outerElement);
var innerElementWidth = innerElement.offsetWidth;
outerElement.style.overflow = 'scroll';
var outerElementWidth = innerElement.offsetWidth;
if (innerElementWidth === outerElementWidth)
outerElementWidth = outerElement.clientWidth;
document.body.removeChild(outerElement);
return innerElementWidth - outerElementWidth;
};
GridViewScroll.prototype.isRTL = function () {
var direction = "";
if (window.getComputedStyle) {
direction = window.getComputedStyle(this.ContentGrid, null).getPropertyValue('direction');
}
else {
direction = this.ContentGrid.currentStyle.direction;
}
return direction === "rtl";
};
GridViewScroll.prototype.getPaddingTop = function (element) {
var value = "";
if (window.getComputedStyle) {
value = window.getComputedStyle(element, null).getPropertyValue('padding-Top');
}
else {
value = element.currentStyle.paddingTop;
}
return parseInt(value);
};
GridViewScroll.prototype.getPaddingBottom = function (element) {
var value = "";
if (window.getComputedStyle) {
value = window.getComputedStyle(element, null).getPropertyValue('padding-Bottom');
}
else {
value = element.currentStyle.paddingBottom;
}
return parseInt(value);
};
GridViewScroll.prototype.undo = function () {
this.undoHelperElement();
for (var _i = 0, _a = this.ContentGridHeaderRows; _i < _a.length; _i++) {
var contentGridHeaderRow = _a[_i];
contentGridHeaderRow.style.display = "";
}
this.Parent.insertBefore(this.ContentGrid, this.Header);
this.Parent.removeChild(this.Header);
this.Parent.removeChild(this.Content);
this._initialized = false;
};
GridViewScroll.prototype.undoHelperElement = function () {
for (var i = 0; i < this.ContentGridItemRow.cells.length; i++) {
var gridItemCell = this.ContentGridItemRow.cells.item(i);
var helperElement = gridItemCell.firstChild;
while (helperElement.hasChildNodes()) {
gridItemCell.appendChild(helperElement.firstChild);
}
gridItemCell.removeChild(helperElement);
}
if (this.FreezeColumn) {
for (var i = 2; i < this.ContentGrid.rows.length; i++) {
var gridItemRow = this.ContentGrid.rows.item(i);
var gridItemCell = gridItemRow.cells.item(0);
var helperElement = gridItemCell.firstChild;
while (helperElement.hasChildNodes()) {
gridItemCell.appendChild(helperElement.firstChild);
}
gridItemCell.removeChild(helperElement);
}
}
};
return GridViewScroll;
}());
//add On Head
<head runat="server">
<title></title>
<script src="client/js/jquery-3.1.1.min.js"></script>
<script src="js/gridviewscroll.js"></script>
<script type="text/javascript">
window.onload = function () {
var gridViewScroll = new GridViewScroll({
elementID: "GridView1" // [Header is fix column will be Freeze ][1]Target Control
});
gridViewScroll.enhance();
}
</script>
</head>
//Add on Body
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true">
// <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<%-- <Columns>
<asp:BoundField DataField="SHIPMENT_ID" HeaderText="SHIPMENT_ID"
ReadOnly="True" SortExpression="SHIPMENT_ID" />
<asp:BoundField DataField="TypeValue" HeaderText="TypeValue"
SortExpression="TypeValue" />
<asp:BoundField DataField="CHAId" HeaderText="CHAId"
SortExpression="CHAId" />
<asp:BoundField DataField="Status" HeaderText="Status"
SortExpression="Status" />
</Columns>--%>
</asp:GridView>
<script type="text/javascript">
$(document).ready(function () {
var gridHeader = $('#<%=grdSiteWiseEmpAttendance.ClientID%>').clone(true); // Here Clone Copy of Gridview with style
$(gridHeader).find("tr:gt(0)").remove(); // Here remove all rows except first row (header row)
$('#<%=grdSiteWiseEmpAttendance.ClientID%> tr th').each(function (i) {
// Here Set Width of each th from gridview to new table(clone table) th
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
});
$("#GHead1").append(gridHeader);
$('#GHead1').css('position', 'top');
$('#GHead1').css('top', $('#<%=grdSiteWiseEmpAttendance.ClientID%>').offset().top);
});
</script>
<div class="row">
<div class="col-lg-12" style="width: auto;">
<div id="GHead1"></div>
<div id="divGridViewScroll1" style="height: 600px; overflow: auto">
<div class="table-responsive">
<asp:GridView ID="grdSiteWiseEmpAttendance" CssClass="table table-small-font table-bordered table-striped" Font-Size="Smaller" EmptyDataRowStyle-ForeColor="#cc0000" HeaderStyle-Font-Size="8" HeaderStyle-Font-Names="Calibri" HeaderStyle-Font-Italic="true" runat="server" AutoGenerateColumns="false"
BackColor="#f0f5f5" OnRowDataBound="grdSiteWiseEmpAttendance_RowDataBound" HeaderStyle-ForeColor="#990000">
<Columns>
</Columns>
<HeaderStyle HorizontalAlign="Justify" VerticalAlign="Top" />
<RowStyle Font-Names="Calibri" ForeColor="#000000" />
</asp:GridView>
</div>
</div>
</div>
</div>