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

**tactime10** · Dec 07, 2013, 11:22 AM

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 ?

**Baidaly** · Dec 07, 2013, 10:49 PM

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>

**tactime10** · Dec 10, 2013, 9:45 AM

Hello Baidaly,
below my reply.

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 ?

Originally Posted by Baidaly

!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

Originally Posted by Baidaly

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

**Daniil** · Dec 10, 2013, 11:43 AM

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>

**tactime10** · Dec 10, 2013, 2:23 PM

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

Bye.

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

Thread Tools

Search Thread

Display

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

Similar Threads

How to change gridpanel selection model selection mode (single/multiple) from client side (javascript)?

[CLOSED] ToolTip Listener doesn't fire the event

SortChange Direct Event doesn't fire at all

Save store doesn't fire CommitFailed event

[CLOSED] Change event on combobox doesn't fire

Posting Permissions

Sitemap

Downloads

Resources

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

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

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us