<html>
<head>
<script src="runtime/lib/aw.js"></script>
<link href="runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
This is a very simple drag and drop example to move rows. <b>Click and drag a cell to move a row to a new location</b>.
<hr>
<style>
#myGrid { width: 600px; height:350px; margin: 0px; padding: 0px}
#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
</style>
<script>
var HeaderText = ["Number","Description"];
var CellText = [
["1","Description 1"],
["2","Description 2"],
["3","Description 3"],
["4","Description 4"],
["5","Description 5"],
["6","Description 6"],
["7","Description 7"],
["8","Description 8"],
["9","Description 9"],
["10","Description 10"],
["11","Description 11"],
["12","Description 12"],
["13","Description 13"],
["14","Description 14"],
["15","Description 15"]
];
var obj = new AW.UI.Grid;
obj.setId("myGrid"); // necessary for CSS rules
obj.setHeaderText(HeaderText);
obj.setCellText(CellText);
obj.setColumnCount(2);
obj.setRowCount(15);
// DISABLE SORTING - This simple example will not work if sorted
obj.onHeaderClicked = function(event,index){return 'disabled'};
obj.setSelectionMode("single-row");
document.write(obj);
// THESE ARE CALLED TO START AND STOP THE DRAG AND DROP OF ROWS
obj.onCellMouseDown = function(event, column, row){ if (column>0) dragstart(event, column, row) };
obj.onCellMouseUp = function(event, column, row){ dragstop(column, row) };
// DRAGGING FUNCTIONS
var startrow, endrow
function dragstart(e, column, row){
startrow=row;
window.status = "Drag Start Row:"+row;
}
function dragstop(column, row){
if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=null;
stoprow=row;
window.status = window.status + " dragstop row=" + stoprow;
// NOTE: THE TIMES 1 (*1) IN ALL CODE BELOW
// IS TO MAKE SURE JAVASCRIPT TREATS THE VARS
// AS NUMBERS INSTEAD OF STRINGS
//
// THIS CODE ONLY WORKS FOR A GRID BASED ON AN ARRAY.
// IT USES THE "splice" COMMAND TO ADD AND DELETE
// ROWS DIRECTLY IN THE ARRAY.
//
// ex. splice (start position, num of rows to delete, optional data to insert)
// To delete 1 row use splice(rowindex,1)
// To add a row without deleting another use spice(rowindex,0,newdata)
// GET CONTENTS OF DRAG ROW... NOTE THIS GETS THE ENTIRE ROW
// SUCH AS ["7","Description 7"]
var startrowcontents = CellText[startrow];
if ( (stoprow*1) > (startrow*1)) {
// DRAG AND DROP IN DOWNWARD DIRECTION
CellText.splice((stoprow*1)+1,0,startrowcontents); //INSERT DRAG ROW BELOW DROP ROW
CellText.splice(startrow,1); // DELETE DRAG ROW
// DRAG AND DROP IN UPWARD DIRECTION
} else if ((stoprow*1) < (startrow*1)) {
CellText.splice((stoprow*1),0,startrowcontents); // INSERT DRAG ROW ABOVE DROP ROW
CellText.splice((startrow*1)+1,1); // DELETE DRAG ROW, NOTE IT IS PUSHED DOWN 1 BECAUSE OF THE INSERT ABOVE
// DRAG AND DROP TO SAME ROW (IGNORE)
} else {
window.status = "Don't Move ... Start and Stop Row are the same ("+startrow+","+stoprow+")";
}
// FYI... IF YOU WANTED TO HARD CODE THE DATA TO INSERT IT WOULD LOOK LIKE THIS
// CellText.splice(stoprow,0,["17","Description 17"]);
obj.refresh();
}
</script>
<hr>
I tested it using AW 2.0 beta 4 and IE and Firefox 1.0. It has several limitations
<ul>
<li>Only works on ARRAY based grid.
<li>Array is manipulated directly using splice. I wanted to use addRow and deleteRow but I couldn't figure out how to set the insert location for addRow (it was always inserting at the end of the grid).
<li>No visual feedback when dragging the row ... please someone figure out how to add that :)
<li>Sorting is not supported so it is disabled
</ul>
</body>
</html>
function del(){
var insertindex=obj.getCurrentRow();
CellText.splice(insertindex,1);
obj.setRowCount(obj.getRowCount()-1);
obj.refresh();
}
function add(){
var insertindex=obj.getCurrentRow();
CellText.splice((insertindex*1)+1,0,["new","new"]);
obj.setRowCount(obj.getRowCount()+1);
obj.refresh();
}
<button onclick="add()">add row below current</button>
<button onclick="del()">delete current row</button>
// THESE ARE CALLED TO START AND STOP THE DRAG AND DROP OF ROWS
obj.onCellMouseDown = function(event, column, row){
if (column>0) {dragstart(event, column, row) }
else { startrow = null }
};
obj.onCellMouseUp = function(event, column, row){
if (startrow) { dragstop(column, row) }
};
var RowsArea = obj.getRowsTemplate();
var mouseCelldown = false;
var RowTarget;
var CellTarget;
var TopRowTG;
var rightScroll;
var bottomScroll;
/*****************/
var dragColStart = function(event) {
if(!AW.ie) { CellTarget = event.target }
else{ CellTarget = event.srcElement }
var sECId = CellTarget.id ;
if (sECId.indexOf("-box-text") > 0 ){ RowTarget = CellTarget.parentNode.parentNode }
else { RowTarget = CellTarget.parentNode }
rightScroll = obj.getScrollLeft();
bottomScroll = obj.getScrollTop();
TopRowTG = RowTarget.parentNode.firstChild;
RowTarget.width=RowTarget.offsetWidth;
RowTarget.height=RowTarget.offsetHeight;
///get column number
var arrofcolumns = CellTarget.id.split("-");
//disable row-drag visual effect on some rows (IN CURRENT SAMPLE ROW 0 IS DISABLED)
if ( arrofcolumns[2] >0 ){ mouseCelldown = true }
else {mouseCelldown = false }
}
/********************************/
var dragCol = function(event) {
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
var DragRow = document.getElementById('DragRow');
if(DragRow) {
if(!AW.ie){
if(rightScroll==0){ DragRow.style.left = x - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
else{ DragRow.style.left = x + rightScroll - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
if(bottomScroll==0){ DragRow.style.top = y - AW.getTop(TopRowTG) + 3; }
else{ DragRow.style.top = y + bottomScroll - AW.getTop(TopRowTG) + 3 }
}
if( AW.ie){
DragRow.style.left = x - window.screenLeft - AW.getLeft(CellTarget) - obj.getSelectorWidth() + 8 ;
DragRow.style.top = y - window.screenTop - AW.getTop(TopRowTG) + 3 ;
}
}
else if(mouseCelldown){
var DragRow = RowTarget.cloneNode(true)
DragRow.id = "DragRow";
DragRow.style.position = "absolute";
DragRow.style.width = RowTarget.width;
DragRow.style.height = RowTarget.height;
DragRow.style.zIndex = 1000000;
DragRow.style.MozOpacity = 0.7;
DragRow.style.filter = "alpha(opacity=70)"
RowTarget.parentNode.appendChild(DragRow);
}
}
/***********************/
obj.setEvent("onmousemove", dragCol);
RowsArea.setEvent("onmousedown", dragColStart);
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
This is a very simple drag and drop example to move rows. <b>Click and drag a cell to move a row to a new location</b>.
<hr>
<style>
#myGrid { width: 300px; height:150px; margin: 0px; padding: 0px}
#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myGrid {-moz-user-select: none}
</style>
<script>
var HeaderText = ["Number","Description"];
var CellText = [
["1","Description 1"],
["2","Description 2"],
["3","Description 3"],
["4","Description 4"],
["5","Description 5"],
["6","Description 6"],
["7","Description 7"],
["8","Description 8"],
["9","Description 9"],
["10","Description 10"],
["11","Description 11"],
["12","Description 12"],
["13","Description 13"],
["14","Description 14"],
["15","Description 15"]
];
var obj = new AW.UI.Grid;
obj.setId("myGrid"); // necessary for CSS rules
obj.setHeaderText(HeaderText);
obj.setCellText(CellText);
obj.setColumnCount(2);
obj.setRowCount(15);
// DISABLE SORTING - This simple example will not work if sorted
obj.onHeaderClicked = function(event,index){return 'disabled'};
obj.setSelectionMode("single-row");
obj.setSelectorVisible(true);
// obj.setSelectorResizable(true);
obj.setSelectorWidth(25);
// obj.setControlSize(100, 200); // width, height
// obj.setControlPosition(327, 50); // left, top - adds 'position:absolute'
// document.write(obj);
// THESE ARE CALLED TO START AND STOP THE DRAG AND DROP OF ROWS
obj.onCellMouseDown = function(event, column, row){
if (column>0) {dragstart(event, column, row) }
else { startrow = null }
};
obj.onCellMouseUp = function(event, column, row){
if (startrow) { dragstop(column, row) }
};
// DRAGGING FUNCTIONS
var startrow, endrow ;
/**********************/
function dragstart(e, column, row){
startrow=row;
window.status = "Drag Start Row:"+row;
}
function dragstop(column, row){
// if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=null;
stoprow=row;
window.status = window.status + " dragstop row=" + stoprow;
// NOTE: THE TIMES 1 (*1) IN ALL CODE BELOW
// IS TO MAKE SURE JAVASCRIPT TREATS THE VARS
// AS NUMBERS INSTEAD OF STRINGS
//
// THIS CODE ONLY WORKS FOR A GRID BASED ON AN ARRAY.
// IT USES THE "splice" COMMAND TO ADD AND DELETE
// ROWS DIRECTLY IN THE ARRAY.
//
// ex. splice (start position, num of rows to delete, optional data to insert)
// To delete 1 row use splice(rowindex,1)
// To add a row without deleting another use spice(rowindex,0,newdata)
// GET CONTENTS OF DRAG ROW... NOTE THIS GETS THE ENTIRE ROW
// SUCH AS ["7","Description 7"]
var startrowcontents = CellText[startrow];
if ( (stoprow*1) > (startrow*1)) {
// DRAG AND DROP IN DOWNWARD DIRECTION
CellText.splice((stoprow*1)+1,0,startrowcontents); //INSERT DRAG ROW BELOW DROP ROW
CellText.splice(startrow,1); // DELETE DRAG ROW
// DRAG AND DROP IN UPWARD DIRECTION
} else if ((stoprow*1) < (startrow*1)) {
CellText.splice((stoprow*1),0,startrowcontents); // INSERT DRAG ROW ABOVE DROP ROW
CellText.splice((startrow*1)+1,1); // DELETE DRAG ROW, NOTE IT IS PUSHED DOWN 1 BECAUSE OF THE INSERT ABOVE
// DRAG AND DROP TO SAME ROW (IGNORE)
} else {
window.status = "Don't Move ... Start and Stop Row are the same ("+startrow+","+stoprow+")";
}
// FYI... IF YOU WANTED TO HARD CODE THE DATA TO INSERT IT WOULD LOOK LIKE THIS
// CellText.splice(stoprow,0,["17","Description 17"]);
obj.setSelectedRows([stoprow]);
mouseCelldown = false;
obj.refresh();
}
function del(){
var insertindex=obj.getCurrentRow();
CellText.splice(insertindex,1);
obj.setRowCount(obj.getRowCount()-1);
obj.refresh();
}
function add(){
var insertindex=obj.getCurrentRow();
CellText.splice((insertindex*1)+1,0,["new","new"]);
obj.setRowCount(obj.getRowCount()+1);
obj.refresh();
}
/************************/
var RowsArea = obj.getRowsTemplate();
var mouseCelldown = false;
var RowTarget;
var CellTarget;
var TopRowTG;
var rightScroll;
var bottomScroll;
/*****************/
var dragColStart = function(event) {
if(!AW.ie) { CellTarget = event.target }
else{ CellTarget = event.srcElement }
var sECId = CellTarget.id ;
if (sECId.indexOf("-box-text") > 0 ){ RowTarget = CellTarget.parentNode.parentNode }
else { RowTarget = CellTarget.parentNode }
rightScroll = obj.getScrollLeft();
bottomScroll = obj.getScrollTop();
TopRowTG = RowTarget.parentNode.firstChild;
RowTarget.width=RowTarget.offsetWidth;
RowTarget.height=RowTarget.offsetHeight;
///get column number
var arrofcolumns = CellTarget.id.split("-");
//disable row-drag visual effect on some COLUMNS (IN CURRENT SAMPLE DRAG IN COLUMN-0 IS DISABLED)
if ( arrofcolumns[2] >0 ){ mouseCelldown = true }
else {mouseCelldown = false }
}
/********************************/
var dragCol = function(event) {
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
var DragRow = document.getElementById('DragRow');
if(DragRow) {
if(!AW.ie){
if(rightScroll==0){ DragRow.style.left = x - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
else{ DragRow.style.left = x + rightScroll - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
if(bottomScroll==0){ DragRow.style.top = y - AW.getTop(TopRowTG) + 3; }
else{ DragRow.style.top = y + bottomScroll - AW.getTop(TopRowTG) + 3 }
}
if( AW.ie){
DragRow.style.left = x - window.screenLeft - AW.getLeft(CellTarget) - obj.getSelectorWidth() + 8 ;
DragRow.style.top = y - window.screenTop - AW.getTop(TopRowTG) + 3 ;
}
}
else if(mouseCelldown){
var DragRow = RowTarget.cloneNode(true)
DragRow.id = "DragRow";
DragRow.style.position = "absolute";
DragRow.style.width = RowTarget.width;
DragRow.style.height = RowTarget.height;
DragRow.style.zIndex = 1000000;
DragRow.style.MozOpacity = 0.7;
DragRow.style.filter = "alpha(opacity=70)"
RowTarget.parentNode.appendChild(DragRow);
}
}
/***********************/
obj.setEvent("onmousemove", dragCol);
RowsArea.setEvent("onmousedown", dragColStart);
document.write(obj);
</script>
<br>
<button onclick="add()">add row below current</button>
<button onclick="del()">delete current row</button>
<hr>
I tested it using AW 2.0 beta 4 and IE and Firefox 1.0. It has several limitations
<ul>
<li>Only works on ARRAY based grid.
<li>Array is manipulated directly using splice. I wanted to use addRow and deleteRow but I couldn't figure out how to set the insert location for addRow (it was always inserting at the end of the grid).
<li>No visual feedback when dragging the row ... please someone figure out how to add that :)
<li>Sorting is not supported so it is disabled
</ul>
</body>
</script>
</html>
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
This is a very simple drag and drop example to move rows. <b>Click and drag a cell to move a row to a new location</b>.
<hr>
<style>
#myGrid { width: 300px; height:150px; margin: 0px; padding: 0px}
#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myGrid {-moz-user-select: none}
</style>
<script>
var HeaderText = ["Number","Description"];
var CellText = [
["1","Description 1"],
["2","Description 2"],
["3","Description 3"],
["4","Description 4"],
["5","Description 5"],
["6","Description 6"],
["7","Description 7"],
["8","Description 8"],
["9","Description 9"],
["10","Description 10"],
["11","Description 11"],
["12","Description 12"],
["13","Description 13"],
["14","Description 14"],
["15","Description 15"]
];
var obj = new AW.UI.Grid;
obj.setId("myGrid"); // necessary for CSS rules
obj.setHeaderText(HeaderText);
obj.setCellText(CellText);
obj.setColumnCount(2);
obj.setRowCount(15);
// DISABLE SORTING - This simple example will not work if sorted
obj.onHeaderClicked = function(event,index){return 'disabled'};
obj.setSelectionMode("single-row");
obj.setSelectorVisible(true);
// obj.setSelectorResizable(true);
obj.setSelectorWidth(25);
// obj.setControlSize(100, 200); // width, height
// obj.setControlPosition(327, 50); // left, top - adds 'position:absolute'
// document.write(obj);
// THESE ARE CALLED TO START AND STOP THE DRAG AND DROP OF ROWS
obj.onCellMouseDown = function(event, column, row){
if (column>0) {dragstart(event, column, row) }
else { startrow = null }
};
obj.onCellMouseUp = function(event, column, row){
if (startrow) { dragstop(column, row) }
};
// DRAGGING FUNCTIONS
var startrow, endrow ;
var dragapproved=false
var offsetx, offsety, tmpx, tmpy, maxx, maxy,scrollupy, scrolldowny
/**********************/
function dragstart(e, column, row){
dragapproved=true;
startrow=row;
offsety=event.clientY;
scrollupy=obj.getHeaderHeight()+80;
scrolldowny=document.getElementById("myGrid").offsetHeight+20;
tmpy=obj.getScrollTop();
maxy=obj.getScrollHeight() - document.getElementById("myGrid").offsetHeight + 18;
// if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=dragdrop
window.status = "Drag Start Row:"+row;
}
function dragdrop(e){
if (dragapproved&&event.button==1){
if (event.clientY<scrollupy) {
window.status="go backwards Y: "+event.clientY;
y=obj.getScrollTop()-20;
if (y<0) y=0;
obj.setScrollTop(y);
}
if (event.clientY>scrolldowny) {
window.status="go to: "+event.clientY;
obj.setScrollTop(obj.getScrollTop()+20);
y=obj.getScrollTop()+20;
if (y>maxy)y=maxy;
obj.setScrollTop(y);
}
}
}
function dragstop(column, row){
dragapproved=false;
// if (document.getElementById("myGrid")) document.getElementById("myGrid").onmousemove=null;
stoprow=row;
window.status = window.status + " dragstop row=" + stoprow;
// NOTE: THE TIMES 1 (*1) IN ALL CODE BELOW
// IS TO MAKE SURE JAVASCRIPT TREATS THE VARS
// AS NUMBERS INSTEAD OF STRINGS
//
// THIS CODE ONLY WORKS FOR A GRID BASED ON AN ARRAY.
// IT USES THE "splice" COMMAND TO ADD AND DELETE
// ROWS DIRECTLY IN THE ARRAY.
//
// ex. splice (start position, num of rows to delete, optional data to insert)
// To delete 1 row use splice(rowindex,1)
// To add a row without deleting another use spice(rowindex,0,newdata)
// GET CONTENTS OF DRAG ROW... NOTE THIS GETS THE ENTIRE ROW
// SUCH AS ["7","Description 7"]
var startrowcontents = CellText[startrow];
if ( (stoprow*1) > (startrow*1)) {
// DRAG AND DROP IN DOWNWARD DIRECTION
CellText.splice((stoprow*1)+1,0,startrowcontents); //INSERT DRAG ROW BELOW DROP ROW
CellText.splice(startrow,1); // DELETE DRAG ROW
// DRAG AND DROP IN UPWARD DIRECTION
} else if ((stoprow*1) < (startrow*1)) {
CellText.splice((stoprow*1),0,startrowcontents); // INSERT DRAG ROW ABOVE DROP ROW
CellText.splice((startrow*1)+1,1); // DELETE DRAG ROW, NOTE IT IS PUSHED DOWN 1 BECAUSE OF THE INSERT ABOVE
// DRAG AND DROP TO SAME ROW (IGNORE)
} else {
window.status = "Don't Move ... Start and Stop Row are the same ("+startrow+","+stoprow+")";
}
// FYI... IF YOU WANTED TO HARD CODE THE DATA TO INSERT IT WOULD LOOK LIKE THIS
// CellText.splice(stoprow,0,["17","Description 17"]);
obj.setSelectedRows([stoprow]);
mouseCelldown = false;
obj.refresh();
}
function del(){
var insertindex=obj.getCurrentRow();
CellText.splice(insertindex,1);
obj.setRowCount(obj.getRowCount()-1);
obj.refresh();
}
function add(){
var insertindex=obj.getCurrentRow();
CellText.splice((insertindex*1)+1,0,["new","new"]);
obj.setRowCount(obj.getRowCount()+1);
obj.refresh();
}
/************************/
var RowsArea = obj.getRowsTemplate();
var mouseCelldown = false;
var RowTarget;
var CellTarget;
var TopRowTG;
var rightScroll;
var bottomScroll;
/*****************/
var dragColStart = function(event) {
if(!AW.ie) { CellTarget = event.target }
else{ CellTarget = event.srcElement }
var sECId = CellTarget.id ;
if (sECId.indexOf("-box-text") > 0 ){ RowTarget = CellTarget.parentNode.parentNode }
else { RowTarget = CellTarget.parentNode }
rightScroll = obj.getScrollLeft();
bottomScroll = obj.getScrollTop();
TopRowTG = RowTarget.parentNode.firstChild;
RowTarget.width=RowTarget.offsetWidth;
RowTarget.height=RowTarget.offsetHeight;
///get column number
var arrofcolumns = CellTarget.id.split("-");
//disable row-drag visual effect on some COLUMNS (IN CURRENT SAMPLE DRAG IN COLUMN-0 IS DISABLED)
if ( arrofcolumns[2] >0 ){ mouseCelldown = true }
else {mouseCelldown = false }
}
/********************************/
var dragCol = function(event) {
if (dragapproved&&event.button==1){
if (event.clientY<scrollupy) {
window.status="go backwards Y: "+event.clientY;
y=obj.getScrollTop()-20;
if (y<0) y=0;
obj.setScrollTop(y);
}
if (event.clientY>scrolldowny) {
window.status="go to: "+event.clientY;
obj.setScrollTop(obj.getScrollTop()+20);
y=obj.getScrollTop()+20;
if (y>maxy)y=maxy;
obj.setScrollTop(y);
}
}
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
var DragRow = document.getElementById('DragRow');
if(DragRow) {
if(!AW.ie){
if(rightScroll==0){ DragRow.style.left = x - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
else{ DragRow.style.left = x + rightScroll - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
if(bottomScroll==0){ DragRow.style.top = y - AW.getTop(TopRowTG) + 3; }
else{ DragRow.style.top = y + bottomScroll - AW.getTop(TopRowTG) + 3 }
}
if( AW.ie){
DragRow.style.left = x - window.screenLeft - AW.getLeft(CellTarget) - obj.getSelectorWidth() + 8 ;
DragRow.style.top = y - window.screenTop - AW.getTop(TopRowTG) + 3 ;
}
}
else if(mouseCelldown){
var DragRow = RowTarget.cloneNode(true) ;
DragRow.id = "DragRow";
DragRow.style.position = "absolute";
DragRow.style.width = RowTarget.width;
DragRow.style.height = RowTarget.height;
DragRow.style.zIndex = 1000000;
DragRow.style.MozOpacity = 0.7;
DragRow.style.filter = "alpha(opacity=70)"
RowTarget.parentNode.appendChild(DragRow);}
}
/***********************/
obj.setEvent("onmousemove", dragCol);
RowsArea.setEvent("onmousedown", dragColStart);
document.write(obj);
</script>
<br>
<button onclick="add()">add row below current</button>
<button onclick="del()">delete current row</button>
<hr>
I tested it using AW 2.0 beta 4 and IE and Firefox 1.0. It has several limitations
<ul>
<li>Only works on ARRAY based grid.
<li>Array is manipulated directly using splice. I wanted to use addRow and deleteRow but I couldn't figure out how to set the insert location for addRow (it was always inserting at the end of the grid).
<li>No visual feedback when dragging the row ... please someone figure out how to add that :)
<li>Sorting is not supported so it is disabled
</ul>
</body>
</script>
</html>
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
This is a very simple drag and drop example to move rows.<br>
<b>Click and drag a cell to move a row to a new location</b>.
<hr>
<style>
#myGrid { width: 300px; height:150px; margin: 0px; padding: 0px}
#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myGrid {-moz-user-select: none}
</style>
<script>
var HeaderText = ["Number","Description"];
var CellText = [
["1","Description 1"],
["2","Description 2"],
["3","Description 3"],
["4","Description 4"],
["5","Description 5"],
["6","Description 6"],
["7","Description 7"],
["8","Description 8"],
["9","Description 9"],
["10","Description 10"],
["11","Description 11"],
["12","Description 12"],
["13","Description 13"],
["14","Description 14"],
["15","Description 15"]
];
var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setHeaderText(HeaderText);
obj.setCellText(CellText);
obj.setColumnCount(2);
obj.setRowCount(15);
obj.setVirtualMode(false);
// DISABLE SORTING - This simple example will not work if sorted
obj.onHeaderClicked = function(event,index){return 'disabled'};
obj.setSelectionMode("single-row");
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
/**********************/
function DeleteSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice(insertindex,1);
obj.setRowCount(obj.getRowCount()-1);
obj.refresh();
}
/**********************/
function AddNewRowBelowSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice((insertindex*1)+1,0,["new","new"]);
obj.setRowCount(obj.getRowCount()+1);
obj.refresh();
}
// DRAGGING FUNCTIONS
var startrow, endrow ;
var MaxScrollTop;
var RowsArea = obj.getRowsTemplate();
var mouseCelldown = false;
var RowTarget;
var CellTarget;
var TopRowTG;
var rightScroll;
var bottomScroll;
/**********************/
// BEGIN DRAG & DROP - THIS RECORDS THE STARTING (DRAG) ROW
function dragstart(e, column, row){
startrow=row;
MaxScrollTop=obj.getScrollHeight() - document.getElementById("myGrid").offsetHeight + 18;
}
/**********************/
// END DRAG & DROP - THIS CODE MOVES THE DRAG ROW TO THE DROP LOCATION
function dragstop(column, row){
mouseCelldown=false;
stoprow=row;
// NOTE: THE TIMES 1 (*1) IN ALL CODE BELOW
// IS TO MAKE SURE JAVASCRIPT TREATS THE VARS
// AS NUMBERS INSTEAD OF STRINGS
//
// THIS CODE ONLY WORKS FOR A GRID BASED ON AN ARRAY.
// IT USES THE "splice" COMMAND TO ADD AND DELETE
// ROWS DIRECTLY IN THE ARRAY.
//
// ex. splice (start position, num of rows to delete, optional data to insert)
// To delete 1 row use splice(rowindex,1)
// To add a row without deleting another use spice(rowindex,0,newdata)
// GET CONTENTS OF DRAG ROW... NOTE THIS GETS THE ENTIRE ROW
// SUCH AS ["7","Description 7"]
var startrowcontents = CellText[startrow];
if ( (stoprow*1) > (startrow*1)) {
// DRAG AND DROP IN DOWNWARD DIRECTION
CellText.splice((stoprow*1)+1,0,startrowcontents); //INSERT DRAG ROW BELOW DROP ROW
CellText.splice(startrow,1); // DELETE DRAG ROW
// DRAG AND DROP IN UPWARD DIRECTION
} else if ((stoprow*1) < (startrow*1)) {
CellText.splice((stoprow*1),0,startrowcontents); // INSERT DRAG ROW ABOVE DROP ROW
CellText.splice((startrow*1)+1,1); // DELETE DRAG ROW, NOTE IT IS PUSHED DOWN 1 BECAUSE OF THE INSERT ABOVE
}
// FYI... IF YOU WANTED TO HARD CODE THE DATA TO INSERT IT WOULD LOOK LIKE THIS
// CellText.splice(stoprow,0,["17","Description 17"]);
obj.setSelectedRows([stoprow]);
obj.refresh();
}
/**********************/
// BEGIN DRAG & DROP - CREATES THE VISUAL FEEDBACK ROW
// THAT IS DISPLAYED WHILE ROW IS BEING DRAGGED
var dragRowStart = function(event) {
if(!AW.ie) { CellTarget = event.target }
else{ CellTarget = event.srcElement }
var sECId = CellTarget.id ;
if (sECId.indexOf("-box-text") > 0 ){
RowTarget = CellTarget.parentNode.parentNode }
else {
RowTarget = CellTarget.parentNode;
}
rightScroll = obj.getScrollLeft();
bottomScroll = obj.getScrollTop();
TopRowTG = RowTarget.parentNode.firstChild;
RowTarget.width=RowTarget.offsetWidth;
RowTarget.height=RowTarget.offsetHeight;
mouseCelldown = true;
}
/**********************/
// DRAG IN PROGRESS -
// 1) MOVES THE VISUAL FEEDBACK ROW
// 2) AUTO SCROLLS THE GRID IF NEEDED
var dragRowMouseMove = function(event) {
var NewFeedbackRowTop=0;
var NewFeedbackRowLeft=0;
bottomScroll = obj.getScrollTop();
if(!AW.ie) { var x1 = event.pageX ; var y1 = event.pageY ; }
else{ var x1 = event.clientX ; var y1=event.clientY }
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
var FeedbackRow = document.getElementById('FeedbackRow');
if(FeedbackRow) {
/* Calculate FEEDBACK ROW location in IE */
if( AW.ie){
NewFeedbackRowLeft = x - window.screenLeft - AW.getLeft(CellTarget) - obj.getSelectorWidth() + 8 ;
NewFeedbackRowTop = y - window.screenTop - AW.getTop(TopRowTG) + 3 ;
}
/* Calculate FEEDBACK ROW location in FireFox */
if(!AW.ie){
if(rightScroll==0){ NewFeedbackRowLeft = x - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
else{ NewFeedbackRowLeft = x + rightScroll - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
if(bottomScroll==0){ NewFeedbackRowTop = y - AW.getTop(TopRowTG) + 3; }
else{ NewFeedbackRowTop = y + bottomScroll - AW.getTop(TopRowTG) + 3 }
}
FeedbackRow.style.top=NewFeedbackRowTop;
// NOTE --- Remove line below to prevent
// feedback row from moving horizontally
FeedbackRow.style.left=NewFeedbackRowLeft;
}
else if(mouseCelldown){
var FeedbackRow = RowTarget.cloneNode(true) ;
FeedbackRow.id = "FeedbackRow";
FeedbackRow.style.position = "absolute";
FeedbackRow.style.width = RowTarget.width;
FeedbackRow.style.height = RowTarget.height;
FeedbackRow.style.zIndex = 1000000;
FeedbackRow.style.MozOpacity = 0.7;
FeedbackRow.style.filter = "alpha(opacity=70)"
// CHOSE IF YOU WANT THE FEEDBACK ROW TO BE SHIFTED ONE COLUMN TO THE RIGHT
// OR SHOULD IT START AT THE SAME HORIZONTAL LOCATION AS THE DRAG ROW
// This is more noticable when the feedback row is not allowed to move
// horizontally (comment out line "FeedbackRow.style.left=NewFeedbackRowLeft"
// in dragRowMouseMove function above.
//
RowTarget.parentNode.parentNode.appendChild(FeedbackRow); // Same Level
//RowTarget.parentNode.parentNode.appendChild(FeedbackRow); // Shifted Right
}
/* ---- START AUTO SCROLL CODE ---- */
if (mouseCelldown){
var GridHeight=150;
var ScrollZoneSize=20;
var NewScrollTop;
/* Near Top, Scroll grid up if possible */
if (NewFeedbackRowTop<obj.getScrollTop()+ScrollZoneSize) {
NewScrollTop=obj.getScrollTop()-ScrollZoneSize;
if (NewScrollTop<0) NewScrollTop=0;
obj.setScrollTop(NewScrollTop);
}
/* Near Bottom, Scroll grid down if possible */
if (NewFeedbackRowTop>GridHeight+obj.getScrollTop()-obj.getHeaderHeight()-ScrollZoneSize) {
obj.setScrollTop(obj.getScrollTop()+ScrollZoneSize);
NewScrollTop=obj.getScrollTop()+ScrollZoneSize;
if (NewScrollTop>MaxScrollTop) NewScrollTop=MaxScrollTop;
obj.setScrollTop(NewScrollTop);
}
}
/* ---- END AUTO SCROLL CODE ---- */
}
/***********************/
// THESE ARE CALLED TO START AND STOP THE DRAG AND DROP OF ROWS
obj.onCellMouseDown = function(event, column, row){ dragstart(event, column, row) };
obj.onCellMouseUp = function(event, column, row){ if (startrow) { dragstop(column, row) }};
obj.setEvent("onmousemove", dragRowMouseMove);
RowsArea.setEvent("onmousedown", dragRowStart);
document.write(obj);
</script>
<br>
<button onclick="AddNewRowBelowSelectedRow()">Add New Row Below Selected Row</button>
<button onclick="DeleteSelectedRow()">Delete Selected Row</button>
<hr>
This has been tested using AW 2.0 (standard/final) and IE and Firefox 1.0. It has some limitations
<ul>
<li>Only works on ARRAY based grid.
<li>Array is manipulated directly using splice (instead of addRow / deleteRow).
<li>Sorting is not supported so it is disabled
</ul>
</body>
</script>
</html>
//RowTarget.parentNode.parentNode.appendChild(FeedbackRow); // Shifted Right
//RowTarget.parentNode.appendChild(FeedbackRow); // Shifted Right
/* ---- START AUTO SCROLL CODE ---- */
if (mouseCelldown){
var GridHeight=150;
var ScrollZoneSize=20;
var NewScrollTop;
var HorizontalScrollBarAdjustment=20;
/* If Horizontal Scroll Bar is not present then set adjustment to 0 */
if ( obj.getScrollWidth()-document.getElementById("myGrid").offsetWidth+2 <= 0 ) { HorizontalScrollBarAdjustment=0 }
/* Near Top, Scroll grid up if possible */
if (NewFeedbackRowTop<obj.getScrollTop()+ScrollZoneSize) {
NewScrollTop=obj.getScrollTop()-ScrollZoneSize;
if (NewScrollTop<0) NewScrollTop=0;
obj.setScrollTop(NewScrollTop);
}
/* Near Bottom, Scroll grid down if possible */
if (NewFeedbackRowTop>GridHeight+obj.getScrollTop()-obj.getHeaderHeight()-ScrollZoneSize-HorizontalScrollBarAdjustment) {
obj.setScrollTop(obj.getScrollTop()+ScrollZoneSize);
NewScrollTop=obj.getScrollTop()+ScrollZoneSize;
if (NewScrollTop>MaxScrollTop) NewScrollTop=MaxScrollTop;
obj.setScrollTop(NewScrollTop);
}
}
/* ---- END AUTO SCROLL CODE ---- */
/* ---- START AUTO SCROLL CODE ---- */
if (mouseCelldown){
var GridHeight=150;
var ScrollZoneSize=20;
var NewScrollTop;
var HorizontalScrollBarAdjustment=20;
/* If Horizontal Scroll Bar is not present then set adjustment to 0 */
if ( obj.getScrollWidth()-document.getElementById("myGrid").offsetWidth+2 <= 0 ) { HorizontalScrollBarAdjustment=0 }
/* Near Top, Scroll grid up if possible */
if (NewFeedbackRowTop<obj.getScrollTop()+ScrollZoneSize) {
NewScrollTop=obj.getScrollTop()-ScrollZoneSize;
if (NewScrollTop<0) NewScrollTop=0;
obj.setScrollTop(NewScrollTop);
}
/* Near Bottom, Scroll grid down if possible */
if (NewFeedbackRowTop>GridHeight+obj.getScrollTop()-obj.getHeaderHeight()-ScrollZoneSize-HorizontalScrollBarAdjustment) {
NewScrollTop=obj.getScrollTop()+ScrollZoneSize;
if (NewScrollTop>MaxScrollTop) NewScrollTop=MaxScrollTop;
if (NewScrollTop>=obj.getScrollTop()) obj.setScrollTop(NewScrollTop);
}
}
/* ---- END AUTO SCROLL CODE ---- */
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
This is a drag and drop example to move rows.<br>
<b>Click and drag a cell to move a row to a new location</b>.
<hr>
<style>
#myGrid { width: 300px; height:150px; margin: 0px; padding: 0px}
#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-0 {color: red;}
#myGrid .aw-mouseover-row {background: lightblue}
#myGrid .aw-mouseover-row .aw-column-0 {background: lightblue}
#myGrid {-moz-user-select: none}
</style>
<script>
var HeaderText = ["Number","Description"];
var CellText = [
["1","Description 1"],
["2","Description 2"],
["3","Description 3"],
["4","Description 4"],
["5","Description 5"],
["6","Description 6"],
["7","Description 7"],
["8","Description 8"],
["9","Description 9"],
["10","Description 10"],
["11","Description 11"],
["12","Description 12"],
["13","Description 13"],
["14","Description 14"],
["15","Description 15"]
];
var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setHeaderText(HeaderText);
obj.setCellText(CellText);
obj.setColumnCount(2);
obj.setRowCount(15);
obj.setVirtualMode(false);
// DISABLE SORTING - This simple example will not work if sorted
obj.onHeaderClicked = function(event,index){return 'disabled'};
obj.setSelectionMode("single-row");
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
/**********************/
function DeleteSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice(insertindex,1);
obj.setRowCount(obj.getRowCount()-1);
obj.refresh();
}
/**********************/
function AddNewRowBelowSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice((insertindex*1)+1,0,["new","new"]);
obj.setRowCount(obj.getRowCount()+1);
obj.refresh();
}
// DRAGGING FUNCTIONS
var startrow, endrow ;
var MaxScrollTop;
var RowsArea = obj.getRowsTemplate();
var mouseCelldown = false;
var RowTarget;
var CellTarget;
var TopRowTG;
var rightScroll;
var bottomScroll;
/**********************/
// BEGIN DRAG & DROP - THIS RECORDS THE STARTING (DRAG) ROW
function dragstart(e, column, row){
startrow=row;
MaxScrollTop=obj.getScrollHeight() - document.getElementById("myGrid").offsetHeight + 18;
}
/**********************/
// END DRAG & DROP - THIS CODE MOVES THE DRAG ROW TO THE DROP LOCATION
function dragstop(column, row){
mouseCelldown=false;
stoprow=row;
// NOTE: THE TIMES 1 (*1) IN ALL CODE BELOW
// IS TO MAKE SURE JAVASCRIPT TREATS THE VARS
// AS NUMBERS INSTEAD OF STRINGS
//
// THIS CODE ONLY WORKS FOR A GRID BASED ON AN ARRAY.
// IT USES THE "splice" COMMAND TO ADD AND DELETE
// ROWS DIRECTLY IN THE ARRAY.
//
// ex. splice (start position, num of rows to delete, optional data to insert)
// To delete 1 row use splice(rowindex,1)
// To add a row without deleting another use spice(rowindex,0,newdata)
// GET CONTENTS OF DRAG ROW... NOTE THIS GETS THE ENTIRE ROW
// SUCH AS ["7","Description 7"]
var startrowcontents = CellText[startrow];
if ( (stoprow*1) > (startrow*1)) {
// DRAG AND DROP IN DOWNWARD DIRECTION
CellText.splice((stoprow*1)+1,0,startrowcontents); //INSERT DRAG ROW BELOW DROP ROW
CellText.splice(startrow,1); // DELETE DRAG ROW
// DRAG AND DROP IN UPWARD DIRECTION
} else if ((stoprow*1) < (startrow*1)) {
CellText.splice((stoprow*1),0,startrowcontents); // INSERT DRAG ROW ABOVE DROP ROW
CellText.splice((startrow*1)+1,1); // DELETE DRAG ROW, NOTE IT IS PUSHED DOWN 1 BECAUSE OF THE INSERT ABOVE
}
// FYI... IF YOU WANTED TO HARD CODE THE DATA TO INSERT IT WOULD LOOK LIKE THIS
// CellText.splice(stoprow,0,["17","Description 17"]);
obj.setSelectedRows([stoprow]);
obj.refresh();
}
/**********************/
// BEGIN DRAG & DROP - CAPTURE DATA NEEDED TO CREATE THE
// VISUAL FEEDBACK ROW THAT IS DISPLAYED WHILE ROW IS BEING DRAGGED
var dragRowStart = function(event) {
if(!AW.ie) { CellTarget = event.target }
else{ CellTarget = event.srcElement }
var sECId = CellTarget.id ;
if (sECId.indexOf("-box-text") > 0 ){
RowTarget = CellTarget.parentNode.parentNode }
else {
RowTarget = CellTarget.parentNode;
}
rightScroll = obj.getScrollLeft();
bottomScroll = obj.getScrollTop();
TopRowTG = RowTarget.parentNode.firstChild;
RowTarget.width=RowTarget.offsetWidth;
RowTarget.height=RowTarget.offsetHeight;
mouseCelldown = true;
}
/**********************/
// DRAG IN PROGRESS -
// 1) MOVES THE VISUAL FEEDBACK ROW
// 2) AUTO SCROLLS THE GRID IF NEEDED
var dragRowMouseMove = function(event) {
var NewFeedbackRowTop=0;
var NewFeedbackRowLeft=0;
bottomScroll = obj.getScrollTop();
if(!AW.ie) { var x1 = event.pageX ; var y1 = event.pageY ; }
else{ var x1 = event.clientX ; var y1=event.clientY }
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
var FeedbackRow = document.getElementById('FeedbackRow');
if(FeedbackRow) {
/************************************/
/* This block of code moves the */
/* feedback row to follow the mouse */
/************************************/
/* Calculate FEEDBACK ROW location in IE */
if( AW.ie){
NewFeedbackRowLeft = x - window.screenLeft - AW.getLeft(CellTarget) - obj.getSelectorWidth() + 8 ;
NewFeedbackRowTop = y - window.screenTop - AW.getTop(TopRowTG) + 3 ;
}
/* Calculate FEEDBACK ROW location in FireFox */
if(!AW.ie){
if(rightScroll==0){ NewFeedbackRowLeft = x - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
else{ NewFeedbackRowLeft = x + rightScroll - AW.getLeft(CellTarget) - obj.getSelectorWidth() }
if(bottomScroll==0){ NewFeedbackRowTop = y - AW.getTop(TopRowTG) + 3; }
else{ NewFeedbackRowTop = y + bottomScroll - AW.getTop(TopRowTG) + 3 }
}
FeedbackRow.style.top=NewFeedbackRowTop;
// NOTE --- Remove line below to prevent
// feedback row from moving horizontally
if ( document.getElementById('allowhorizonalmove').checked==true) {
FeedbackRow.style.left=NewFeedbackRowLeft;
}
}
else if (mouseCelldown) {
/***********************************************/
/* This block of code CREATES the feedback row */
/* at the beginning of the drag operation */
/***********************************************/
var FeedbackRow = RowTarget.cloneNode(true) ;
FeedbackRow.id = "FeedbackRow";
FeedbackRow.style.position = "absolute";
FeedbackRow.style.width = RowTarget.width;
FeedbackRow.style.height = RowTarget.height;
FeedbackRow.style.zIndex = 1000000;
FeedbackRow.style.MozOpacity = 0.7;
FeedbackRow.style.filter = "alpha(opacity=70)"
FeedbackRow.style.background = "black";
FeedbackRow.style.color="yellow";
FeedbackRow.style.padding = "1";
// CHOSE IF YOU WANT THE FEEDBACK ROW TO BE SHIFTED ONE COLUMN TO THE RIGHT
// OR SHOULD IT START AT THE SAME HORIZONTAL LOCATION AS THE DRAG ROW
// This is more noticable when the feedback row is not allowed to move
// horizontally (comment out line "FeedbackRow.style.left=NewFeedbackRowLeft"
// in dragRowMouseMove function above.
//
RowTarget.parentNode.parentNode.appendChild(FeedbackRow); // Same Level
//RowTarget.parentNode.appendChild(FeedbackRow); // Shifted Right
}
/* ---- START AUTO SCROLL CODE ---- */
if (mouseCelldown){
var GridHeight=150;
var ScrollZoneSize=20;
var NewScrollTop;
var HorizontalScrollBarAdjustment=20;
/* If Horizontal Scroll Bar is not present then set adjustment to 0 */
if ( obj.getScrollWidth()-document.getElementById("myGrid").offsetWidth+2 <= 0 ) { HorizontalScrollBarAdjustment=0 }
/* Near Top, Scroll grid up if possible */
if (NewFeedbackRowTop<obj.getScrollTop()+ScrollZoneSize) {
NewScrollTop=obj.getScrollTop()-ScrollZoneSize;
if (NewScrollTop<0) NewScrollTop=0;
obj.setScrollTop(NewScrollTop);
}
/* Near Bottom, Scroll grid down if possible */
if (NewFeedbackRowTop>GridHeight+obj.getScrollTop()-obj.getHeaderHeight()-ScrollZoneSize-HorizontalScrollBarAdjustment) {
NewScrollTop=obj.getScrollTop()+ScrollZoneSize;
if (NewScrollTop>MaxScrollTop) NewScrollTop=MaxScrollTop;
if (NewScrollTop>=obj.getScrollTop()) obj.setScrollTop(NewScrollTop);
}
}
/* ---- END AUTO SCROLL CODE ---- */
}
/***********************/
// THESE ARE CALLED TO START AND STOP THE DRAG AND DROP OF ROWS
obj.onCellMouseDown = function(event, column, row){ dragstart(event, column, row) };
obj.onCellMouseUp = function(event, column, row){ if (startrow) { dragstop(column, row) }};
obj.setEvent("onmousemove", dragRowMouseMove);
RowsArea.setEvent("onmousedown", dragRowStart);
document.write(obj);
</script>
<INPUT TYPE=CHECKBOX NAME="allowhorizonalmove"> Allow Horizontal Move of Drag Feedback Row
<br>
<button onclick="AddNewRowBelowSelectedRow()">Add New Row Below Selected Row</button>
<button onclick="DeleteSelectedRow()">Delete Selected Row</button>
<hr>
This has been tested using AW 2.0 (standard/final) and IE and Firefox 1.0. It has some limitations
<ul>
<li>Only works on ARRAY based grid.
<li>Array is manipulated directly using splice (instead of addRow / deleteRow).
<li>Sorting is not supported so it is disabled
</ul>
</body>
</script>
</html>
<INPUT TYPE=CHECKBOX NAME="allowhorizonalmove">
<INPUT TYPE=CHECKBOX NAME="allowhorizonalmove" id="allowhorizonalmove">
var RowsArea = obj.getRowsTemplate();
var mouseCelldown = false;
var RowTarget;
var CellTarget;
var TopRowTG;
var rightScroll;
var downScroll;
var GridHeight;
var GridTop ;
var MaxScrollTop;
var ScrollZoneSize=21;
var HorizSBarAdj=20;
var staticXpos;
var NewScrollTop;
/*****************/
var dragColStart = function(event) {
if(!AW.ie) { CellTarget = event.target }
else{ CellTarget = event.srcElement }
var sECId = CellTarget.id ;
if (sECId.indexOf("-box-text") > 0 ){ RowTarget = CellTarget.parentNode.parentNode }
else { RowTarget = CellTarget.parentNode }
rightScroll = obj.getScrollLeft();
downScroll = obj.getScrollTop();
TopRowTG = RowTarget.parentNode.firstChild;
RowTarget.width=RowTarget.offsetWidth;
RowTarget.height=RowTarget.offsetHeight;
GridTop = document.getElementById("myGrid").offsetTop + obj.getHeaderHeight(); ;
GridHeight = document.getElementById("myGrid").offsetHeight ;
staticXpos = document.getElementById("myGrid").offsetLeft - AW.getLeft(TopRowTG) ;
MaxScrollTop = obj.getScrollHeight() - GridHeight + 18;
if(!AW.ie) {
staticXpos = document.getElementById("myGrid").offsetLeft + rightScroll - AW.getLeft(TopRowTG) ;
}
///get column number
var arrofcolumns = CellTarget.id.split("-");
mouseCelldown = true
}
/********************************/
var dragCol = function(event) {
if(!AW.ie) { var xg = event.pageX ; var yg = event.pageY ; }
else{ var xg = event.clientX ; var yg=event.clientY }
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
var DragRow = document.getElementById('DragRow');
if(DragRow) {
//// ---- START AUTO SCROLL CODE ---- ////
//// If Horizontal Scroll Bar is not present then set adjustment to 0 ////
if ( obj.getScrollWidth()-document.getElementById("myGrid").offsetWidth+3 <= 0 ) { HorizSBarAdj=0 }
//// Near Top, Scroll grid up if possible ////
if ( yg < GridTop + ScrollZoneSize ) {
NewScrollTop = obj.getScrollTop() - ScrollZoneSize ;
if (NewScrollTop < 0) NewScrollTop=0;
obj.setScrollTop(NewScrollTop);
}
///// Near Bottom, Scroll grid down if possible ////
if ( yg > GridTop + GridHeight - obj.getHeaderHeight() - ScrollZoneSize - HorizSBarAdj ) {
NewScrollTop = obj.getScrollTop()+ScrollZoneSize ;
if (NewScrollTop > MaxScrollTop) NewScrollTop = MaxScrollTop;
if (NewScrollTop >= obj.getScrollTop()) obj.setScrollTop(NewScrollTop);
}
//// ---- END AUTO SCROLL CODE ---- /////
if(!AW.ie){
DragRow.style.top = y + obj.getScrollTop() - AW.getTop(TopRowTG) + 3
DragRow.style.left = x - AW.getLeft(CellTarget) - obj.getSelectorWidth() ;
}
if( AW.ie){
DragRow.style.top = y - window.screenTop - AW.getTop(TopRowTG) + 3 ;
DragRow.style.left = x - window.screenLeft - AW.getLeft(CellTarget) - obj.getSelectorWidth() ;
}
// NOTE --- Remove line below to prevent feedback row from moving horizontally
DragRow.style.left = staticXpos;
// if ( document.getElementById('allowhorizonalmove').checked==true) {
// DragRow.style.left = staticXpos;
// }
}
else if(mouseCelldown){
var DragRow = RowTarget.cloneNode(true)
DragRow.id = "DragRow";
DragRow.style.position = "absolute";
DragRow.style.width = RowTarget.width;
DragRow.style.height = RowTarget.height;
DragRow.style.zIndex = 1000000;
DragRow.style.MozOpacity = 0.7;
DragRow.style.filter = "alpha(opacity=70)";
DragRow.style.background = "black";
DragRow.style.color="yellow";
DragRow.style.padding = "1";
RowTarget.parentNode.appendChild(DragRow);
}
}
/***********************/
obj.setEvent("onmousemove", dragCol);
RowsArea.setEvent("onmousedown", dragColStart);
document.write(obj);
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
This is a drag and drop example between 2 grids.<br>
<b>Click and drag a cell to move a row from the left grid to the right grid</b>.
<hr> <BR><BR>
<style>
#myGrid { width: 300px; height:150px; margin: 0px; padding: 0px}
#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-0 {color: red;}
#myGrid .aw-mouseover-row {background: lightblue}
#myGrid .aw-mouseover-row .aw-column-0 {background: lightblue}
#myGrid {-moz-user-select: none}
#myTarget { width: 300px; height:150px; margin: 0px; padding: 0px}
#myTarget .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myTarget .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myTarget .aw-alternate-even {background: #E7E7D6;}
#myTarget .aw-alternate-odd {background: #F7F3E7;}
#myTarget .aw-rows-selected {background: #316ac5;}
#myTarget .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myTarget .aw-rows-selected .aw-column-0 {color: red;}
#myTarget .aw-mouseover-row {background: lightblue}
#myTarget .aw-mouseover-row .aw-column-0 {background: lightblue}
#myTarget {-moz-user-select: none}
</style>
<div id="englob" onmousemove="dragRowMouseMove(event)" >
<script>
var HeaderText = ["Number","Description"];
var CellText = [
["1","Description 1"],
["2","Description 2"],
["3","Description 3"],
["4","Description 4"],
["5","Description 5"],
["6","Description 6"],
["7","Description 7"],
["8","Description 8"],
["9","Description 9"],
["10","Description 10"],
["11","Description 11"],
["12","Description 12"],
["13","Description 13"],
["14","Description 14"],
["15","Description 15"]
];
var TargetCellText = [[]]; //If i don't specify that we have an array of array here, it will put the array in the first column
var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setHeaderText(HeaderText);
obj.setCellText(CellText);
obj.setColumnCount(2);
obj.setRowCount(15);
obj.setVirtualMode(false);
// DISABLE SORTING - This simple example will not work if sorted
obj.onHeaderClicked = function(event,index){return 'disabled'};
obj.setSelectionMode("single-row");
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
var target = new AW.UI.Grid;
target.setId("myTarget");
target.setHeaderText(HeaderText);
target.setCellText(TargetCellText);
target.setColumnCount(2);
target.setRowCount(1);
target.setVirtualMode(false);
// DISABLE SORTING - This simple example will not work if sorted
target.onHeaderClicked = function(event,index){return 'disabled'};
target.setSelectionMode("single-row");
target.setSelectorVisible(true);
target.setSelectorWidth(25);
/**********************/
function DeleteSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice(insertindex,1);
obj.setRowCount(obj.getRowCount()-1);
obj.refresh();
}
/**********************/
function AddNewRowBelowSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice((insertindex*1)+1,0,["new","new"]);
obj.setRowCount(obj.getRowCount()+1);
obj.refresh();
}
// DRAGGING FUNCTIONS
var startrow;
/**********************/
// BEGIN DRAG & DROP - THIS RECORDS THE STARTING (DRAG) ROW
function dragstart(e, column, row){
startrow=row;
var FeedbackRow = document.getElementById('FeedbackRow');
FeedbackRow.style.display="";
dragRowMouseMove(e);
var content = '<table width="300"><tr><td>'+CellText[row][0]+'</td><td>'+CellText[row][1]+'</td></tr></table>';
FeedbackRow.innerHTML=content;
}
/**********************/
// END DRAG & DROP - THIS CODE MOVES THE DRAG ROW TO THE DROP LOCATION
function dragstop(){
startrow=undefined;
var FeedbackRow = document.getElementById('FeedbackRow');
FeedbackRow.style.display="none";
}
var dragRowMouseMove = function(event) {
var FeedbackRow = document.getElementById('FeedbackRow');
if (FeedbackRow.style.display!="none")
{
// DRAG IN PROGRESS -
// 1) MOVES THE VISUAL FEEDBACK ROW
// 2) AUTO SCROLLS THE TARGET GRID IF NEEDED
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
FeedbackRow.style.top=y-18;
FeedbackRow.style.left=x-100;
document.getElementById('debug').innerHTML="x="+x +" y="+y;
}
}
/***********************/
// THESE ARE CALLED TO START AND STOP THE DRAG AND DROP OF ROWS
obj.onCellMouseDown = function(event, column, row){ dragstart(event, column, row) };
obj.onCellMouseUp = function(event, column, row){ if (startrow) dragstop() };
obj.setEvent("onmousemove", dragRowMouseMove);
var yDropMin=0;
var yDropMax=0;
var xDropMin=0;
var xDropMax=0;
var rowHeight=0;
target.onCellMouseUpForward = function(event) {
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
// check if the mouse up is in the target grid
var gridHeight=150;
var gridWidth=300;
var selectorWidth=0;
if (target.getSelectorVisible())
{
selectorWidth=target.getSelectorWidth();
}
if (yDropMin==0)
{
var el = target.getCellTemplate(0, 0).element();
rowHeight =el.offsetHeight;
yDropMin = AW.getTop(el); // y of first row
yDropMax = yDropMin - target.getHeaderHeight()+gridHeight;
xDropMin = AW.getLeft(el); // x of first row
xDropMax = xDropMin + gridWidth-selectorWidth; // x of first row
}
if (x>xDropMin && x<xDropMax && y>yDropMin && y<yDropMax)
{
// mouse up is in the grid, compute row and forward event
// we need to tinker that with the position of the scrollbar
target.onCellMouseUp(event,0,Math.round((y-yDropMin+target.getScrollTop())/rowHeight));
}
}
target.onCellMouseUp = function(event, column, row) {
if (startrow) {
if (TargetCellText[0][0]==undefined)
{
TargetCellText[0][0]=CellText[startrow][0];
TargetCellText[0][1]=CellText[startrow][1];
}
else
{
var insertindex=row;
if (insertindex>target.getRowCount()-1)
{
insertindex=target.getRowCount();
}
//alert("add val from row " + startrow + " at row " + row +" insert index= " + insertindex );
TargetCellText.splice((insertindex*1),0,CellText[startrow]);
target.setRowCount(target.getRowCount()+1);
}
target.refresh();
dragstop();
}
};
document.write(obj);
document.write(target);
document.onmouseup = function () { // stop draging the row when onmouseup happens out of the grids
if (startrow) { dragstop() ; }
}
</script>
<br>
<button onclick="AddNewRowBelowSelectedRow()">Add New Row Below Selected Row</button>
<button onclick="DeleteSelectedRow()">Delete Selected Row</button>
<hr>
This has been tested using AW 2.0 (standard/final) and IE and Firefox 1.0. It has some limitations
<ul>
<li>Only works on ARRAY based grid.
<li>Array is manipulated directly using splice (instead of addRow / deleteRow).
<li>Sorting is not supported so it is disabled
</ul>
</div>
<div id="FeedbackRow" style="position:absolute;display:none" onmouseup="target.onCellMouseUpForward(event)">
</div>
<div id="debug">
</div>
<div id="debug2">
</div>
</body>
</script>
</html>
var SortedIndices=[];
///// clone indices array & fill (when empty)/////////
for (i=0;i<CellText.length;i++){ SortedIndices.push(i) }
///////// WHEN HEADER CLICKED ////////////
obj.onHeaderClicked = function(event, index){
window.setTimeout(function(){
SortedIndices = obj.getRowIndices();
},30);
}
// END DRAG & DROP - THIS CODE MOVES THE DRAG ROW TO THE DROP LOCATION
function dragstop(column, row){
mouseCelldown=false;
stoprow=row;
var startrowcontents = CellText[startrow];
var indexfrom ;
var indexto ;
for (i=0;i<SortedIndices.length;i++){
if(SortedIndices[i] == startrow){ indexfrom = i }
if(SortedIndices[i] == stoprow){ indexto = i }
}
var rowmoved = SortedIndices[indexfrom];
var x=indexfrom;
if(indexfrom<indexto){
while( x<indexto ){ SortedIndices[x]=SortedIndices[x+1] ; x++ ; }
}
if(indexfrom>indexto){
while( x>indexto ){ SortedIndices[x]=SortedIndices[x-1] ; x-- ; }
}
SortedIndices[indexto]=rowmoved ;
obj.setRowIndices(SortedIndices);
obj.setSelectedRows([stoprow]);
}
function DeleteSelectedRow(){
var insertindex=obj.getSelectedRows();
for (i=0;i<SortedIndices.length;i++){
if(SortedIndices[i] == insertindex){ SortedIndices.splice(i, 1); }
}
obj.setRowCount(obj.getRowCount()-1);
obj.setRowIndices(SortedIndices);
}
/**********************/
function AddNewRowBelowSelectedRow(){
var insertindex=obj.getSelectedRows();
CellText.push(["new","new"])
for (i=0;i<SortedIndices.length;i++){
if(SortedIndices[i] == insertindex){ SortedIndices.splice( i+1, 0, CellText.length-1 ); }
}
obj.setRowCount(obj.getRowCount()+1);
obj.setRowIndices(SortedIndices);
}
var dragRowStart = function(event) {
.....
.....
mouseCelldown = true;
// this line is new
if (sECId.indexOf("-rows") > 0 ){ mouseCelldown = false }
} ]
var obj = new AW.UI.Grid;
var obj = new AW.Grid.Extended;
obj.setSelectionMode("single-row");
obj.setSelectionMode("single-cell");
obj.setCellEditable(true);
//obj.onCellMouseDown = function(event, column, row){ dragstart(event, column, row) };
//obj.onCellMouseUp = function(event, column, row){ if (startrow) { dragstop(column, row) }};
//obj.setEvent("onmousemove", dragRowMouseMove);
//RowsArea.setEvent("onmousedown", dragRowStart);
This topic is archived.