PDA

View Full Version : [CLOSED] GridPanel single selection doesn't fire SelectionChange event



tactime10
Dec 07, 2013, 12:22 PM
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}.getModifiedRecord s().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.startEdit ByPosition({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.clearSelection s();
#{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({selected Only:true});
App.direct.ResetPassword(selectedRow);" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Listeners>
<SelectionChange Handler="#{buttonDeleteUser}.setDisabled(!selected.length); #{buttonResetPassword}.setDisabled(!selected.lengt h);" />
</Listeners>
</ext:GridPanel>


Can anyone explain me if I make some error ?

Baidaly
Dec 07, 2013, 11: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, 10:45 AM
Hello Baidaly,
below my reply.


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 ?




!selected.length
it is always false.


I take it from this example:
http://examples2.ext.net/#/GridPanel/Plugins/RowEditor/
It works well because enable the button only when the user select a row




<%@ 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, 12:43 PM
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, 3:23 PM
Ok Daniil,
I will try with your example, compare with my case and then I will give you a feedback.

Bye.