What's New?

[CLOSED] GridPanel Move Row Up/Down

  1. #1
    Jan 12, 2009, 11:19 AM

    [CLOSED] GridPanel Move Row Up/Down

    Hi EveryBody,
    i would like to know if there's a way to move up and down a row (ClientSide) inside a GridPanel.
    I have a GridPanel with 2 columns ID, Name, and i need to move them up and down for custom sorting purpose. The problem is also that after move them, the column id have to auto update according to the new row position. Is there a way to do this?

    Please help.
    Thanks a lot,
  2. #2
    Jan 12, 2009, 11:49 AM

    RE: [CLOSED] GridPanel Move Row Up/Down

    Hi Andrea,

    Here is a sample which shows how to move records with buttons
    <%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Ext.IsAjaxRequest)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] {"3m Co", 71.72},
                new object[] {"Alcoa Inc", 29.01},
                new object[] {"Altria Group Inc", 83.81}
            };

            this.Store1.DataBind();
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    
    <script type="text/javascript">
        function move(grid, up) {
            var ds = grid.getStore();
            var record = grid.getSelectionModel().getSelected();
            var rindex = ds.indexOf(record);

            rindex += up ? -1 : 1;

            if (rindex < 0 || rindex > ds.getCount()) {
                return;
            }
            
            ds.remove(record);
            ds.insert(rindex, record);
            grid.getSelectionModel().selectRecords([record]); ;
        }   
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="company" />
                        <ext:RecordField Name="price" Type="Float" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            StoreID="Store1" 
            StripeRows="true"
            Title="Array Grid" 
            TrackMouseOver="true"
            Width="600" 
            Height="350"
            AutoExpandColumn="Company">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                    <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price"/>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
            </SelectionModel>
            
            <Buttons>
                <ext:Button runat="server" Text="UP">
                    <Listeners>
                        <Click Handler="move(#{GridPanel1}, true);" />
                    </Listeners>
                </ext:Button>
                
                <ext:Button ID="Button1" runat="server" Text="DOWN">
                    <Listeners>
                        <Click Handler="move(#{GridPanel1}, false);" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:GridPanel>  
    </form>
</body>
</html>
    I am not sure how you need update record after moving therefore I didn't include this functionality


  3. #3
    Jan 12, 2009, 12:40 PM

    RE: [CLOSED] GridPanel Move Row Up/Down

    Thank you vladimir it perfectly work!
    I only fix a little problem in your example:
    Pressing on the "DOWN" button a lot of time, more than the rows inside the gridpanel are, it fire a javascript error and the selected row disapper.
    To fix this problem I have modify the "function move" as following:

    


function move(grid, up) { 
    var ds = grid.getStore(); 
    var record = grid.getSelectionModel().getSelected(); 
    var rindex = ds.indexOf(record); 
    rindex += up ? -1 : 1; 
    //Only modify >= ds.getCount() instead of > ds.getCount()
    if (rindex < 0 || rindex >=  ds.getCount()) { 
        return; 
    } 
    ds.remove(record); 
    ds.insert(rindex, record); 
    grid.getSelectionModel().selectRecords([record]); 
}
    Thank you again Vladsh, fast as always.


Similar Threads

  1. [CLOSED] Move up/down gridpanel , delete gridpanel data can not work
    By gs_user in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 27, 2012, 12:37 AM
  2. Move row from one gridpanel to another
    By sneha in forum 1.x Help
    Replies: 15
    Last Post: Dec 29, 2011, 10:58 AM
  3. [CLOSED] disable column move in gridpanel
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 14, 2011, 7:36 AM
  4. Problem about Gridpanel editor move
    By zhangsir199 in forum 1.x Help
    Replies: 3
    Last Post: Dec 13, 2010, 12:32 PM
  5. [CLOSED] Gridpanel Rows Move
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 28, 2009, 6:46 AM

Posting Permissions