ActiveWidgets • drap row from one grid, drop in another one

Hi Daniel,

Lucho (who started this thread) posted this sample in another thread at:
/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>
drap row from one grid, drop in another one

Forum search
