yui2 update row with drag and drop
Opened this issue · 0 comments
sandek commented
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.
`
<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>