[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:

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 ?

Hello!

Couldn't reproduce this issue with the sample below. However, I don't quite understand your condition:

Code:

---

!selected.length

---

it is always false.

Code:

---

<%@ 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>

---

Hello Baidaly,
below my reply.

Quote:

---

Originally Posted by Baidaly

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

Code:

---

!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

Code:

---

<%@ 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.

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

Code:

---

<%@ 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>

---

Ok Daniil,
I will try with your example, compare with my case and then I will give you a feedback.

Bye.