[CLOSED] Drag and drop cell content

[Z]

Is there an easy way to drag and drop cell context?

I found this link (http://forums.ext.net/showthread.php?11609) but that physically moves the row. I don't want to move anything. I just want to take the data from the store from a location (start drag) and move the data to another cell (end drag).

I want to disallow to "drop" if there is any value in the store at that location (use isOkToDrop)

My code for the columns is below. I know I need a variation of the link above and it should be possible to move the store contents only without physically moving any rows. For this example, assume the store as an data parameter isOkToDrop.

Thanks,
/Z

                <ext:Column ColumnID="startOnGui" Header="First" Width="70" DataIndex="firstItem" >
                    <Renderer Fn="startCheck" />
                    <Editor>
                        <ext:TextField ID="TextFieldFirst" runat="server" />
                    </Editor>
                    <EditorOptions>
                        <Listeners>
                            <BeforeStartEdit Handler="return (!GridPanel.getStore().getAt(editor.row).data.firstDisabled);" />
                            <Complete Fn="firstChanged" />
                        </Listeners>
                    </EditorOptions>
                </ext:Column>
                <ext:Column ColumnID="endOnGui" Header="Second" Width="70" DataIndex="secondItem">
                    <Renderer Fn="endCheck" />
                    <Editor>
                        <ext:TextField ID="TextFieldSecond" runat="server">
                            <Listeners>
                                <Change Fn="secondChanged" />
                            </Listeners>
                        </ext:TextField>
                    </Editor>
                    <EditorOptions>
                        <Listeners>
                            <BeforeStartEdit Handler="return (!GridPanel.getStore().getAt(editor.row).data.secondDisabled);" />
                        </Listeners>
                    </EditorOptions>
                </ext:Column>

[Daniil]

Hi @Z,

There is the CellDragDrop plugin in Ext.NET v2.
http://docs.sencha.com/extjs/4.2.1/#...x.CellDragDrop

Probably, investigating its sources should give you a clue how it can be implemented in v1.

[Z]

ok. I will look for the source and check it out.
/Z

[Z]

I know that drag and dropping cells in EXT.NET 1.x when using a editable grid is not easily possible. However, I have solved it with a very simple implementation WITHOUT the need for any overrides using out of the box functions.

I wanted to post this for the community in case someone else needed it. This code is not runnable, but it contains all the pieces. Anyone working with drag/drop should have no trouble with it. It works perfectly with editable grids.

Basically, you use the MouseDown event to store the last mouse down. Then on the notify, we grab the columns and rows and just set the data. In my case, I am just setting from Cell A to Cell B. If you want to Swap, just use a temp variable and swap it. Make sure you use var for your variables so they don't become global.

Thanks,
/Z

    <script type="text/javascript">
        var lastClickedColumn = false;
        var lastClickedRow=false;
        var saveMouseDown = function (e) {
            if (e.button == 0) {    //left button
                lastClickedColumn = GridPanelA.getView().findCellIndex(e.target);
                lastClickedRow = GridPanelA.getView().findRowIndex(e.target);
            }
        };
        var notifyDrop = function (ddSource, e, data) {
            if (lastClickedColumn != false && lastClickedRow != false && e.button==0) {  //left mouse button only
                var targetRow = ddSource.grid.getView().findRowIndex(e.target),
                    targetColumn = ddSource.grid.getView().findCellIndex(e.target),
                    store = ddSource.grid.getStore();
                var sourceRecord = data.grid.getStore().getAt(lastClickedRow).data;
                var targetRecord = data.grid.getStore().getAt(targetRow).data;
                var sourceColumnId = data.grid.colModel.columns[lastClickedColumn].id;
                var targetColumnId = data.grid.colModel.columns[targetColumn].id;
    //feel free to set other 'hidden' columns here
                data.grid.getStore().getAt(targetRow).set(targetColumnId, sourceRecord[sourceColumnId])
            }
            return true;
        };
 </script>
 
 <ext:DropTarget ID="DropTarget1"        
                    runat="server"        
                    Target="={GridPanelA.view.scroller.dom}"        
                    Group="ddGroup">        
        <NotifyDrop Fn="notifyDrop" />    
    </ext:DropTarget>
 
    <ext:GridPanel 
        ColumnLines="true"
        ID="GridPanelA"
        runat="server"
        ClicksToEdit="1"
        StripeRows="true"
        EnableDragDrop="true"
        DDGroup="ddGroup"
        TrackMouseOver="true"
        Layout="fit"
        Border="true"
        AutoHeight="true">
  <!-- grid panel data INCLUDING store here -->
        <Listeners>
            <MouseDown Fn="saveMouseDown" />
        </Listeners>
 </ext:GridPanel>

[Daniil]

@Z, thank you for sharing!