3.2.0

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:

<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,

This topic is archived.

See also:


Back to support forum