obj.getTemplate("row").setEvent("onmousedown", moveItemDown);
obj.getTemplate("row").setEvent("onmouseup", moveItemUp);
// handles mouse down events on rows
function moveItemDown(e)
{
if (e.button == 2)
{
return;
}
grid = getGridObj(e.srcElement);
fromItem = getLineIndexByEvent(e);
doItemDD = 1;
grid.setProperty("selection/index", fromItem);
if (window.Event)
{
window.captureEvents(Event.MOUSEMOVE);
window.captureEvents(Event.MOUSEOVER);
window.captureEvents(Event.MOUSEOUT);
}
window.onmousedown = doItemMove;
window.onmousemove = getItemXY;
window.onmouseup = endItemMove;
}
// handles mouse up events on rows
function moveItemUp(e)
{
if (e.button == 2)
{
return;
}
var elementItem = document.getElementById('ddItem');
if (doItemDD == 1)
{
doItemDD = 0;
[b]elementItem.style.display = 'none';[/b]
grid = getGridObj(e.srcElement);
elementItem.style.display = 'none';
toItem = getLineIndexByEvent(e);
if (toItem == fromItem)
{
return;
}
grid.setProperty("selection/index", toItem);
}
if (window.Event)
{
window.releaseEvents(Event.MOUSEMOVE);
window.releaseEvents(Event.MOUSEOVER);
window.releaseEvents(Event.MOUSEOUT);
}
}
// evaluates x-/y-coordinates
function getItemXY(e)
{
if (gecko)
{
event = e;
}
var elementItem = document.getElementById('ddItem');
if (doItemDD == 1)
{
if (window.Event)
{
ddX = event.pageX;
ddY = event.pageY;
}
else
{
ddX = event.clientX;
ddY = event.clientY;
}
elementItem.style.left = ddX + 'px';
elementItem.style.top = ddY + 'px';
elementItem.style.display = 'block';
}
else
{
elementItem.style.display = 'none';
}
}
// performs move event
function doItemMove(e)
{
if (doItemDD == 1)
{
var elementItem = document.getElementById('ddItem');
elementItem.style.left = ddX;
elementItem.style.top = ddY;
}
}
// ends move event
function endItemMove(e)
{
setTimeout('hideDDItem();', 500);
}
// hides drag&drop item
function hideDDItem()
{
var elementItem = document.getElementById('ddItem');
doItemDD = 0;
elementItem.style.display = 'none';
}
// retrieves the column index according to given mouse event
function getLineIndexByEvent(e)
{
var lineId = e.srcElement.id.substring(e.srcElement.id.indexOf(":") + 1);
var end = lineId.length;
if (lineId.indexOf(".") != -1)
{
end = lineId.indexOf(".");
}
else if (lineId.indexOf("/") != -1)
{
end = lineId.indexOf("/");
}
var lineIndex = lineId.substring(0, end);
return lineIndex;
}
// retrieves the grid object according to given element
function getGridObj(el)
{
try
{
var id = el.id;
if (id == '')
{
id = el.parentNode.id;
}
var gridId = id.substring(0, id.indexOf('.'));
var gridObj = Active.System.all[gridId];
return gridObj;
}
catch (_err)
{
return '';
}
}
/*********** Row Dragging ******************/
obj.getTemplate("row").setEvent("onmousedown", moveItemDown);
obj.getTemplate("row").setEvent("onmouseup", moveItemUp);
// handles mouse down events on rows
function moveItemDown(e)
{
if (e.button == 2)
{
return;
}
grid = getGridObj(e.srcElement);
fromItem = getLineIndexByEvent(e);
doItemDD = 1;
grid.setProperty("selection/index", fromItem);
if (window.Event)
{
window.captureEvents(Event.MOUSEMOVE);
window.captureEvents(Event.MOUSEOVER);
window.captureEvents(Event.MOUSEOUT);
}
window.onmousedown = doItemMove;
window.onmousemove = getItemXY;
window.onmouseup = endItemMove;
}
// handles mouse up events on rows
function moveItemUp(e)
{
if (e.button == 2)
{
return;
}
var elementItem = document.getElementById('ddItem');
if (doItemDD == 1)
{
doItemDD = 0;
elementItem.style.display = 'none';
grid = getGridObj(e.srcElement);
elementItem.style.display = 'none';
toItem = getLineIndexByEvent(e);
if (toItem == fromItem)
{
return;
}
grid.setProperty("selection/index", toItem);
}
if (window.Event)
{
window.releaseEvents(Event.MOUSEMOVE);
window.releaseEvents(Event.MOUSEOVER);
window.releaseEvents(Event.MOUSEOUT);
}
}
// evaluates x-/y-coordinates
function getItemXY(e)
{
if (gecko)
{
event = e;
}
var elementItem = document.getElementById('ddItem');
if (doItemDD == 1)
{
if (window.Event)
{
ddX = event.pageX;
ddY = event.pageY;
}
else
{
ddX = event.clientX;
ddY = event.clientY;
}
elementItem.style.left = ddX + 'px';
elementItem.style.top = ddY + 'px';
elementItem.style.display = 'block';
}
else
{
elementItem.style.display = 'none';
}
}
// performs move event
function doItemMove(e)
{
if (doItemDD == 1)
{
var elementItem = document.getElementById('ddItem');
elementItem.style.left = ddX;
elementItem.style.top = ddY;
}
}
// ends move event
function endItemMove(e)
{
setTimeout('hideDDItem();', 500);
}
// hides drag&drop item
function hideDDItem()
{
var elementItem = document.getElementById('ddItem');
doItemDD = 0;
elementItem.style.display = 'none';
}
// retrieves the column index according to given mouse event
function getLineIndexByEvent(e)
{
var lineId = e.srcElement.id.substring(e.srcElement.id.indexOf(":") + 1);
var end = lineId.length;
if (lineId.indexOf(".") != -1)
{
end = lineId.indexOf(".");
}
else if (lineId.indexOf("/") != -1)
{
end = lineId.indexOf("/");
}
var lineIndex = lineId.substring(0, end);
return lineIndex;
}
// retrieves the grid object according to given element
function getGridObj(el)
{
try
{
var id = el.id;
if (id == '')
{
id = el.parentNode.id;
}
var gridId = id.substring(0, id.indexOf('.'));
var gridObj = Active.System.all[gridId];
return gridObj;
}
catch (_err)
{
return '';
}
}
/*********************************/
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>
<!-- grid format -->
<style id='gridStyle'>
.active-controls-grid {height: 90%; font: menu;top:50px;}
.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedshadow;}
.active-scroll-left, .active-scroll-corner {display: none}
.active-scroll-top, .active-scroll-data {padding-left: 0px}
.active-grid-row {height: auto;}
.active-row-highlight {background-color: #CCFFFF}
.active-row-highlight .active-row-cell {background-color: #CCFFFF;}
.active-cell-highlight {background-color: #FF99FF!important}
@media print
{
.active-scroll-bars,
.active-scroll-left,
.active-scroll-corner {
display: none;
}
.active-scroll-top {
position: absolute;
overflow: visible;
width: auto!important;
height: auto!important;
}
.active-controls-grid {
overflow: visible;
height: auto;
width: auto;
}
.active-scroll-data {
position: absolute;
overflow: visible;
width: auto!important;
height: auto!important;
}
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
}
</style>
<!-- grid data -->
<script>
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];
var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<span id='ddItem' style='position:absolute;display:none;'>List Item</span>
<script>
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// set number of rows/columns
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);
// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
/*** Mouseover Event and DblClick Event***/
//Highlights Entire Row
var row = new Active.Templates.Row;
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");
obj.setTemplate("row", row);
//Highlights Cell
var column = new Active.Templates.Text;
column.setEvent("onmouseover", "mouseover(this, 'active-cell-highlight')");
column.setEvent("onmouseout", "mouseout(this, 'active-cell-highlight')");
obj.setColumnTemplate(column);
//On Double-Click
// row.setEvent("ondblclick", function(){this.action("dblClickAction")});
// obj.setAction("dblClickAction", function(src){
// columnindex();
// });
/*******************************/
/**** Column dragging ************/
var header = obj.getTemplate("top/item");
var mousedown = false;
var startX;
var startY;
var startElement;
var startElementChild;
var dragStart = function(event) {
startX=event.screenX;
startY=event.screenY;
startElementChild=event.srcElement;
startElement=startElementChild.parentNode;
startElement.width=startElement.offsetWidth;
startElement.height=startElement.offsetHeight;
if (startElement.height==0) startElement.parent.offsetHeight;
var offsetObj = startElement;
startElement.x = 0;
startElement.y = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
startElement.x += offsetObj.offsetLeft
startElement.y += offsetObj.offsetTop
offsetObj = offsetObj.offsetParent
}
mousedown = true;
}
var drag = function(event) {
var x=event.screenX;
var y=event.screenY;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) dragHeaderDiv.style.left = x;
else if(mousedown && (x<startElement.x || x>(startElement.x+startElement.width))) {
var dragHeaderDiv = startElement.cloneNode(true)
dragHeaderDiv.id = "dragHeaderDiv";
dragHeaderDiv.className = dragHeaderDiv.className.replace(RegExp("sort-(ascending|descending)", "g"), "sort-none");
dragHeaderDiv.className += " active-header-over";
dragHeaderDiv.setAttribute("onmouseleave","")
dragHeaderDiv.setAttribute("onmouseenter","")
dragHeaderDiv.style.position = "absolute";
dragHeaderDiv.style.left = x;
dragHeaderDiv.style.top = startElement.y;
dragHeaderDiv.style.width = startElement.width;
dragHeaderDiv.style.height = startElement.height;
dragHeaderDiv.style.zIndex = 10000;
dragHeaderDiv.style.MozOpacity = 0.7;
dragHeaderDiv.style.filter = "alpha(opacity=70)"
startElement.parentNode.appendChild(dragHeaderDiv);
}
}
var getIndexFromId = function(id) {
var colonPos = id.indexOf(":");
var slashPos = id.indexOf("/");
var index = id.substring(colonPos+1);
if(slashPos!=-1) index = id.substring(0,slashPos);
var indices = obj.getColumnValues();
for(i=0;i<indices.length;i++) if(indices[i]==Number(index)) {index=i; break;}
return index;
}
var getHeaderIndexAt = function(x) {
var headersDiv = document.getElementById(obj.getId()+".layout/top");
var offsetObj = headersDiv;
var offsetX = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
offsetX += offsetObj.offsetLeft
offsetObj = offsetObj.offsetParent
}
var headers = headersDiv.childNodes;
var column = 0;
for(i=0;i<headers.length;i++) {
if(x>=offsetX && x<(headers[i].offsetWidth+offsetX)) { column=i; break; }
offsetX+=headers[i].offsetWidth;
}
return column;
}
var dragEnd = function(event) {
mousedown = false;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) {
startElement.parentNode.removeChild(dragHeaderDiv);
var x=event.screenX;
var dragIndex = getIndexFromId(startElement.id);
var dropIndex = getHeaderIndexAt(x);
var indices = obj.getColumnValues();
dropIndex = dropIndex>(indices.length-1)?(indices.length-1):dropIndex;
var move = false;
var dragValue = indices[dragIndex];
if(dragIndex<dropIndex) for(i=dragIndex;i<dropIndex;i++) indices[i]=indices[i+1];
else for(i=dragIndex;i>dropIndex;i--) indices[i]=indices[i-1];
indices[dropIndex] = dragValue;
obj.setColumnValues(indices);
obj.refresh();
}
else if(event.srcElement==startElementChild) {
header.setClass("header", "pressed");
window.status = "Sorting...";
header.timeout(function(){header.action("columnSort")});
}
}
header.setEvent("onmousedown", dragStart);
obj.setEvent("onmouseup", dragEnd);
obj.setEvent("onmousemove", drag);
/*******************************/
/*********** Row Dragging ******************/
obj.getTemplate("row").setEvent("onmousedown", moveItemDown);
obj.getTemplate("row").setEvent("onmouseup", moveItemUp);
// handles mouse down events on rows
function moveItemDown(e)
{
if (e.button == 2)
{
return;
}
grid = getGridObj(e.srcElement);
fromItem = getLineIndexByEvent(e);
doItemDD = 1;
grid.setProperty("selection/index", fromItem);
if (window.Event)
{
document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.MOUSEOVER);
document.captureEvents(Event.MOUSEOUT);
}
document.onmousedown = doItemMove;
document.onmousemove = getItemXY;
document.onmouseup = endItemMove;
}
// handles mouse up events on rows
function moveItemUp(e)
{
if (e.button == 2)
{
return;
}
var elementItem = document.getElementById('ddItem');
if (doItemDD == 1)
{
doItemDD = 0;
elementItem.style.display = 'none';
grid = getGridObj(e.srcElement);
elementItem.style.display = 'none';
toItem = getLineIndexByEvent(e);
if (toItem == fromItem)
{
return;
}
grid.setProperty("selection/index", toItem);
}
if (window.Event)
{
document.releaseEvents(Event.MOUSEMOVE);
document.releaseEvents(Event.MOUSEOVER);
document.releaseEvents(Event.MOUSEOUT);
}
}
// evaluates x-/y-coordinates
function getItemXY(e)
{
if (gecko)
{
event = e;
}
var elementItem = document.getElementById('ddItem');
if (doItemDD == 1)
{
if (window.Event)
{
ddX = event.pageX;
ddY = event.pageY;
}
else
{
ddX = event.clientX;
ddY = event.clientY;
}
elementItem.style.left = ddX + 'px';
elementItem.style.top = ddY + 'px';
elementItem.style.display = 'block';
}
else
{
elementItem.style.display = 'none';
}
}
// performs move event
function doItemMove(e)
{
if (doItemDD == 1)
{
var elementItem = document.getElementById('ddItem');
elementItem.style.left = ddX;
elementItem.style.top = ddY;
}
}
// ends move event
function endItemMove(e)
{
setTimeout('hideDDItem();', 500);
}
// hides drag&drop item
function hideDDItem()
{
var elementItem = document.getElementById('ddItem');
doItemDD = 0;
elementItem.style.display = 'none';
}
// retrieves the column index according to given mouse event
function getLineIndexByEvent(e)
{
var lineId = e.srcElement.id.substring(e.srcElement.id.indexOf(":") + 1);
var end = lineId.length;
if (lineId.indexOf(".") != -1)
{
end = lineId.indexOf(".");
}
else if (lineId.indexOf("/") != -1)
{
end = lineId.indexOf("/");
}
var lineIndex = lineId.substring(0, end);
return lineIndex;
}
// retrieves the grid object according to given element
function getGridObj(el)
{
try
{
var id = el.id;
if (id == '')
{
id = el.parentNode.id;
}
var gridId = id.substring(0, id.indexOf('.'));
var gridObj = Active.System.all[gridId];
return gridObj;
}
catch (_err)
{
return '';
}
}
/*********************************/
// write grid html to the page
document.write(obj);
</script>
</body>
</html>
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>
<!-- grid format -->
<style id='gridStyle'>
.active-controls-grid {height: 90%; font: menu;top:50px;}
.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedshadow;}
.active-scroll-left, .active-scroll-corner {display: none}
.active-scroll-top, .active-scroll-data {padding-left: 0px}
.active-grid-row {height: auto;}
.active-row-highlight {background-color: #CCFFFF}
.active-row-highlight .active-row-cell {background-color: #CCFFFF;}
.active-cell-highlight {background-color: #FF99FF!important}
@media print
{
.active-scroll-bars,
.active-scroll-left,
.active-scroll-corner {
display: none;
}
.active-scroll-top {
position: absolute;
overflow: visible;
width: auto!important;
height: auto!important;
}
.active-controls-grid {
overflow: visible;
height: auto;
width: auto;
}
.active-scroll-data {
position: absolute;
overflow: visible;
width: auto!important;
height: auto!important;
}
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
}
</style>
<!-- grid data -->
<script>
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];
var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<span id='ddItem' style='position:absolute;display:none;'>List Item</span>
<script>
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// set number of rows/columns
obj.setRowProperty("count", 20);
obj.setColumnProperty("count", 5);
// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
/*** Mouseover Event and DblClick Event***/
//Highlights Entire Row
var row = new Active.Templates.Row;
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");
obj.setTemplate("row", row);
//Highlights Cell
var column = new Active.Templates.Text;
column.setEvent("onmouseover", "mouseover(this, 'active-cell-highlight')");
column.setEvent("onmouseout", "mouseout(this, 'active-cell-highlight')");
obj.setColumnTemplate(column);
//On Double-Click
// row.setEvent("ondblclick", function(){this.action("dblClickAction")});
// obj.setAction("dblClickAction", function(src){
// columnindex();
// });
/*******************************/
/**** Column dragging ************/
var header = obj.getTemplate("top/item");
var mousedown = false;
var startX;
var startY;
var startElement;
var startElementChild;
var dragStart = function(event) {
startX=event.screenX;
startY=event.screenY;
startElementChild=event.srcElement;
startElement=startElementChild.parentNode;
startElement.width=startElement.offsetWidth;
startElement.height=startElement.offsetHeight;
if (startElement.height==0) startElement.parent.offsetHeight;
var offsetObj = startElement;
startElement.x = 0;
startElement.y = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
startElement.x += offsetObj.offsetLeft
startElement.y += offsetObj.offsetTop
offsetObj = offsetObj.offsetParent
}
mousedown = true;
}
var drag = function(event) {
var x=event.screenX;
var y=event.screenY;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) dragHeaderDiv.style.left = x;
else if(mousedown && (x<startElement.x || x>(startElement.x+startElement.width))) {
var dragHeaderDiv = startElement.cloneNode(true)
dragHeaderDiv.id = "dragHeaderDiv";
dragHeaderDiv.className = dragHeaderDiv.className.replace(RegExp("sort-(ascending|descending)", "g"), "sort-none");
dragHeaderDiv.className += " active-header-over";
dragHeaderDiv.setAttribute("onmouseleave","")
dragHeaderDiv.setAttribute("onmouseenter","")
dragHeaderDiv.style.position = "absolute";
dragHeaderDiv.style.left = x;
dragHeaderDiv.style.top = startElement.y;
dragHeaderDiv.style.width = startElement.width;
dragHeaderDiv.style.height = startElement.height;
dragHeaderDiv.style.zIndex = 10000;
dragHeaderDiv.style.MozOpacity = 0.7;
dragHeaderDiv.style.filter = "alpha(opacity=70)"
startElement.parentNode.appendChild(dragHeaderDiv);
}
}
var getIndexFromId = function(id) {
var colonPos = id.indexOf(":");
var slashPos = id.indexOf("/");
var index = id.substring(colonPos+1);
if(slashPos!=-1) index = id.substring(0,slashPos);
var indices = obj.getColumnValues();
for(i=0;i<indices.length;i++) if(indices[i]==Number(index)) {index=i; break;}
return index;
}
var getHeaderIndexAt = function(x) {
var headersDiv = document.getElementById(obj.getId()+".layout/top");
var offsetObj = headersDiv;
var offsetX = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
offsetX += offsetObj.offsetLeft
offsetObj = offsetObj.offsetParent
}
var headers = headersDiv.childNodes;
var column = 0;
for(i=0;i<headers.length;i++) {
if(x>=offsetX && x<(headers[i].offsetWidth+offsetX)) { column=i; break; }
offsetX+=headers[i].offsetWidth;
}
return column;
}
var dragEnd = function(event) {
mousedown = false;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) {
startElement.parentNode.removeChild(dragHeaderDiv);
var x=event.screenX;
var dragIndex = getIndexFromId(startElement.id);
var dropIndex = getHeaderIndexAt(x);
var indices = obj.getColumnValues();
dropIndex = dropIndex>(indices.length-1)?(indices.length-1):dropIndex;
var move = false;
var dragValue = indices[dragIndex];
if(dragIndex<dropIndex) for(i=dragIndex;i<dropIndex;i++) indices[i]=indices[i+1];
else for(i=dragIndex;i>dropIndex;i--) indices[i]=indices[i-1];
indices[dropIndex] = dragValue;
obj.setColumnValues(indices);
obj.refresh();
}
else if(event.srcElement==startElementChild) {
header.setClass("header", "pressed");
window.status = "Sorting...";
header.timeout(function(){header.action("columnSort")});
}
}
header.setEvent("onmousedown", dragStart);
obj.setEvent("onmouseup", dragEnd);
obj.setEvent("onmousemove", drag);
/*******************************/
/*********** Row Dragging ******************/
obj.getTemplate("row").setEvent("onmousedown", moveItemDown);
obj.getTemplate("row").setEvent("onmouseup", moveItemUp);
gecko = navigator.userAgent.indexOf("Gecko") != -1;
// handles mouse down events on rows
function moveItemDown(e)
{
if (e.button == 2)
{
return;
}
grid = getGridObj(e.srcElement);
fromItem = getLineIndexByEvent(e);
doItemDD = 1;
grid.setProperty("selection/index", fromItem);
if (window.Event)
{
document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.MOUSEOVER);
document.captureEvents(Event.MOUSEOUT);
}
document.onmousedown = doItemMove;
document.onmousemove = getItemXY;
document.onmouseup = endItemMove;
}
// handles mouse up events on rows
function moveItemUp(e)
{
if (e.button == 2)
{
return;
}
var elementItem = document.getElementById('ddItem');
if (doItemDD == 1)
{
doItemDD = 0;
elementItem.style.display = 'none';
grid = getGridObj(e.srcElement);
elementItem.style.display = 'none';
toItem = getLineIndexByEvent(e);
if (toItem == fromItem)
{
return;
}
grid.setProperty("selection/index", toItem);
}
if (window.Event)
{
document.releaseEvents(Event.MOUSEMOVE);
document.releaseEvents(Event.MOUSEOVER);
document.releaseEvents(Event.MOUSEOUT);
}
}
// evaluates x-/y-coordinates
function getItemXY(e)
{
if (gecko)
{
event = e;
}
var elementItem = document.getElementById('ddItem');
if (doItemDD == 1)
{
if (window.Event)
{
ddX = event.pageX;
ddY = event.pageY;
}
else
{
ddX = event.clientX;
ddY = event.clientY;
}
elementItem.style.left = ddX + 'px';
elementItem.style.top = ddY + 'px';
elementItem.style.display = 'block';
}
else
{
elementItem.style.display = 'none';
}
}
// performs move event
function doItemMove(e)
{
if (doItemDD == 1)
{
var elementItem = document.getElementById('ddItem');
elementItem.style.left = ddX;
elementItem.style.top = ddY;
}
}
// ends move event
function endItemMove(e)
{
setTimeout('hideDDItem();', 500);
}
// hides drag&drop item
function hideDDItem()
{
var elementItem = document.getElementById('ddItem');
doItemDD = 0;
elementItem.style.display = 'none';
}
// retrieves the column index according to given mouse event
function getLineIndexByEvent(e)
{
var lineId = e.srcElement.id.substring(e.srcElement.id.indexOf(":") + 1);
var end = lineId.length;
if (lineId.indexOf(".") != -1)
{
end = lineId.indexOf(".");
}
else if (lineId.indexOf("/") != -1)
{
end = lineId.indexOf("/");
}
var lineIndex = lineId.substring(0, end);
return lineIndex;
}
// retrieves the grid object according to given element
function getGridObj(el)
{
try
{
var id = el.id;
if (id == '')
{
id = el.parentNode.id;
}
var gridId = id.substring(0, id.indexOf('.'));
var gridObj = Active.System.all[gridId];
return gridObj;
}
catch (_err)
{
return '';
}
}
/*********************************/
// write grid html to the page
document.write(obj);
</script>
</body>
</html>
This topic is archived.