1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    18
    Answers
    1
    Vote Rating
    0
    vbjain is on a distinguished road

      0  

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

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


    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.

    Code:
    
    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.

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Posts
    18
    Answers
    1
    Vote Rating
    0
    vbjain is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Answers
    107
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Apr 2010
    Posts
    18
    Answers
    1
    Vote Rating
    0
    vbjain is on a distinguished road

      0  

    Default Code for DnD download using Label

    Code for DnD download using Label


    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.

    Code:
    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),

    Code:
    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.
    Code:
    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.onMouseDown(GridEvent<M> e) where, below code is preventing the default browser action.
    Code:
    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.

    Code:
            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?

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Posts
    18
    Answers
    1
    Vote Rating
    0
    vbjain is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Apr 2010
    Posts
    18
    Answers
    1
    Vote Rating
    0
    vbjain is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar