[CLOSED] Move up/down gridpanel , delete gridpanel data can not work

  1. #1

    [CLOSED] Move up/down gridpanel , delete gridpanel data can not work

    Hi,
    That code was use to when user click button to move up, move down or delete gridpanel data
    but the code can't work.
    please help me.

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System" %>
    <%@ Import Namespace="System.Web" %>
    <%@ Import Namespace="System.Xml.Xsl" %>
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.IO" %>
    <%@ Import Namespace="System.Globalization" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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 (!X.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 runat="server">
        <title></title>
        <script type="text/javascript">
           var move = function (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]);
            };
    
          
          var del = function (grid) {
               var selection = #{GridPanel1}.getView().getSelectionModel().getSelection()[0];
                if (selection) {
                    #{GridPanel1}.store.remove(selection);
                                                        
                 }
             };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="company" />
                            <ext:ModelField Name="price" Type="Float" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title=" " Width="600"
                Height="350">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column runat="server" ColumnID="Company" Header="Company" Width="160" Sortable="true"
                            DataIndex="company" />
                        <ext:Column runat="server" Header="Price" Width="75" Sortable="true" DataIndex="price" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                </SelectionModel>
                <Buttons>
                    <ext:Button ID="Button3" runat="server" Text="UP">
                        <Listeners>
                            <Click Handler="move(#{GridPanel1}, true);" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button4" runat="server" Text="DOWN">
                        <Listeners>
                            <Click Handler="move(#{GridPanel1}, false);" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button1" runat="server" Text="Delete">
                        <Listeners>
                            <Click Handler="del(#{GridPanel1});" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:GridPanel>
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 27, 2012 at 9:07 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Not so informative:
    Quote Originally Posted by gs_user View Post
    but the code can't work.
    Please always provide more details.

    1. If you use the #{} within the <script>, that <script> must be wrapped in an <ext:XScript> control.

    Or you can just replace
    #{GridPanel1}
    and use the "grid" argument which you pass into the functions.

    2. There is no getSelected method. So, please replace
    var record = grid.getSelectionModel().getSelected();
    with
    var record = grid.getSelectionModel().getSelection()[0];
    3. There is no the selectedRecords method. So, please replace
    grid.getSelectionModel().selectRecords([record]);
    with
    grid.getSelectionModel().select(record);
  3. #3
    Hi,
    I correct errors, It's can work now.
    Thanks again.

     <script type="text/javascript">
           var move = function (grid, up) {
                var ds = grid.getStore();
                var record = grid.getSelectionModel().getSelection()[0];
                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().select(record);
            };
    
          
          var del = function (grid) {
               var selection = grid.getView().getSelectionModel().getSelection()[0];
                if (selection) {
                    grid.store.remove(selection);
                                                        
                 }
             };
        </script>
    Quote Originally Posted by Daniil View Post
    Hi,

    Not so informative:


    Please always provide more details.

    1. If you use the #{} within the <script>, that <script> must be wrapped in an <ext:XScript> control.

    Or you can just replace
    #{GridPanel1}
    and use the "grid" argument which you pass into the functions.

    2. There is no getSelected method. So, please replace
    var record = grid.getSelectionModel().getSelected();
    with
    var record = grid.getSelectionModel().getSelection()[0];
    3. There is no the selectedRecords method. So, please replace
    grid.getSelectionModel().selectRecords([record]);
    with
    grid.getSelectionModel().select(record);

Similar Threads

  1. Move row from one gridpanel to another
    By sneha in forum 1.x Help
    Replies: 15
    Last Post: Dec 29, 2011, 10:58 AM
  2. Replies: 1
    Last Post: Jan 03, 2011, 1:49 PM
  3. Replies: 5
    Last Post: Aug 13, 2010, 6:36 AM
  4. Replies: 0
    Last Post: Jul 23, 2010, 6:35 AM
  5. [CLOSED] GridPanel Move Row Up/Down
    By Immobilmente in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 12, 2009, 12:40 PM

Posting Permissions