[CLOSED] Drag Cell from Grid 1 and Drop to Grid 2 Cell

  1. #1

    [CLOSED] Drag Cell from Grid 1 and Drop to Grid 2 Cell

    Hai everyone,

    I have little problem with drag and drop. I want to use drag and drop plugin in grid but i want to drag from Cell on Grid 1 to other cell in Grid 2. I have check a demo page in drag n drop section and i still confused. I attach some image to describe my question.

    Thanks for u'r help :)
    Attached Thumbnails Click image for larger version. 

Name:	11-14-2013 4-50-27 PM.png 
Views:	24 
Size:	98.0 KB 
ID:	7203  
    Last edited by Baidaly; Nov 18, 2013 at 11:51 PM. Reason: [CLOSED]
  2. #2
    Hi @redi,

    Something like that?

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test", "test" },
                    new object[] { "test", "test" },
                    new object[] { "test", "test" }
                };
    
                store = this.GridPanel2.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "1", "1" },
                    new object[] { "1", "1" },
                    new object[] { "1", "1" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var on = function () {
    
            };
        </script>
    
        <style>
            .myСlass {
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server">
                        <Plugins>
                            <ext:CellDragDrop runat="server" EnableDrop="false" />
                        </Plugins>
                    </ext:GridView>
                </View>
            </ext:GridPanel>
    
            <ext:GridPanel ID="GridPanel2" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server">
                        <Plugins>
                            <ext:CellDragDrop runat="server" EnableDrag="false" />
                        </Plugins>
                    </ext:GridView>
                </View>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    Awsome!!!!!!!
    Thanks Daniil for the Example, i really thanksfull for that.

    one question again :)

    If i want to one column can't be dropped value what should i do ? and if some column can't be dragged ?
    should i used this tag ?
    <ext:DropZone ID="DropZone1" runat="server" Target="{#(actOprGrid).view.el)">
            <GetTargetFromEvent Fn="getTargetFromEvent" />
            <OnNodeOver Fn="onNodeOver" />   
            <OnNodeEnter Fn="onNodeEnter" />
            <OnNodeOut Fn="onNodeOut" /> 
            <OnNodeDrop Fn="" />
        </ext:DropZone>
    like demo that i have from demo page, or can i have documentation about drag and drop plugins in grid ?

    Thanks for u'r support. :)
    Last edited by redi; Nov 15, 2013 at 2:58 AM.
  4. #4
    I recommend you to investigate the plugin's sources.
    http://docs.sencha.com/extjs/4.2.1/s...x-CellDragDrop

    You could override the onViewRender function as needed. It looks the best way to achieve your requirement.
  5. #5
    Ok i will read it... :)

    Thanks for your support Daniil.. :)
  6. #6
    Hai Daniil,

    I'm still confused here.. :p

    i used your example to learn drag n drop concept. If i want to build a function to check if in gridview2 have a value then i can drop it, but if not have it can't dropped. How to do that ? I used Dragdrop Zone plugin like i post above, but isn't work.

    This is my source from your example :

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dragdropgrid.aspx.cs" Inherits="belajarExt.dragdropgrid" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[]
                {
                    new object[] { "test", "test" },
                    new object[] { "test", "test" },
                    new object[] { "test", "test" }
                };
     
                store = this.GridPanel2.GetStore();
                store.DataSource = new object[]
                {
                    new object[] { "1", "1" },
                    new object[] { "1", "1" },
                    new object[] { "1", "1" }
                };
            }
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
     
        <script type="text/javascript">
            var onNodeEnter = function (target, dd, e, dragData) {
                delete this.dropOK;
                if (!target) {
                    return;
                }
                alert(this.dropOK);
    //            var f = dragData.field;
    //            if (!f) {
    //                return;
    //            }
    
    //            var type = target.record.fields.get(target.fieldName).type;
    //            switch (type) {
    //                case Ext.data.Types.FLOAT:
    //                case Ext.data.Types.INT:
    //                    if (!f.isXType("numberfield")) {
    //                        return;
    //                    }
    //                    break;
    //                case Ext.data.Types.DATE:
    //                    if (!f.isXType("datefield")) {
    //                        return;
    //                    }
    //                    break;
    //                case Ext.data.Types.BOOL:
    //                    if (!f.isXType("checkbox")) {
    //                        return;
    //                    }
    //            }
                this.dropOK = true;
                Ext.fly(target.node).addCls("x-drop-target-active");
            };
    
            var onNodeOver = function (target, dd, e, dragData) {
                alert("here");
                return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
            };
        </script>
     
        <style>
            .myСlass {
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="Test 1" DataIndex="test1" />
                        <ext:Column ID="Column2" runat="server" Text="Test 2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server">
                        <Plugins>
                            <ext:CellDragDrop ID="CellDragDrop1" runat="server" EnableDrop="false" />
                        </Plugins>
                    </ext:GridView>
                </View>
            </ext:GridPanel>
     
            <ext:GridPanel ID="GridPanel2" runat="server">
                <Store>
                    <ext:Store ID="Store2" runat="server">
                        <Model>
                            <ext:Model ID="Model2" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test3" />
                                    <ext:ModelField Name="test4" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel2" runat="server">
                    <Columns>
                        <ext:Column ID="Column3" runat="server" Text="Test 1" DataIndex="test3" />
                        <ext:Column ID="Column4" runat="server" Text="Test 2" DataIndex="test4" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView2" runat="server">
                        <Plugins>
                            <ext:CellDragDrop ID="CellDragDrop2" runat="server" EnableDrag="false" />
                        </Plugins>
                    </ext:GridView>
                </View>
            </ext:GridPanel>
    
            <ext:DropZone ID="DropZone1" runat="server" Target="{#(GridView2).view.el)">
                <OnNodeOver Fn="onNodeOver" />   
                <OnNodeEnter Fn="onNodeEnter" />
                <%--<OnNodeOut Fn="onNodeOut" /> 
                <OnNodeDrop Fn="" />--%>
            </ext:DropZone>
        </form>
    </body>
    </html>
    in that code i want to check if the javascript function has fire when i drag on grid1 and pass to grid 2. then if the function event fire then i want to build a function to check if that drop zone cell has value or not.

    Thanks :)
  7. #7
    I don't think you can use an <ext:DropZone> here.

    Please follow this approach:
    Quote Originally Posted by Daniil View Post
    You could override the onViewRender function as needed. It looks the best way to achieve your requirement.
    Example
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            Ext.ux.CellDragDrop.override({
                onViewRender: function () {
                    /* the overridden code */
                }
            });
        </script>
    </head>
  8. #8
    Hai Daniil,

    I had used that script to my example, this is my code :
     Ext.ux.CellDragDrop.override({
                onViewRender: function (view) {
                    /* the overridden code */
                    var me = this,
                        scrollEl;
    
                    if (me.enableDrag) {
                        me.dragZone = new Ext.view.DragZone({
                            view: view,
                            ddGroup: me.dragGroup || me.ddGroup,
                            dragText: me.dragText,
                            containerScroll: me.containerScroll,
                            scrollEl: scrollEl,
    
                            getDragData: function (e) {
                                var view = this.view,
                                    item = e.getTarget(view.getItemSelector()),
                                    record = view.getRecord(item),
                                    clickedEl = e.getTarget(view.getCellSelector()),
                                    dragEl;
    
                                    if (item) {
                                        dragEl = document.createElement('div');
                                        dragEl.className = 'x-form-text';
                                        dragEl.appendChild(document.createTextNode(clickedEl.textContent || clickedEl.innerText));
    
                                        return {
                                            event: new Ext.EventObjectImpl(e),
                                            ddel: dragEl,
                                            item: e.target,
                                            columnName: view.getGridColumns()[clickedEl.cellIndex].dataIndex,
                                            record: record
                                        };
                                    }
                                //alert(clickedEl.innerText);
                            }
                        });
                    }
                }
            });
    first i want to test function getDrag data, but i getting error when i try to drag cell to other cell. I was debug that code, and problem is in the return {} tag call. i attach the error from my code.

    sorry if i have a lot question, because i'm new in ext.net and ext.js :)


    Thanks.
    Attached Thumbnails Click image for larger version. 

Name:	11-18-2013 11-36-55 AM.jpg 
Views:	12 
Size:	45.1 KB 
ID:	7222  
    Last edited by redi; Nov 18, 2013 at 6:10 AM.
  9. #9
    The onInitDrag function is an essential part. You should not get rid of it.
  10. #10
    Ah my fault, yes your right. I think its separate function :p

    And now that alert can show :D. SS on attachment.


    Thanks for your support Daniil. :)
    Attached Thumbnails Click image for larger version. 

Name:	11-18-2013 3-16-48 PM.jpg 
Views:	12 
Size:	58.1 KB 
ID:	7223  

Similar Threads

  1. [CLOSED] Drag and drop cell content
    By Z in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 13, 2014, 4:05 AM
  2. Drag Cell from Grid 1 and Drop to Grid 2 Cell
    By darkwalker in forum 2.x Help
    Replies: 0
    Last Post: Sep 24, 2013, 4:53 AM
  3. Replies: 4
    Last Post: Jul 19, 2013, 1:16 AM
  4. Replies: 0
    Last Post: Jun 28, 2013, 5:53 AM
  5. [CLOSED] Get cell in gridpanel drag and drop
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 18, 2010, 5:40 PM

Tags for this Thread

Posting Permissions