yui2 update row with drag and drop

[sandek]

Hello sir, sorry for bothering you, but I have come to a problem with yui2, that is bugging me for some time. So, let me explain my problem, I have a datatable with drag and drop function for reordering and I am updating cells with textArea cell editor.

drag and drop is working fine when I just only add a row. But when I updaterow, drag and drop stops working.

For example, if I add 2 rows, and update them, I can't reorder them with drag and drop :(

Bellow is my example code. I hope u can help me.

Thanko u very much.

`

Dodaj vrstico

<script type="text/javascript" src="assets/js/data.js"></script> <script type="text/javascript"> YAHOO.util.Event.addListener(window, "load", function() {

YAHOO.example.ReorderRows = function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        DDM = YAHOO.util.DragDropMgr,
        myColumnDefs = [
            {key:"areacode",editor: new YAHOO.widget.TextareaCellEditor({LABEL_SAVE:'shrani', LABEL_CANCEL:'prekliči'})},
            {key:"state",editor: new YAHOO.widget.TextareaCellEditor({LABEL_SAVE:'shrani', LABEL_CANCEL:'prekliči'})}        
        ],
        myDataSource = new YAHOO.util.LocalDataSource(
            YAHOO.example.Data.areacodes,
            {responseSchema: {fields: ["areacode","state"]}}
        ),
        myDataTable = new YAHOO.widget.DataTable("datatable", myColumnDefs, myDataSource, {}),
        myDTDTargets = {},
        onRowSelect = function(ev) {
                var par = myDataTable.getTrEl(Event.getTarget(ev)),
                    srcData,
                    srcIndex,
                    tmpIndex = null,
                    ddRow = new YAHOO.util.DDProxy(par.id);
                	ddRow.handleMouseDown(ev.event);

                /**
                * Once we start dragging a row, we make the proxyEl look like the src Element. We get also cache all the data related to the
                * @return void
                * @static
                * @method startDrag
                */
                ddRow.startDrag = function () {
                    proxyEl  = this.getDragEl();
                    srcEl = this.getEl();
                   srcData = myDataTable.getRecord(srcEl).getData();
                    srcIndex = srcEl.sectionRowIndex;
                    // Make the proxy look like the source element
                    Dom.setStyle(srcEl, "visibility", "hidden");
                    //console.log("notri start drag" + srcEl.innerHTML);
                   proxyEl.innerHTML = "<table><tbody>"+srcEl.innerHTML+"</tbody></table>";
                };

                /**
                * Once we end dragging a row, we swap the proxy with the real element.
                * @param x : The x Coordinate
                * @param y : The y Coordinate
                * @return void
                * @static
                * @method endDrag
                */
                ddRow.endDrag = function(x,y) {
                    Dom.setStyle(proxyEl, "visibility", "hidden");
                    Dom.setStyle(srcEl, "visibility", "");
                };

                /**
                * This is the function that does the trick of swapping one row with another.
                * @param e : The drag event
                * @param id : The id of the row being dragged
                * @return void
                * @static
                * @method onDragOver
                */
                ddRow.onDragOver = function(e, id) {
                    // Reorder rows as user drags

                    var destEl = Dom.get(id),
                        destIndex = destEl.sectionRowIndex;
                        console.log(destEl);
                    if (destEl.nodeName.toLowerCase() === "tr") {
                        if(tmpIndex !==null) {
                            myDataTable.deleteRow(tmpIndex);
                        }
                        else {
                            myDataTable.deleteRow(srcIndex);
                        }
                    myDataTable.addRow(srcData, destIndex);
                    tmpIndex = destIndex;
                    DDM.refreshCache();
                    }
                };
        };
        
           // Set up editing flow 
        var highlightEditableCell = function(oArgs) { 
            var elCell = oArgs.target; 
            if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) { 
                this.highlightCell(elCell); 
            } 
        }; 

        myDataTable.subscribe('cellMousedownEvent', onRowSelect);
    //////////////////////////////////////////////////////////////////////////////
    // Create DDTarget instances when DataTable is initialized
    //////////////////////////////////////////////////////////////////////////////
    myDataTable.subscribe("initEvent", function() {

        var i, id,
            allRows = this.getTbodyEl().rows;
        for(i=0; i<allRows.length; i++) {
            id = allRows[i].id;
            // Clean up any existing Drag instances
            if (myDTDTargets[id]) {
                 myDTDTargets[id].unreg();
                 delete myDTDTargets[id];
            }
            // Create a Drag instance for each row
            myDTDTargets[id] = new YAHOO.util.DDTarget(id);
        }
    });

    //////////////////////////////////////////////////////////////////////////////
    // Create DDTarget instances when new row is added
    //////////////////////////////////////////////////////////////////////////////
    myDataTable.subscribe("rowAddEvent",function(e){
        var id = e.record.getId();

        myDTDTargets[id] = new YAHOO.util.DDTarget(id);
    });
     
    function data1() {
    	
	  	return{ areacode:"a", state:"rr"};
	  };
    
       // Add one row to the bottom
    var btnAddRow = new YAHOO.widget.Button("addrow");
    btnAddRow.on("click", function() {
   // var record = YAHOO.widget.DataTable._cloneObject(data1);    
    myDataTable.addRow(data1());  
 
    
    
    },this,true);

    
    //vračam vrednosti za updateRow
    getData = function(a,s) {     	
        	return {areacode:a, state:s };              
        };

    //Dodam za shranjefanje celic
    vstaviCelice = function(oArgs) {     	
    var record = oArgs.record;   	
   	//alert(myDataTable.getRecordIndex(record));
	myDataTable.updateRow(myDataTable.getRecordIndex(record),getData(myDataTable.getRecordIndex(record) + 1, '5555'));  
    };
    
    myDataTable.subscribe("cellMouseoverEvent", highlightEditableCell);
 	myDataTable.subscribe("cellMouseoutEvent", myDataTable.onEventUnhighlightCell);
   	myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);
   	myDataTable.subscribe("cellUpdateEvent",vstaviCelice);

// myDataTable.subscribe('cellMousedownEvent', onRowSelect);

   return {
        oDS: myDataSource,
        oDT: myDataTable
    };    
}
();

});
</script>

`