Fire native "dragStart" event on Grid with GXT DragnDrop are also enable on same grid

[vbjain]

I have updated the question with more explanation and sample code in below post. Please check that.

Hello All,

I am using GXT 2.2.4 for UI development. I have used HTML5 for Dragging file from Desktop to my application and upload it. But now i am having reverse requirement. I want to drag files from GXT Grid to desktop which will download the file to desktop.

I know that is possible in Chrome only. And had checked the below demo: http://www.thecssninja.com/javascript/gmail-dragout

I had tried to implement the above code in my GXT application, but the issue is that i am using EditorGrid which is supporting DnD. Now when i drag from grid to Desktop its not capturing the native "dragStart" event (which is required to getDataTrasnfer() and set the "url" to it, as above link says).

After so much debug i came to know that GRID using its Selection Model which is stopping the browser from firing the "dragStart" event. Can anyone let me know what should i write so Grid's DnD operation also keep working and native browser's "dragStart" event do fire?

Or if i override the "DragStart" of GridDragSource, then i am getting event.getEvent().getDataTrasnfer() as NULL. Any idea why is it so? Any idea, how it should be done?

Below is the small piece of code which i call after the Data had been inserted in Grid. All records are having the CSS class name as ".icon". The problem is that when i start to drag, the "dragstart" is not being called. Any suggestion?

NOTE: This code is working when i create Buttons, Labels, etc and making them draggable=true with other required parameters.





public static native void test(String id)/*-{
var files = $doc.querySelectorAll('.icon');
for (var i = 0, file; file = files[i]; ++i) {
file.addEventListener("dragstart",function(evt){
$wnd.alert("Drag Event started.. ");
evt.dataTransfer.setData("DownloadURL",this.dataset.downloadurl);
},false);
}
}-*/;



Thanks.

[vbjain]

No one had tried the same thing? Isn't it possible?

[Colin Alworth]

You've posted about 2.x in the 3.x Q/A forums, which isn't going to help get your post attention. I've moved the thread.

You've also only had it up over the weekend, so not a lot of people have had the chance to review it.

Perhaps you can post how you've gotten Labels and Buttons to work with this feature, and where in the grid's selection model you've found that it kills the dragstart event.

[vbjain]

First of all, Sorry that i posted it in wrong version forum and thanks for guidance.

I am here posting the code which will make DnD download possible using Label. If you replace the same code with Button ,TextBox, etc then it will work for them also.

This code will work in Chrome only. Just drag the label and Drop it to Desktop and you will see your files is getting downloaded.


package com.wa.dnd.client;

import com.google.gwt.event.dom.client.DragStartEvent;
import com.google.gwt.event.dom.client.DragStartHandler;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;

public class WidgetDownload extends Composite {

private Label lblDrag;

public WidgetDownload() {
lblDrag = new Label("Drag Me");
lblDrag.getElement().setAttribute("data-downloadurl", "application/pdf:"
+ "HTML5CheatSheet.pdf:"
+ "http://www.thecssninja.com/demo/gmail_dragout/html5-cheat-sheet.pdf");
lblDrag.getElement().setAttribute("draggable", "true");
lblDrag.getElement().setId("dragout");
lblDrag.getElement().setClassName("icon");

lblDrag.addDragStartHandler(new DragStartHandler() {

@Override
public void onDragStart(DragStartEvent event) {
event.getDataTransfer().setData("DownloadURL", lblDrag.getElement().getAttribute("data-downloadurl"));
}
});

initWidget(lblDrag);
}

}



Then i had tried to apply same thing in Reordering Grid (http://www.sencha.com/examples/#reorderinggrid),



GridCellRenderer<Stock> lblDownloadRender = new GridCellRenderer<Stock>() {

public Object render(final Stock model, String property,
ColumnData config, final int rowIndex, final int colIndex,
ListStore<Stock> store, Grid<Stock> grid) {
Label b = new Label((String) model.get(property));
b.getElement().setAttribute("data-downloadurl", "application/pdf:"
+ "HTML5CheatSheet.pdf:"
+ "http://www.thecssninja.com/demo/gmail_dragout/html5-cheat-sheet.pdf");
b.getElement().setAttribute("draggable", "true");
b.getElement().setId("dragout");
b.getElement().setClassName("icon folder");

b.addDragStartHandler(new DragStartHandler() {

@Override
public void onDragStart(DragStartEvent event) {
System.out.println("DT: " + event.getDataTransfer());
}
});
return b;
}
};


And set this render to "Symbol" column using below line.


column.setRenderer(buttonRenderer);


Now if you will drag the Symbol column, it wont fire the registreted DragStartHandler. The reason i think the native "dragStart" is not firing because, Grid itself managing mouseDown event in such way that it wont allow to fire the browser events like dragStart.

You can verify this at, com.extjs.gxt.ui.client.widget.grid.Grid (http://www.sencha.com/forum/☂=DragTest/D:\/Projects\/Java\/BizTree\/gxt-2.2.4\/gxt-2.2.4-gwt22.jar<com.extjs.gxt.ui.client.widget.grid(Grid.class☃Grid).onMouseDown(GridEvent (http://www.sencha.com/forum/☂=DragTest/D:\/Projects\/Java\/BizTree\/gxt-2.2.4\/gxt-2.2.4-gwt22.jar<com.extjs.gxt.ui.client.widget.grid(Grid.class☃Grid~onMouseDown~Lcom.extjs.gxt.ui.client.event.GridEvent\<TM;>;☂GridEvent)<M (http://www.sencha.com/forum/☂=DragTest/D:\/Projects\/Java\/BizTree\/gxt-2.2.4\/gxt-2.2.4-gwt22.jar<com.extjs.gxt.ui.client.widget.grid(Grid.class☃Grid~onMouseDown~Lcom.extjs.gxt.ui.client.event.GridEvent\<TM;>;☂M)> e) where, below code is preventing the default browser action.


if (!"input".equalsIgnoreCase(tagName) && !"textarea".equalsIgnoreCase(tagName)) {
e.preventDefault();
}


After this i had been sure that i wont be able to get the native "dragStart" event, so i had started looking alternative ways to get it. Then i tried below code in our Reordering Grid.



new GridDragSource(grid) {
@Override
protected void onDragStart(DNDEvent e) {
super.onDragStart(e);
System.out.println("DT1: " + e.getDragEvent().getEvent().getDataTransfer());
System.out.println("DT2: " + e.getEvent().getDataTransfer());
}
};


Now when i start drag, i am getting output as,
DT1: null
DT2: null

Now this mean i am able to capture the "dragStart" (but its not native still, its been created and fired using GXT), but i am not able to getDataTransfer() , which is required to set the download "url" to it, so i can download that link document to desktop.

Can anyone help me with any sort of idea that how should i get the native "dragStart" event?

[vbjain]

Am i missing any detail here? Or its not possible with GXT 2.2.4?

Please let me know if my question is wrong.

Thanks.

[vbjain]

No updates from GXT team also? Am i asking something wrong? Or its not possible?