Active.Controls.ResizeGrid = Active.Controls.Grid.subclass();
Active.Controls.ResizeGrid.create = function(){
/****************************************************************
Enhances the grid control with resizable rows.
*****************************************************************/
var obj = this.prototype;
var _super = this.superclass.prototype;
// ------------------------------------------------------------
// add double-click resize action to header
var div = Active.Templates.Header.prototype.getContent("div");
div.setEvent("ondblclick", function(){this.action("resizeWidthToFit")});
// ------------------------------------------------------------
// add resize ability to rows
var resize = new Active.HTML.DIV;
resize.setClass("box", "verticalresize");
resize.setEvent("onmousedown", function(){this.action("startRowResize")});
resize.setContent("html", " ");
resize.setEvent("ondblclick", function(){this.action("resizeHeightToFit")});
Active.Templates.Item.prototype.setContent("div", resize);
Active.Templates.Row.prototype.setClass("row", function(){return this.getRowProperty("index");});
// ------------------------------------------------------------
var startRowResize = function(header){
var el = header.element();
var pos = event.clientY;
var size = el.offsetHeight;
var grid = this;
var doResize = function(){
var el = header.element();
var sz = size + event.clientY - pos;
el.style.height = sz < 5 ? 5 : sz;
el = null;
};
var endResize = function(){
var el = header.element();
if( typeof el.onmouseleave == "function") {
el.onmouseleave();
}
el.detachEvent("onmousemove", doResize);
el.detachEvent("onmouseup", endResize);
el.detachEvent("onlosecapture", endResize);
el.releaseCapture();
var height = size + event.clientY - pos;
if (height < 5) {height = 5}
el.style.height = height;
var ss = document.styleSheets[document.styleSheets.length-1];
var i, selector = "#" + grid.getId() + " .active-row-" + header.getItemProperty("index");
for(i=0; i<ss.rules.length;i++){
if(ss.rules[i].selectorText == selector){
ss.rules[i].style.height = height;
ss.rules[i].style.whiteSpace = "normal";
el = null;
grid.getTemplate("layout").action("adjustSize");
return;
}
}
ss.addRule(selector, "height:" + height + "px");
el = null;
grid.getTemplate("layout").action("adjustSize");
};
el.attachEvent("onmousemove", doResize);
el.attachEvent("onmouseup", endResize);
el.attachEvent("onlosecapture", endResize);
el.setCapture();
// break object reference to avoid memory leak
el = null;
event.cancelBubble = true;
};
obj.setAction("startRowResize", startRowResize);
// ------------------------------------------------------------
var resizeHeightToFit = function(header){
var el = header.element();
var grid = this;
var rowid = header.getItemProperty("index");
var row = grid.getRowTemplate(rowid);
var ss = document.styleSheets[document.styleSheets.length-1];
var i, data, height;
// find the maximum height for the row
height = 5;
for(i=0; i<grid.getColumnProperty("count");i++){
data = row.getItemTemplate(i).element();
if(data.scrollHeight && (data.scrollHeight > (height+1))){
height = data.scrollHeight + 1;
}else if(data.offsetHeight > (height+1)){
height = data.offsetHeight + 1;
}
data = null;
}
// set the height of the row
var selector = "#" + grid.getId() + " .active-row-" + rowid;
el.style.height = height;
for(i=0; i<ss.rules.length;i++){
if(ss.rules[i].selectorText == selector){
ss.rules[i].style.height = height;
el = null;
grid.getTemplate("layout").action("adjustSize");
return;
}
}
ss.addRule(selector, "height:" + height + "px");
el = null;
grid.getTemplate("layout").action("adjustSize");
};
obj.setAction("resizeHeightToFit", resizeHeightToFit);
// ------------------------------------------------------------
var resizeWidthToFit = function(header){
var el = header.element();
var grid = this;
var colid = header.getItemProperty("index");
var ss = document.styleSheets[document.styleSheets.length-1];
var i, data, width;
// find the maximum width for the row
width = 5;
for(i=0; i<grid.getRowProperty("count");i++){
data = grid.getRowTemplate(i).getItemTemplate(colid).element();
if(data.scrollWidth && (data.scrollWidth > (width+1))){
width = data.scrollWidth + 1;
}else if(data.offsetWidth > (width+1)){
width = data.offsetWidth + 1;
}
data = null;
}
// set the height of the row
var selector = "#" + grid.getId() + " .active-column-" + colid;
el.style.width = width;
for(i=0; i<ss.rules.length;i++){
if(ss.rules[i].selectorText == selector){
ss.rules[i].style.width = width;
el = null;
grid.getTemplate("layout").action("adjustSize");
return;
}
}
ss.addRule(selector, "width:" + width + "px");
el = null;
grid.getTemplate("layout").action("adjustSize");
};
obj.setAction("resizeWidthToFit", resizeWidthToFit);
// ------------------------------------------------------------
};
Active.Controls.ResizeGrid.create();
.active-box-verticalresize {
position: absolute;
overflow: hidden;
bottom: -5px;
height: 10px;
width: 100%;
font-size: 100px;
cursor: s-resize;
}
.active-box-verticalresize .gecko {
position: relative;
margin-top: -5px;
margin-bottom: -5px;
line-width: 12px;
z-index: 1000;
}
var origRowDivs = new Array(myData.length);
var lastRowIndex;
function expandIt(src, playerid) {
currentRowIndex=src.getProperty("row/index");
currentRow=obj.getProperty("row/template",currentRowIndex);
currentRowElement=currentRow.element();
if (lastRowIndex) {
lastRow=obj.getProperty("row/template",lastRowIndex);
lastRowElement=lastRow.element();
lastRowElement.innerHTML=origRowDivs[lastRowIndex];
origRowDivs[lastRowIndex]=null;
}
if(origRowDivs[currentRowIndex] == null && lastRowIndex != currentRowIndex) {
origRowDivs [currentRowIndex]=currentRowElement.innerHTML;
currentRowElement.innerHTML="<DIV>"+currentRowElement.innerHTML+"<DIV class='confirmdraft'>Expanded Row Text</DIV></DIV>";
lastRowIndex = currentRowIndex;
} else {
lastRowIndex = 0;
}
}
This topic is archived.