Jan 26, 2017, 12:02 PM
[FIXED] [#1422] [4.2.1] Change Selection Model of GridPanel
Hello,
I have a GridPanel and options to change its selection model (Row Selection Model or Spreadsheet selection Model), in 4.1 I was able to switch between selection models. Here in 4.2 , while trying to switch from spreadsheet selection model to row selection model I am getting the following error in JS Console: "ext.axd:1226 Uncaught TypeError: Cannot read property 'ownerGrid' of undefined"
here is a test case and an attached screen capture, you can try in 4.1 and 4.2
Thank you
I have a GridPanel and options to change its selection model (Row Selection Model or Spreadsheet selection Model), in 4.1 I was able to switch between selection models. Here in 4.2 , while trying to switch from spreadsheet selection model to row selection model I am getting the following error in JS Console: "ext.axd:1226 Uncaught TypeError: Cannot read property 'ownerGrid' of undefined"
here is a test case and an attached screen capture, you can try in 4.1 and 4.2
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.GetData();
}
}
public List<object> GetData()
{
var data = new List<object>();
var thisYear = DateTime.Today.Year;
var random = new Random();
for (int year = 1900; year <= thisYear; ++year)
{
data.Add(new object[]
{
year,
this.GetRandomNumber(-10, 100, random),
this.GetRandomNumber(-10, 100, random),
this.GetRandomNumber(-10, 200, random),
this.GetRandomNumber(-10, 200, random),
this.GetRandomNumber(-10, 200, random),
this.GetRandomNumber(-10, 300, random),
this.GetRandomNumber(-10, 300, random),
this.GetRandomNumber(-10, 300, random),
this.GetRandomNumber(-10, 600, random),
this.GetRandomNumber(-10, 500, random),
this.GetRandomNumber(-10, 200, random),
this.GetRandomNumber(-10, 100, random)
});
}
return data;
}
public int GetRandomNumber(int min, int max, Random r)
{
return (int)Math.Floor(r.NextDouble() * (max - min)) + min;
}
protected void ReloadData(object sender, DirectEventArgs e)
{
this.Store1.DataSource = this.GetData();
this.Store1.DataBind();
}
[DirectMethod]
public void ChangeSelectionModel(string Mode)
{
if(Mode=="ROW")
{
GridPanel1.SelectionModel.Clear();
GridPanel1.SelectionModel.Add(new Ext.Net.RowSelectionModel { Mode = Ext.Net.SelectionMode.Single, ID = "RowSelectionModel1" });
}
if(Mode=="SPREADSHEET")
{
GridPanel1.SelectionModel.Clear();
GridPanel1.SelectionModel.Add(new SpreadsheetSelectionModel { ID = "SpreadsheetSelectionModel1", ColumnSelect = true, PruneRemoved = true, CheckboxSelect = true });
//GridPanel1.Plugins.Add(new Clipboard { ID ="Clipboard1" });
//GridPanel1.Plugins.Add(new SelectionReplicator { });
}
this.Store1.DataSource = this.GetData();
this.Store1.DataBind();
GridPanel1.Update();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script type="text/javascript">
var onSelectionChange = function (grid, selection) {
var status = App.Status,
message = '??',
firstRowIndex,
firstColumnIndex,
lastRowIndex,
lastColumnIndex;
if (!selection) {
message = 'No selection';
} else if (selection.isCells) {
firstRowIndex = selection.getFirstRowIndex();
firstColumnIndex = selection.getFirstColumnIndex();
lastRowIndex = selection.getLastRowIndex();
lastColumnIndex = selection.getLastColumnIndex();
message = 'Selected cells: ' + (lastColumnIndex - firstColumnIndex + 1) + 'x' + (lastRowIndex - firstRowIndex + 1) +
' at (' + firstColumnIndex + ',' + firstRowIndex + ')';
} else if (selection.isRows) {
message = 'Selected rows: ' + selection.getCount();
} else if (selection.isColumns) {
message = 'Selected columns: ' + selection.getCount();
}
status.update(message);
};
var toggleRowSelect = function (button, pressed) {
App.SpreadsheetSelectionModel1.setRowSelect(pressed);
};
var toggleCellSelect = function (button, pressed) {
App.SpreadsheetSelectionModel1.setCellSelect(pressed);
};
var toggleColumnSelect = function (button, pressed) {
App.SpreadsheetSelectionModel1.setColumnSelect(pressed);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1"
runat="server"
ColumnLines="true"
Height="400"
Width="775"
Title="Spreadsheet"
Frame="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server" IDProperty="year">
<Fields>
<ext:ModelField Name="year" />
<ext:ModelField Name="jan" />
<ext:ModelField Name="feb" />
<ext:ModelField Name="mar" />
<ext:ModelField Name="apr" />
<ext:ModelField Name="may" />
<ext:ModelField Name="jun" />
<ext:ModelField Name="jul" />
<ext:ModelField Name="aug" />
<ext:ModelField Name="sep" />
<ext:ModelField Name="oct" />
<ext:ModelField Name="nov" />
<ext:ModelField Name="dec" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<SelectionModel>
<ext:SpreadsheetSelectionModel
ID="SpreadsheetSelectionModel1"
runat="server"
ColumnSelect="true"
CheckboxSelect="true"
PruneRemoved="false"
Extensible="Y" />
</SelectionModel>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Year" DataIndex="year" Flex="1" MinWidth="70" />
<ext:Column runat="server" Text="Jan" DataIndex="jan" Width="50" />
<ext:Column runat="server" Text="Feb" DataIndex="feb" Width="50" />
<ext:Column runat="server" Text="Mar" DataIndex="mar" Width="50" />
<ext:Column runat="server" Text="Apr" DataIndex="apr" Width="50" />
<ext:Column runat="server" Text="May" DataIndex="may" Width="50" />
<ext:Column runat="server" Text="Jun" DataIndex="jun" Width="50" />
<ext:Column runat="server" Text="Jul" DataIndex="jul" Width="50" />
<ext:Column runat="server" Text="Aug" DataIndex="aug" Width="50" />
<ext:Column runat="server" Text="Sep" DataIndex="sep" Width="50" />
<ext:Column runat="server" Text="Oct" DataIndex="oct" Width="50" />
<ext:Column runat="server" Text="Nov" DataIndex="nov" Width="50" />
<ext:Column runat="server" Text="Dec" DataIndex="dec" Width="50" />
</Columns>
</ColumnModel>
<ViewConfig TrackOver="false" />
<Tools>
<ext:Tool Type="Refresh" ToolTip="Reload Data" OnDirectClick="ReloadData" />
</Tools>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Component runat="server" Html="Selectable:" />
<ext:Button
runat="server"
Text="Rows"
EnableToggle="true"
ToggleHandler="toggleRowSelect"
Pressed="true" />
<ext:Button
runat="server"
Text="Cells"
EnableToggle="true"
ToggleHandler="toggleCellSelect"
Pressed="true" />
<ext:Button
runat="server"
Text="Columns"
EnableToggle="true"
ToggleHandler="toggleColumnSelect"
Pressed="true" />
<ext:ToolbarFill runat="server" />
<ext:Component ID="Status" runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
<Listeners>
<SelectionChange Fn="onSelectionChange" />
</Listeners>
<Plugins>
<ext:Clipboard runat="server" />
<ext:SelectionReplicator runat="server" />
</Plugins>
</ext:GridPanel>
<ext:Button runat="server" Text="Row SelectionModel" OnClientClick="App.direct.ChangeSelectionModel('ROW')"/>
<ext:Button runat="server" Text="SpreadSheet SelectionModel" OnClientClick="App.direct.ChangeSelectionModel('SPREADSHEET')"/>
</form>
</body>
</html>Thank you
Last edited by fabricio.murta; Jan 27, 2017 at 6:55 AM.
