:: Forum >>

Drag and Drop Rows

I have drag and drop columns working for me, and was searching for drag and drop rows. I found the following link..

http://www.activewidgets.com/javascript.forum.3809.8/i-wrote-a-drag-and.html

And tested out the code on that persons site and it would not work. It would grab the row and start to pull it to the next location, but would not drop it. Tried it both with mozilla and ie. Any others get it to work?

I tried to take the code and get it to work on my grid and did not have any success.

Anyone have some good drop and drag row ideas or code?
Anthony
Friday, September 23, 2005
Hello Anthony,

here is some code that maybe helps.
it works well under ie, under firefox it works only when mouse down event occurs on text in a column and not on free space.

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 '';
}
}

Gernot
Tuesday, September 27, 2005
Thanks,

I gave it a try and I get an error on the bold line below stating "Object Required"

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 '';
}
}


I assume it is because of the line above it is not properly getting the object:
var elementItem = document.getElementById('ddItem');

specifically "ddItem" Where is this element at? or should be placed?
Anthony
Tuesday, September 27, 2005
I guess the bold brackets did not work within code brackets but here is the section I am referring to in the error.

// 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);
}
}
Anthony
Tuesday, September 27, 2005
Hello,

the 'ddItem' is the item which should be shown while moving the mouse, this could be something like that:

<span id='ddItem' style='position:absolute;display:none;'>List Item</span>
Gernot
Tuesday, September 27, 2005
excuse my ignorance but I setup a simple example but it does not work. Can you look at it to see what is wrong?

/*********** 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 '';
}
}
/*********************************/
Anthony
Tuesday, September 27, 2005
Still have not found a good solution...
Anthony
Wednesday, September 28, 2005
Hello,

can you specify your problem, what happens (or what does not happen)?

anyway, if you are using ie, you should change the window.captureEvents, winndow.releaseEvents and window.onmouse... to document.captureEvents, document.releaseEvents and document.onmouse...
Gernot
Thursday, September 29, 2005
Ok, I tried the change on what you suggested, but it did not work. When I click on a row to get ready to drag it down or up, the first think it does after the click is an error "Line 310 'gecko' is undefined".

Here is my code:

<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>
Anthony
Thursday, September 29, 2005
Hello,

'if (gecko)' is to check the browser type. just implement something like this:

gecko = navigator.userAgent.indexOf("Gecko") != -1;

Gernot
Friday, September 30, 2005
Everytime I fix and error another one pops up.

Now line 349 ddX is "undefined"

I am confused as hell now of how to go about fixing everything.

Does the following code work for you?

<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>
Anthony
Friday, September 30, 2005
Hi,
I have a reporting solution, and in my ouput(view in Html ) page I need to add new features like, while dragging a column header to top, I want the all the data to be rearranged so that this(particular) column is on top, and all other data are same...
Will anyone help on this .

Thanks in advance,
Ganesh
Ganesh
Saturday, October 1, 2005
Hello Anthony,

ddX and ddY represent the current mouse position, just put something like this above in your js-code:

var ddX = 0;
var ddY = 0;

the first time your getItemXY function is called the coordinates will be initialized.
Gernot
Monday, October 3, 2005
very nice script but hey where is end of it? it gives you only id's fromitem, toitem. where is swap function?
ilyag
Tuesday, November 29, 2005
Hello ilyag,

the intention of the script was not to swap rows, but to do some assignment stuff with the two rows, but here is what you can do to swap rows:

var rows = obj.getRowProperty("values");
var toRow = rows[toItem];
rows[toItem] = rows[fromItem];
rows[fromItem] = toRow;
obj.setRowProperty("values", rows);
obj.refresh();
Gernot
Wednesday, November 30, 2005

This topic is archived.


Back to support forum

Forum search