Remake of the drag & drop Rows example
For those interested in d&d features I made a fast new one for reordering rows, this time is an "all in events" version, including sort and editable cells ( sorry it has a bug on dragable row data in Mozilla that should be addressed) , but you get the idea.
The final target ,of course, is an enhanced grid ( without loosing i'ts normal behaviours) , that 'ideally' must be done using subclassed objects, but for now let's test in the old style.
The answer to the question... could both "rows & cols dragging" be joined/mixed together ? .... is ...(Maybe)... coming soon .. :)
Anyway.. here is The full code:
The final target ,of course, is an enhanced grid ( without loosing i'ts normal behaviours) , that 'ideally' must be done using subclassed objects, but for now let's test in the old style.
The answer to the question... could both "rows & cols dragging" be joined/mixed together ? .... is ...(Maybe)... coming soon .. :)
Anyway.. here is The full code:
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style type="text/css">
.aw-quirks * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {font: 12px Tahoma}
</style>
<!-- ActiveWidgets stylesheet and scripts -->
<script src="../../runtime/lib/aw.js" type="text/javascript"></script>
<link href="../../runtime/styles/vista/aw.css" rel="stylesheet">
</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);
obj.setCellEditable(true);
obj.setControlSize(300, 180);
// DISABLE SORTING - This simple example WILL WORK (yes) if sorted , but in case you need to disable it use:
// obj.onHeaderClicked = function(event,index){return 'disabled'};
obj.setSelectionMode("single-cell");
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
obj.setCellEditable(true);
/**********************/
function DeleteSelectedRow(){
var startrow = obj.getSelectedRows();
if( Number(startrow)>-1){
for (i=SortedIndices.length-1;i>=0;i--){
if(SortedIndices[i] == startrow){ SortedIndices.splice(i, 1); break}
}
obj.setRowCount(obj.getRowCount()-1);
obj.setRowIndices(SortedIndices);
}
}
/**********************/
function AddNewRowBelowSelectedRow(){
var startrow = obj.getSelectedRows();
if( Number(startrow)>-1){
CellText.push(["new","new"])
for (i=SortedIndices.length-1;i>=0;i--){
if(SortedIndices[i] == startrow){ SortedIndices.splice( i+1, 0, CellText.length-1 ); break }
}
obj.setRowCount(obj.getRowCount()+1);
obj.setRowIndices(SortedIndices);
}
}
////////////////////////////////////////
// DRAGGING FUNCTIONS
var SortedIndices=[];
///// fill (when empty), or clone indices array/////////
// if(obj.getRowIndices()){SortedIndices = obj.getRowIndices()}
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);
}
/////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
var RowsArea = obj.getRowsTemplate();
var mousedownRow = false;
var RowTarget;
var CellTarget;
var TopRowTG;
var rightScroll;
var downScroll;
var startrowpos;
var RowOrig;
var gridrRef
var GridHeight;
var GridTop ;
var MaxScrollTop;
var staticXpos;
var NewScrollTop;
//////////////////////////////
var ScrollZoneSize=31;
var HorizSBarAdj=20;
//////////////////////////////
var dragRowStart = function(event) {
if(!AW.ie) { CellTarget = event.target }
else{ CellTarget = event.srcElement }
RowOrig = CellTarget.id.split("-")[3];
var sECId = CellTarget.id ;
if(AW.ie) {
if (sECId.indexOf("-box") > 0 ){ RowTarget = CellTarget.parentNode.parentNode }
else { RowTarget = CellTarget.parentNode }
}
if(!AW.ie) {
if (sECId.indexOf("box-text") > 0 ){ RowTarget = CellTarget.parentNode.parentNode.parentNode }
else { RowTarget = CellTarget.parentNode.parentNode }
}
gridrRef = RowTarget.id.split("-")[0];
rightScroll = AW.object(gridrRef).getScrollLeft();
downScroll = AW.object(gridrRef).getScrollTop();
TopRowTG = RowTarget.parentNode.firstChild;
RowTarget.width=RowTarget.offsetWidth;
RowTarget.height=RowTarget.offsetHeight;
RowTarget.top=RowTarget.offsetTop;
GridTop = !AW.ie ? document.getElementById(gridrRef).offsetTop : document.getElementById(gridrRef).offsetTop + AW.object(gridrRef).getSelectorWidth() ;
GridHeight = document.getElementById(gridrRef).offsetHeight ;
staticXpos = document.getElementById(gridrRef).offsetLeft - AW.getLeft(TopRowTG) ;
MaxScrollTop = AW.object(gridrRef).getScrollHeight() - GridHeight + 18;
///get row number
var arrofrows = RowTarget.id.split("-");
startrowpos=arrofrows[2];
if(!AW.ie){
staticXpos = rightScroll - AW.object(gridrRef).getSelectorWidth() + AW.getLeft(CellTarget) + 3 ;
}
if (RowTarget.height==0) { RowTarget.parentNode.offsetHeight;}
if(!AW.ie) { RowTarget.y = - AW.object(gridrRef).getScrollTop() }
else{ RowTarget.y = - window.screenTop - AW.object(gridrRef).getScrollTop() }
// mousedownRow = true ;
mousedownRow = sECId.indexOf("-rows") > -1 ? false : true ;
}
////////////////////////////////////////////////////////////
var EdragRow = function(event) {
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX - AW.object(gridRef).getSelectorWidth(); 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 ( AW.object(gridrRef).getScrollWidth()-document.getElementById(gridrRef).offsetWidth+3 <= 0 ) { HorizSBarAdj=0 }
//// Near Top, Scroll grid up if possible ////
if ( y < GridTop + ScrollZoneSize ) {
NewScrollTop = AW.object(gridrRef).getScrollTop() - ScrollZoneSize ;
if (NewScrollTop < 0) NewScrollTop=0;
AW.object(gridrRef).setScrollTop(NewScrollTop);
}
///// Near Bottom, Scroll grid down if possible ////
if ( y > GridTop + GridHeight - obj.getHeaderHeight() - ScrollZoneSize - HorizSBarAdj ) {
NewScrollTop = AW.object(gridrRef).getScrollTop()+ScrollZoneSize ;
if (NewScrollTop > MaxScrollTop) NewScrollTop = MaxScrollTop;
if (NewScrollTop >= AW.object(gridrRef).getScrollTop()) AW.object(gridrRef).setScrollTop(NewScrollTop);
}
//// ---- END AUTO SCROLL CODE ---- /////
if( !AW.ie){ DragRow.style.top = y - AW.getTop(TopRowTG) + 3 ; DragRow.style.left = x - AW.getLeft(TopRowTG) -20 }
if( AW.ie){ DragRow.style.left = staticXpos }
if(AW.opera){DragRow.style.left = x - AW.getLeft(TopRowTG) + NewScrollTop -20 }
// NOTE --- Remove line below to prevent feedback row from moving horizontally
DragRow.style.left = staticXpos;
}
else if(mousedownRow){
var DragRow = RowTarget.cloneNode(true)
DragRow.id = "DragRow";
DragRow.style.position = "absolute";
//DragRow.style.width = AW.object(gridrRef).getRowHeight();
DragRow.style.width = RowTarget.width;
//DragRow.style.height = RowTarget.height;
DragRow.style.height =AW.object(gridrRef).getRowHeight();
DragRow.style.zIndex = 1000000;
DragRow.style.MozOpacity = 0.6;
DragRow.style.filter = "alpha(opacity=60)";
DragRow.style.background = "red";
DragRow.style.color="yellow";
DragRow.style.padding = "1";
RowTarget.parentNode.appendChild(DragRow);
// DragRow.refresh()
}
}
/////////////////////////////////////////////////////////////////////////////
var dragRowStop = function(event) {
if (!mousedownRow){return false}
else{
// mousedownRow = false;
if(!AW.ie) { CellTarget2 = event.target }
else{ CellTarget2 = event.srcElement }
if( document.getElementById('DragRow') ){
///get column number
var arrofrows = CellTarget2.id.split("-");
stoprow = parseInt(arrofrows[3]);
startrowpos = parseInt(RowOrig)
var indexfrom ;
var indexto ;
window.setTimeout( function(){ /// START TIMEOUT (needed for maintain focus )
for (i=0;i<SortedIndices.length;i++){
if(SortedIndices[i] == startrowpos){ 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 ;
AW.object(gridrRef).setRowIndices(SortedIndices);
AW.object(gridrRef).setSelectedRows([startrowpos]);
}, 190); /// END TIMEOUT
}
mousedownRow = false;
// mousedownRow = sECId.indexOf("-rows") > -1 ? false : true ;
}
}
///////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
obj.setEvent("onmousemove", EdragRow);
RowsArea.setEvent("onmousedown", dragRowStart);
RowsArea.setEvent("onmouseup", dragRowStop);
document.write(obj);
</script>
<br>
<button onclick="AddNewRowBelowSelectedRow()">Add New Row Below Selected Row</button>
<button onclick="DeleteSelectedRow()">Delete Selected Row</button>
<hr>
</body>
</script>
</html>Carlos
December 9,