drap row from one grid, drop in another one

Hi,

Is is possible to do that ? like I would have a big grid, and the user would drag some items from the big grid anbd drop them in a smaller grid that would be like is favorites items ?

I've seen many drag and drop within a grid, to order it, but not between grids.

Thanks
Lucho
February 22,
Hi,

I'd like to be able to do this too.

Cheers
Daniel
February 27,
Hi Daniel,

Lucho (who started this thread) posted this sample in another thread at:
http://www.activewidgets.com/javascript.forum.11225.46/this-example-shows-how-to.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 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>
Rob Francis
February 27,
This topic is archived.
drap row from one grid, drop in another one

See also:

Search

New Data Grid

Version 2
