[CLOSED] GridPanel single selection doesn't fire SelectionChange event

  1. #1

    [CLOSED] GridPanel single selection doesn't fire SelectionChange event

    Hi all,
    I want to alert that I experienced that in my GridPanel if I specify <ext:RowSelectionModel runat="server" Mode="Single"> the inner <SelectionChange Handler="..." is not fired when I move between cell (for example with the TAB key), viceversa, if I specify <ext:RowSelectionModel runat="server" Mode="Multi"> it works well.

    Below my code:

    <ext:GridPanel ID="gridPanelUserManagement" runat="server" Header="false" Border="false">
        <Store>
            <ext:Store ID="storeGridPanelUserManagement" runat="server" PageSize="10"
                       AutomaticResponseValues="false" OnBeforeStoreChanged="BeforeChanged" 
                       OnAfterStoreChanged="AfterChanged" OnBeforeRecordInserted="BeforeInserted"
                       OnBeforeRecordUpdated="BeforeUpdated" OnBeforeRecordDeleted="BeforeDeleted"
                       OnReadData="RefreshData">
                <Model>
                    <ext:Model ID="gridPanelUserModel" runat="server" IDProperty="ID" Name="User">
                        <Fields>
                            <ext:ModelField Name="ID" Type="Int" />
                            <ext:ModelField Name="Name" Type="String" />
                            <ext:ModelField Name="Surname" Type="String" />
                            <ext:ModelField Name="Username" Type="String" />
                            <ext:ModelField Name="Role" Type="String" />
                        </Fields>
                    </ext:Model>
                </Model>
                <Sorters>
                    <ext:DataSorter Property="Surname" Direction="ASC" />            
                </Sorters>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:RowNumbererColumn runat="server" Width="25" />
                <ext:Column runat="server" meta:resourcekey="column_ID" DataIndex="ID" Visible="false"/>
                <ext:Column runat="server" meta:resourcekey="column_name" DataIndex="Name" Sortable="true" Flex="1">
                    <Editor>
                        <ext:TextField runat="server" AllowBlank="false" />
                    </Editor>
                </ext:Column>
                <ext:Column runat="server" meta:resourcekey="column_surname" DataIndex="Surname" Sortable="true" Flex="1">
                    <Editor>
                        <ext:TextField runat="server" AllowBlank="false" />
                    </Editor>
                </ext:Column>
                <ext:Column runat="server" meta:resourcekey="column_username" DataIndex="Username" Sortable="true" Flex="1">
                    <Editor>
                        <ext:TextField runat="server" AllowBlank="false" />
                    </Editor>
                </ext:Column>
                <ext:Column runat="server" meta:resourcekey="column_role" DataIndex="Role" Sortable="true" Flex="1">
                    <Editor>
                        <ext:ComboBox runat="server" Editable="false" SelectOnTab="true" AllowBlank="false" >
                            <Items>
                                <ext:ListItem meta:resourcekey="listItem_administrator" />
                                <ext:ListItem meta:resourceKey="listItem_employee" />
                            </Items>
                        </ext:ComboBox>
                    </Editor>
                </ext:Column>
            </Columns>
        </ColumnModel>
        <Plugins>
            <ext:CellEditing runat="server" />
        </Plugins>
        <SelectionModel>
            <ext:RowSelectionModel runat="server" Mode="Multi">
                <Listeners>                                               
                    <SelectionChange Handler="#{buttonDeleteUser}.enable();
                                              #{buttonResetPassword}.enable();
                                              if (#{storeGridPanelUserManagement}.getModifiedRecords().length == 0) {
                                                  #{buttonSaveUser}.disable();
                                              } else {
                                                  #{buttonSaveUser}.enable();
                                              }" />
                </Listeners>
            </ext:RowSelectionModel>
        </SelectionModel>
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button ID="buttonAddUser" runat="server" meta:resourcekey="button_addUser" Icon="UserAdd">
                        <Listeners>
                            <Click Handler="var newUser = Ext.ModelManager.create({Name: 'New Name',Surname: 'New Surname',Username: 'New Username',Role: '',}, 'User');
                                            #{storeGridPanelUserManagement}.insert(0, newUser);
                                            #{gridPanelUserManagement}.editingPlugin.startEditByPosition({row:0, column:1});
                                            #{buttonSaveUser}.enable()" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="buttonDeleteUser" runat="server" meta:resourcekey="button_removeUser" Icon="UserDelete" Disabled="true">
                        <Listeners>
                            <Click Handler="#{gridPanelUserManagement}.deleteSelected();
                                            #{storeGridPanelUserManagement}.sync();
                                            #{buttonSaveUser}.disable();
                                            if (!#{gridPanelUserManagement}.hasSelection()) {
                                                #{btnDelete}.disable();
                                            }" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="buttonSaveUser" runat="server" meta:resourcekey="button_save" Icon="Disk" Disabled="true">
                        <Listeners>
                            <Click Handler="#{storeGridPanelUserManagement}.sync();
                                            #{storeGridPanelUserManagement}.reload();
                                            #{gridPanelUserManagement}.selModel.clearSelections();
                                            #{buttonSaveUser}.disable();" />
                        </Listeners>
                    </ext:Button>
                    <ext:ToolbarFill />
                    <ext:Button ID="buttonResetPassword" runat="server" meta:resourcekey="button_resetPassword" Icon="UserKey" Disabled="true">
                        <Listeners>
                            <Click Handler="var selectedRow = #{gridPanelUserManagement}.getRowsValues({selectedOnly:true});
                                            App.direct.ResetPassword(selectedRow);" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Listeners>
            <SelectionChange Handler="#{buttonDeleteUser}.setDisabled(!selected.length);#{buttonResetPassword}.setDisabled(!selected.length);" />
        </Listeners>
    </ext:GridPanel>
    Can anyone explain me if I make some error ?
    Last edited by Daniil; Dec 18, 2013 at 3:52 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Couldn't reproduce this issue with the sample below. However, I don't quite understand your condition:
    !selected.length
    it is always false.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
         {
             this.Store1.DataSource = new List<Company> 
             { 
                 new Company("3m Co", 71.72, 0.02, 0.03),
                 new Company("Alcoa Inc", 29.01, 0.42, 1.47),
                 new Company("Altria Group Inc", 83.81, 0.28, 0.34),
                 new Company("American Express Company", 52.55, 0.01, 0.02),
                 new Company("American International Group, Inc.", 64.13, 0.31, 0.49),
                 new Company("AT&T Inc.", 31.61, -0.48, -1.54),
                 new Company("Boeing Co.", 75.43, 0.53, 0.71),
                 new Company("Caterpillar Inc.", 67.27, 0.92, 1.39),
                 new Company("Citigroup, Inc.", 49.37, 0.02, 0.04)
             };
        }
        
        public class Company
        {
            public Company(string name, double price, double change, double pctChange)
            {
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
            public Company()
            {
            }
    
            public string Name { get;set; }
            public double Price { get;set; }
            public double Change { get;set; }
            public double PctChange { get;set; }
        }
    </script>
    
    <html>
    <head runat="server">
    </head>
    <body>
         <form runat="server">
            <ext:ResourceManager runat="server" SourceFormatting="true" InitScriptMode="Inline" />
        
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server" IDProperty="Name">
                        <Fields>
                            <ext:ModelField Name="Name" />
                            <ext:ModelField Name="Price" />
                            <ext:ModelField Name="Change" />
                            <ext:ModelField Name="PctChange" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1"
                Title="Company List"
                Collapsible="true"
                Width="600"
                Height="350">
                <ColumnModel runat="server">
    	            <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="Name" Flex="1" />
                        <ext:Column runat="server" Text="Price" Width="75" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="Change" />
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="PctChange" />
    	            </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single" />
                </SelectionModel>  
                <Listeners>
                    <SelectionChange Handler="Ext.Msg.alert('Selected', 'Selected ' + selected.length);" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    Hello Baidaly,
    below my reply.

    Quote Originally Posted by Baidaly View Post
    Hello!

    Couldn't reproduce this issue with the sample below. However, I don't quite understand your condition:
    Do you mean that in your case the single selection
    and multiple selection fires the SelectionChanges event ?

    Quote Originally Posted by Baidaly View Post
    !selected.length
    it is always false.
    I take it from this example:
    https://examples2.ext.net/#/GridPane...ins/RowEditor/
    It works well because enable the button only when the user select a row

    Quote Originally Posted by Baidaly View Post
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
         {
             this.Store1.DataSource = new List<Company> 
             { 
                 new Company("3m Co", 71.72, 0.02, 0.03),
                 new Company("Alcoa Inc", 29.01, 0.42, 1.47),
                 new Company("Altria Group Inc", 83.81, 0.28, 0.34),
                 new Company("American Express Company", 52.55, 0.01, 0.02),
                 new Company("American International Group, Inc.", 64.13, 0.31, 0.49),
                 new Company("AT&T Inc.", 31.61, -0.48, -1.54),
                 new Company("Boeing Co.", 75.43, 0.53, 0.71),
                 new Company("Caterpillar Inc.", 67.27, 0.92, 1.39),
                 new Company("Citigroup, Inc.", 49.37, 0.02, 0.04)
             };
        }
        
        public class Company
        {
            public Company(string name, double price, double change, double pctChange)
            {
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
            public Company()
            {
            }
    
            public string Name { get;set; }
            public double Price { get;set; }
            public double Change { get;set; }
            public double PctChange { get;set; }
        }
    </script>
    
    <html>
    <head runat="server">
    </head>
    <body>
         <form runat="server">
            <ext:ResourceManager runat="server" SourceFormatting="true" InitScriptMode="Inline" />
        
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server" IDProperty="Name">
                        <Fields>
                            <ext:ModelField Name="Name" />
                            <ext:ModelField Name="Price" />
                            <ext:ModelField Name="Change" />
                            <ext:ModelField Name="PctChange" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1"
                Title="Company List"
                Collapsible="true"
                Width="600"
                Height="350">
                <ColumnModel runat="server">
    	            <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="Name" Flex="1" />
                        <ext:Column runat="server" Text="Price" Width="75" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="Change" />
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="PctChange" />
    	            </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single" />
                </SelectionModel>  
                <Listeners>
                    <SelectionChange Handler="Ext.Msg.alert('Selected', 'Selected ' + selected.length);" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    I will try to execute your code and will give you a feedback.

    Thank you for your help.
  4. #4
    I cannot reproduce with the test case below. My steps are:

    1. Double click at the second cell of the first row.
    2. The row gets selected, SelectionChange fires and editing start. It is expected.
    3. Press Tab.
    4. The first cell of the second grid gets edited, the second row gets selected, SelectionChange fires. It is also expected.

    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" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </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">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing runat="server" />
                </Plugins>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single">
                        <Listeners>
                            <SelectionChange Handler="console.log('SelectionChange');" />
                        </Listeners>
                    </ext:RowSelectionModel>
                </SelectionModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Ok Daniil,
    I will try with your example, compare with my case and then I will give you a feedback.

    Bye.

Similar Threads

  1. Replies: 3
    Last Post: Oct 05, 2012, 12:44 PM
  2. [CLOSED] ToolTip Listener doesn't fire the event
    By sisa in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 10, 2012, 10:56 AM
  3. SortChange Direct Event doesn't fire at all
    By cicaglisa in forum 1.x Help
    Replies: 1
    Last Post: May 23, 2012, 6:31 PM
  4. Save store doesn't fire CommitFailed event
    By Greg44 in forum 1.x Help
    Replies: 1
    Last Post: Apr 13, 2012, 5:15 PM
  5. [CLOSED] Change event on combobox doesn't fire
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 06, 2010, 6:01 PM

Posting Permissions