3.2.0
Forum Demo Guide API Store

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
September 23,
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
September 27,
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
September 27,
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
September 27,
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
September 27,
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
September 27,
Still have not found a good solution...
Anthony
September 28,
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
September 29,
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
September 29,
Hello,

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

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

Gernot
September 30,
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
September 30,
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
October 1,
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
October 3,
very nice script but hey where is end of it? it gives you only id's fromitem, toitem. where is swap function?
ilyag
November 29,
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
November 30,

This topic is archived.

See also:

i wrote a drag and drop row script Andres Obrero from Winterthur Switzerland (9)
Row Height for Multi-Line Data Cells Dean (22)
is there a way to get the first 15 rows of the grid? JJ (24)
Add and Delete a row in Grid MAK (21)
expand a row when it is clicked to display details Frank Gualtieri (14)
Alternate background color of each row (15)
Font Size and Row Height Chris Mitchell (15)
Changing color of selected row(s) Curtis Hughes (14)
Clicking Row Headers Dav (12)
Drop-down Editable Textarea Template.... Carlos (13)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us