|
/// <reference name="MicrosoftAjax.debug.js" />
/// <reference name="MicrosoftAjaxTimer.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />
Type.registerNamespace("GridBox");
GridBox.GridBoxExtender = function(element) {
GridBox.GridBoxExtender.initializeBase(this, [element]);
this._documentResizeDelegate = null;
this._lock = false;
this._mainTableID = null;
this._innerTableID = null;
this._divChild = null;
this._scrollField = 0;
}
GridBox.GridBoxExtender.prototype = {
// Overrides
//#region
initialize: function() {
GridBox.GridBoxExtender.callBaseMethod(this, 'initialize');
this.initGrid();
},
dispose: function() {
//Add custom dispose actions here
$removeHandler(window, "resize", this._documentResizeDelegate);
if (this._divChild) {
$clearHandlers(this._divChild);
}
GridBox.GridBoxExtender.callBaseMethod(this, 'dispose');
},
//#endregion
// Properties
//#region
get_scrollField: function() {
return this._scrollField;
},
set_scrollField: function(value) {
if (this._scrollField !== value) {
this._scrollField = value;
this.raisePropertyChanged('scrollField');
}
},
//#endregion
// Methods
//#region
getLastScroll: function() {
var result = 0;
var hf = $get(this._scrollField);
if (hf) {
result = parseInt(hf.value);
if (!result) result = 0;
}
return result;
},
setLastScroll: function(value) {
var hf = $get(this._scrollField);
if (hf) {
hf.value = value;
}
},
initGrid: function() {
// create deep clone of target grid
var target = this.get_element();
var clone = target.cloneNode(true);
// get desired height of inner scrollable area
var height = target.style.height;
var width = target.style.width;
var mainTable = target.cloneNode(false);
mainTable.id = String.format("outer_{0}", target.id);
target.parentNode.insertBefore(mainTable, target);
var mainHead = document.createElement("thead");
mainTable.appendChild(mainHead);
var mainBody = document.createElement("tbody");
mainTable.appendChild(mainBody);
//**** ADDED FOOTER
var mainFoot = document.createElement("tfoot");
mainTable.appendChild(mainFoot);
// Clone original header
var header = target.rows[0].cloneNode(true);
mainHead.appendChild(header);
//**** ADDED FOOTER clone footer
var footer = target.rows[target.rows.length - 1].cloneNode(true);
mainFoot.appendChild(footer);
// add scrollable area mainTable
var secondRow = document.createElement("tr");
mainBody.appendChild(secondRow);
var mainTd = document.createElement("td");
secondRow.appendChild(mainTd)
this.setAttribute(mainTd, "colspan", target.rows[0].cells.length);
this.setAttribute(mainTd, "align", "left");
this.setAttribute(mainTd, "valign", "top");
var divChild = document.createElement("div");
mainTd.appendChild(divChild);
divChild.style.width = width;
divChild.style.height = height;
$addHandler(divChild, "scroll", Function.createDelegate(this, this.syncScroll));
divChild.style.overflow = "auto";
divChild.style.overflowX = "hidden";
divChild.style.overflowY = "scroll";
this._divChild = divChild;
// Sys.UI.DomElement.addCssClass(divChild, "divScrollVertical");
// now remove old grid from document and insert new clone into the place
target.parentNode.removeChild(target);
divChild.appendChild(clone);
// assign extender related data to clone
clone._behaviors = target._behaviors;
clone.GridBoxExtender = target.GridBoxExtender;
// correct styles
var attributes = [];
for (var i = 0; i < clone.attributes.length; i++) {
var attr = clone.attributes.item(i);
var value = attr.value.trim().toLowerCase();
if (value != "cellpadding" && value != "cellspacing") {
Array.add(attributes, attr);
}
}
Array.forEach(attributes, this.deleteAttribute, clone);
clone.deleteRow(0); //remove header row
clone.deleteRow(clone.rows.length - 1); //remove 5footer
clone.border = "0";
clone.style.borderWidth = "0px";
clone.style.width = "100%";
clone.style.height = "";
mainTable.style.height = "";
target.style.height = "";
// correct widths of header columns and subscribe to document resize event:
this._mainTableID = mainTable.id;
this._innerTableID = clone.id;
this._documentResizeDelegate = Function.createDelegate(
this,
this.syncWidths
);
this._documentResizeDelegate.call();
// Attach to window's resize event to resize header cells when inner cells change their size
$addHandler(window, "resize", this._documentResizeDelegate);
// Restore scroll position from last time
divChild.scrollTop = this.getLastScroll();
},
setAttribute: function(element, attribute, value) {
var namedItem = document.createAttribute(attribute);
namedItem.value = value;
element.attributes.setNamedItem(namedItem);
},
deleteAttribute: function(attribute, index, attributes) {
this.removeAttribute(attribute);
},
syncScroll: function(args) {
if (this._divChild) {
this.setLastScroll(this._divChild.scrollTop);
}
},
syncWidths: function(args) {
if (!this._lock) {
this._lock = true;
var mainTable = $get(this._mainTableID);
var innerCellPadding = mainTable.cellPadding;
var header = mainTable.rows[0];
var innerTable = $get(this._innerTableID);
var originalRow = innerTable.rows[0];
var headerWidth = Sys.UI.DomElement.getBounds(header).width;
var originalRowWidth = Sys.UI.DomElement.getBounds(originalRow).width;
var diff = headerWidth - originalRowWidth - innerCellPadding * 2;
if (originalRow && header) {
for (var i = 0; i < originalRow.cells.length; i++) {
var bounds = Sys.UI.DomElement.getBounds(originalRow.cells[i]);
var x = bounds.width;
if (i == originalRow.cells.length - 1) {
x = x + diff - innerCellPadding * 2;
} else {
x = x - innerCellPadding;
}
header.cells[i].style.width = x + "px";
}
}
this._lock = false;
}
}
//#endregion
}
GridBox.GridBoxExtender.registerClass('GridBox.GridBoxExtender', Sys.UI.Behavior);
|