YUI Datatable Drag and Drop together with Cell Editor

Question

I have a problem with YUI (2) Datatable and Drag and Drop combo. I have a table of items, one of them is item description which I made editable (and saveable) with YUI's TextboxCellEditor. I also made the rows draggable (so I can drop them to another container).

But I'm stuck with two items: - I can only get DnD by clicking on the second column (the first one does not work) - I can only get it to work on the second attempt since initialization.

Here is a snipet from my JS (simplified):

nameFormatter = function (elCell, oRecord, oColumn, oData) {
    var link = '/share/page/site/' + Alfresco.constants.SITE + '/document-details?nodeRef=' + oRecord.getData('nodeRef');
    elCell.innerHTML = '<span><a href="' + link + '" class="drags">' + oData + '</a></span>';
};
descFormatter = function(elCell, oRecord, oColumn, oData) {
    elCell.innerHTML = '<pre class="desc">' + oData + '</pre>';
};
columnDefs = [
    {key: "name", label: "Name", sortable: true, formatter: nameFormatter, resizable: true}
    , {key: "description", label: "Description", sortable: true, formatter: descFormatter, editor: new YAHOO.widget.TextboxCellEditor(), resizable: true}
];
this.mediaTable = new YAHOO.widget.DataTable(this.id + "-media-table", columnDefs, this.dataSource, {
    MSG_EMPTY: "No files"
});
// now we want to make cells editable (description)
var highlightEditableCell = function(oArgs) {
    var elCell = oArgs.target;
    if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
        this.highlightCell(elCell);
    }
};
this.mediaTable.subscribe("cellMouseoverEvent", highlightEditableCell);
this.mediaTable.subscribe("cellMouseoutEvent", this.mediaTable.onEventUnhighlightCell);
this.mediaTable.subscribe("cellClickEvent", this.mediaTable.onEventShowCellEditor);
this.mediaTable.subscribe("editorSaveEvent", this.saveDesc);
this.mediaTable.subscribe('cellMousedownEvent', this.onRowSelect);

The saveDesc function is simple Ajax call to save that items' description. Here is the onRowSelect function:

onRowSelect = function(ev) {
    console.log(" == method onRowSelect");
    var tar = Event.getTarget(ev)
      , dd
    ;
    dd = new YAHOO.util.DDProxy(this.getTrEl(tar));
    dd.on('dragDropEvent', function(e) {
        YAHOO.Bubbling.fire('myCustomEvent', { target: e.info, src: tar});
        dd.unreg();
    });
};

If I just click on desc, I get the text editor, if I click on name, I get the link open. Like I said, when I mouseDown on the second column (description), in first attempt I get nothing. Then I click and hold the second time, and this time it works (I get a DDProxy and I can Drag and drop it to the target, everything works there).

And the other issue is that when I click and hold on the name column, I don't get the DDProxy (I get my onRowSelect event and the correct row).

What am I doing wrong here?

UPDATE: Resolved the first issue by using Satyams answer - removing the formatter for my cell with link. The second issue (only on the second click) was resolved because I added the missing dd.handleMouseDown(ev.event) in my onRowSelect function.

Satyam Satyam · Accepted Answer · 2012-12-10T16:05:05

Dav Glass, who wrote DD, has this example in his page: http://new.davglass.com/files/yui/datatable4/ I used it in my example: http://www.satyam.com.ar/yui/2.6.0/invoice.html and it works just fine, though it is somewhat more involved than you have there. I'm sorry I cannot help you more precisely with your issue, D&D is not my string point but I hope the examples might help.

One reason for your problem might be that link in the cell. This is not a good idea, whether you have DD or not. In general, the recommended way to deal with this is to listen to the cellClickEvent and if the column of the cell that got clicked is the one that 'navigates', you build the URL based on the information in the record clicked and then navigate or do whatever you want with it. This allows the DataTable to render much faster, as it needs no formatter and, in the odd event that someone does click the cell, then and only then you bother to make the calculations. The size and number of DOM elements on the page also goes down.

Likewise, with the other cell with the pre-formatted tag, you can easily avoid it. The cells in each column in a DataTable gets a CSS class name made from the "yui-dt-col-" prefix and the 'key' value of the column (for example: yui-dt-col-description). Thus, you can simply add a style declaration for that CSS class name and spare yourself the formatter. Likewise, for highlighting the editable cells, how about defining some style for the .yui-dt-editable:hover selector? I've never done it myself but I imagine it should work.

YUI Datatable Drag and Drop together with Cell Editor

1 Answers