[CLOSED] [1.0] LockingGridView with custom drag-drop of rows

  1. #1

    [CLOSED] [1.0] LockingGridView with custom drag-drop of rows

    I'm trying to use the LockingGridView with a custom Plugin (from http://www.extjs.com/forum/showthread.php?t=21913). This plugin allows one or more rows to be re-ordered in the GridPanel by dragging and dropping them, however the LockingGridView doesn't seem to work when this Plugin is added.

    I'm not sure how the LockingGridView works (I'm guessing it adds a separate Grid for each Locked column?), but do you know of a way I can get this following example working?

    Any help would be much appreciated! Thanks,

    Dan

    ASPX page:
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic"%>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> data = new List<object>();
            
            for (int i = 0; i < 20; i++)
            {
                data.Add(new{Name="Rec "+i, Column1=i.ToString(), Column2=i.ToString()});
            }
    
            this.Store1.DataSource = data;
            this.Store1.DataBind();
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        
        <style type="text/css">
            .grid-row-insert-below     
            {
                border-bottom:1px solid #3366cc;
            }
    
            .grid-row-insert-above 
            {    
                border-top:1px solid #3366cc;
            } 
        </style>
        
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Column1" />
                            <ext:RecordField Name="Column2" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1"
                EnableDragDrop="true"
                TrackMouseOver="true"
                StripeRows="true"
                Width="500" 
                Height="400"
                Title="Drag row grid">
                <ColumnModel>
                    <Columns>
                        <ext:Column Locked="true" ColumnID="Name" Header="Record Name" Width="200" DataIndex="Name" />
                        <ext:Column Header="Column 1" Width="300" DataIndex="Column1" />
                        <ext:Column Header="Column 2" Width="300" DataIndex="Column2" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:GenericPlugin ID="GenericPlugin1" runat="server" InstanceName="Ext.ux.dd.GridDragDropRowOrder">
                        <CustomConfig>
                            <ext:ConfigItem Name="scrollable" Value="true"></ext:ConfigItem>
                        </CustomConfig>
                    </ext:GenericPlugin>
                </Plugins>
                <View>
                    <ext:LockingGridView runat="server">
                    </ext:LockingGridView>
                </View>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
            </ext:GridPanel>
    
            <script src="GridOrdering.js" type="text/javascript"></script>
        </form>    
    </body>
    </html>
    GridOrdering.js:
    Ext.namespace('Ext.ux.dd');
    
    Ext.ux.dd.GridDragDropRowOrder = Ext.extend(Ext.util.Observable,
    {
        copy: false,
    
        scrollable: false,
    
        constructor : function(config)
        {
            if (config)
                Ext.apply(this, config);
    
            this.addEvents(
            {
                beforerowmove: true,
                afterrowmove: true,
                beforerowcopy: true,
                afterrowcopy: true
            });
    
           Ext.ux.dd.GridDragDropRowOrder.superclass.constructor.call(this);
        },
    
        init : function (grid)
        {
            this.grid = grid;
            grid.enableDragDrop = true;
    
            grid.on({
                render: { fn: this.onGridRender, scope: this, single: true }
            });
        },
    
        onGridRender : function (grid)
        {
            var self = this;
    
            this.target = new Ext.dd.DropTarget(grid.getEl(),
            {
                ddGroup: grid.ddGroup || 'GridDD',
                grid: grid,
                gridDropTarget: this,
    
                notifyDrop: function(dd, e, data)
                {
                    // Remove drag lines. The 'if' condition prevents null error when drop occurs without dragging out of the selection area
                    if (this.currentRowEl)
                    {
                        this.currentRowEl.removeClass('grid-row-insert-below');
                        this.currentRowEl.removeClass('grid-row-insert-above');
                    }
    
                    // determine the row
                    var t = Ext.lib.Event.getTarget(e);
                    var rindex = this.grid.getView().findRowIndex(t);
                    if (rindex === false || rindex == data.rowIndex)
                    {
                        return false;
                    }
                    // fire the before move/copy event
                    if (this.gridDropTarget.fireEvent(self.copy ? 'beforerowcopy' : 'beforerowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections, 123) === false)
                    {
                        return false;
                    }
    
                    // update the store
                    var ds = this.grid.getStore();
    
                    // Changes for multiselction by Spirit
                    var selections = new Array();
                    var keys = ds.data.keys;
                    for (var key in keys)
                    {
                        for (var i = 0; i < data.selections.length; i++)
                        {
                            if (keys[key] == data.selections[i].id)
                            {
                                // Exit to prevent drop of selected records on itself.
                                if (rindex == key)
                                {
                                    return false;
                                }
                                selections.push(data.selections[i]);
                            }
                        }
                    }
    
                    // fix rowindex based on before/after move
                    if (rindex > data.rowIndex &amp;&amp; this.rowPosition < 0)
                    {
                        rindex--;
                    }
                    if (rindex < data.rowIndex &amp;&amp; this.rowPosition > 0)
                    {
                        rindex++;
                    }
    
                    // fix rowindex for multiselection
                    if (rindex > data.rowIndex &amp;&amp; data.selections.length > 1)
                    {
                        rindex = rindex - (data.selections.length - 1);
                    }
    
                    // we tried to move this node before the next sibling, we stay in place
                    if (rindex == data.rowIndex)
                    {
                        return false;
                    }
    
                    // fire the before move/copy event
                    /* dupe - does it belong here or above???
                    if (this.gridDropTarget.fireEvent(self.copy ? 'beforerowcopy' : 'beforerowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections, 123) === false)
                    {
                        return false;
                    }
                    */
    
                    if (!self.copy)
                    {
                        for (var i = 0; i < data.selections.length; i++)
                        {
                            ds.remove(ds.getById(data.selections[i].id));
                        }
                    }
    
                    for (var i = selections.length - 1; i >= 0; i--)
                    {
                        var insertIndex = rindex;
                        ds.insert(insertIndex, selections[i]);
                    }
    
                    // re-select the row(s)
                    var sm = this.grid.getSelectionModel();
                    if (sm)
                    {
                        sm.selectRecords(data.selections);
                    }
    
                    // fire the after move/copy event
                    this.gridDropTarget.fireEvent(self.copy ? 'afterrowcopy' : 'afterrowmove', this.gridDropTarget, data.rowIndex, rindex, data.selections);
                    return true;
                },
    
                notifyOver: function(dd, e, data)
                {
                    var t = Ext.lib.Event.getTarget(e);
                    var rindex = this.grid.getView().findRowIndex(t);
    
                    // Similar to the code in notifyDrop. Filters for selected rows and quits function if any one row matches the current selected row.
                    var ds = this.grid.getStore();
                    var keys = ds.data.keys;
                    for (var key in keys)
                    {
                        for (var i = 0; i < data.selections.length; i++)
                        {
                            if (keys[key] == data.selections[i].id)
                            {
                                if (rindex == key)
                                {
                                    if (this.currentRowEl)
                                    {
                                        this.currentRowEl.removeClass('grid-row-insert-below');
                                        this.currentRowEl.removeClass('grid-row-insert-above');
                                    }
                                    return this.dropNotAllowed;
                                }
                            }
                        }
                    }
    
                    // If on first row, remove upper line. Prevents negative index error as a result of rindex going negative.
                    if (rindex < 0 || rindex === false)
                    {
                        this.currentRowEl.removeClass('grid-row-insert-above');
                        return this.dropNotAllowed;
                    }
    
                    try
                    {
                        var currentRow = this.grid.getView().getRow(rindex);
                        // Find position of row relative to page (adjusting for grid's scroll position)
                        var resolvedRow = new Ext.Element(currentRow).getY() - this.grid.getView().scroller.dom.scrollTop;
                        var rowHeight = currentRow.offsetHeight;
    
                        // Cursor relative to a row. -ve value implies cursor is above the row's middle and +ve value implues cursor is below the row's middle.
                        this.rowPosition = e.getPageY() - resolvedRow - (rowHeight/2);
    
                        // Clear drag line.
                        if (this.currentRowEl)
                        {
                            this.currentRowEl.removeClass('grid-row-insert-below');
                            this.currentRowEl.removeClass('grid-row-insert-above');
                        }
    
                        if (this.rowPosition > 0)
                        {
                            // If the pointer is on the bottom half of the row.
                            this.currentRowEl = new Ext.Element(currentRow);
                            this.currentRowEl.addClass('grid-row-insert-below');
                        }
                        else
                        {
                            // If the pointer is on the top half of the row.
                            if (rindex - 1 >= 0)
                            {
                                var previousRow = this.grid.getView().getRow(rindex - 1);
                                this.currentRowEl = new Ext.Element(previousRow);
                                this.currentRowEl.addClass('grid-row-insert-below');
                            }
                            else
                            {
                                // If the pointer is on the top half of the first row.
                                this.currentRowEl.addClass('grid-row-insert-above');
                            }
                        }
                    }
                    catch (err)
                    {
                        console.warn(err);
                        rindex = false;
                    }
                    return (rindex === false)? this.dropNotAllowed : this.dropAllowed;
                },
    
                notifyOut: function(dd, e, data)
                {
                    // Remove drag lines when pointer leaves the gridView.
                    if (this.currentRowEl)
                    {
                        this.currentRowEl.removeClass('grid-row-insert-above');
                        this.currentRowEl.removeClass('grid-row-insert-below');
                    }
                }
            });
    
            if (this.targetCfg)
            {
                Ext.apply(this.target, this.targetCfg);
            }
    
            if (this.scrollable)
            {
                Ext.dd.ScrollManager.register(grid.getView().getEditorParent());
                grid.on({
                    beforedestroy: this.onBeforeDestroy,
                    scope: this,
                    single: true
                });
            }
        },
    
        getTarget: function()
        {
            return this.target;
        },
    
        getGrid: function()
        {
            return this.grid;
        },
    
        getCopy: function()
        {
            return this.copy ? true : false;
        },
    
        setCopy: function(b)
        {
            this.copy = b ? true : false;
        },
    
        onBeforeDestroy : function (grid)
        {
            // if we previously registered with the scroll manager, unregister
            // it (if we don't it will lead to problems in IE)
            Ext.dd.ScrollManager.unregister(grid.getView().getEditorParent());
        }
    });
  2. #2

    RE: [CLOSED] [1.0] LockingGridView with custom drag-drop of rows

    Hi,

    Now it should works (please update from SVN). Please note that that DargDrop plugin works when drag outside locking column (works inside unlocking columns only)
  3. #3

    RE: [CLOSED] [1.0] LockingGridView with custom drag-drop of rows

    Thanks Vladimir, works great!

    Dan

Similar Threads

  1. GridPanel move rows drag and drop
    By cbu in forum 1.x Help
    Replies: 2
    Last Post: Jan 13, 2012, 3:20 PM
  2. Drag and Drop rows in single Grid
    By rthiney in forum 1.x Help
    Replies: 2
    Last Post: Dec 21, 2010, 9:41 AM
  3. [CLOSED] Drag & Drop Rows in Grid
    By macap in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 21, 2010, 9:38 AM
  4. Replies: 1
    Last Post: Oct 14, 2010, 12:09 AM
  5. Replies: 6
    Last Post: Dec 17, 2009, 9:40 AM

Posting Permissions