Unfortunately there is another problem related to this topic: the SelectionModel after a DirectEvent is not working. Check this example:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.net.GridPanel.prototype.doSelection = Ext.net.GridPanel.prototype.doSelection.createInterceptor(function () {
this.getSelectionModel();
});
function Cell_Listener(record, rowIndex, colIndex) {
document.getElementById('<%= status.ClientID %>').innerHTML = 'Bottom Grid Listener - Row: ' + rowIndex + ' Col: ' + colIndex;
}
</script>
<script runat="server">
Random rndGenerator = new Random();
enum RenderMode
{
WithGroupHeaders = 1,
WithoutGroupHeaders = 2
};
[DirectMethod]
public void Prepare_Click(object sender, DirectEventArgs e)
{
PrepareGrid(topGrid, RenderMode.WithoutGroupHeaders);
PrepareGrid(bottomGrid, RenderMode.WithGroupHeaders);
}
[DirectMethod]
public void Load_Click(object sender, DirectEventArgs e)
{
DataTable data = new DataTable();
data.Columns.Add("Date", typeof(DateTime));
data.Columns.Add("Text1", typeof(string));
data.Columns.Add("Num1", typeof(int));
data.Columns.Add("Text2", typeof(string));
data.Columns.Add("Num2", typeof(int));
data.Columns.Add("Comments", typeof(string));
data.Rows.Add(DateTime.Now, "Line 1", 10, "Random: " + rndGenerator.Next(100).ToString(), 20, "Correct");
data.Rows.Add(DateTime.Now.AddDays(1).AddHours(1), "Line 2", 15, "Another random: " + rndGenerator.Next(100).ToString(), 25, "Wrong");
this.strDemo.DataSource = data;
this.strDemo.DataBind();
}
[DirectMethod]
public void Cell_Click(object sender, DirectEventArgs e)
{
CellSelectionModel csm = sender as CellSelectionModel;
X.MessageBox.Show(new MessageBoxConfig() { Message = "Row: " + csm.SelectedCell.RowIndex + " Col: " + csm.SelectedCell.ColIndex + " Cell Content: [" + csm.SelectedCell.Value + "]", Buttons = MessageBox.Button.OK, Width = 300 });
}
private void PrepareGrid(GridPanel grid, RenderMode version)
{
var columns = new string[] { "Text1", "Num1", "Text2", "Num2", "Comments" };
foreach (string col in columns)
{
Column newCol = new Column { Header = col, DataIndex = col, Width = 120, MenuDisabled = true, Sortable = false };
grid.ColumnModel.Columns.Add(newCol);
if (version == RenderMode.WithoutGroupHeaders)
grid.AddColumn(newCol);
}
var headerGroupRow = new HeaderGroupRow();
var headerGroups = new[] { new { Header = "Date", Span = 2 }, new { Header = "Group 1", Span = 2 },
new { Header = "Group 2", Span = 2}, new { Header = "", Span = 1}};
foreach (var header in headerGroups)
{
headerGroupRow.Columns.Add(new HeaderGroupColumn
{
Header = header.Header,
Align = Alignment.Center,
ColSpan = header.Span
});
}
if (version == RenderMode.WithGroupHeaders)
{
grid.View.View.HeaderGroupRows.Add(headerGroupRow);
grid.Controls.RemoveAt(0);
grid.Render();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Dynamic Grid Column Header Grouping Problem</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="strDemo" runat="server">
<Reader>
<ext:JsonReader IDProperty="Date">
<Fields>
<ext:RecordField Name="Date" Type="Date" />
<ext:RecordField Name="Text1" Type="String" />
<ext:RecordField Name="Num1" Type="Int" />
<ext:RecordField Name="Text2" Type="String" />
<ext:RecordField Name="Num2" Type="Int" />
<ext:RecordField Name="Comments" Type="String" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel runat="server" Region="North" Height="200">
<Content>
<h1>Dynamic Grid Column Header Grouping Problem</h1>
<ext:Label runat="server" Text="North Panel" />
<ext:GridPanel ID="topGrid" runat="server" StoreID="strDemo" AutoHeight="true">
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:DateColumn Header="Day" DataIndex="Date" Format="MM/dd/yyyy" MenuDisabled="true" Sortable="false" />
<ext:DateColumn Header="Time" DataIndex="Date" Format="HH:mm" MenuDisabled="true" Sortable="false" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel ID="CellSelectionModel2" runat="server">
<DirectEvents>
<CellSelect OnEvent="Cell_Click" />
</DirectEvents>
</ext:CellSelectionModel>
</SelectionModel>
<View>
<ext:GroupingView>
<HeaderGroupRows>
</HeaderGroupRows>
</ext:GroupingView>
</View>
</ext:GridPanel>
</Content>
</ext:Panel>
<ext:Panel runat="server" Region="West" Width="100">
<Items>
<ext:Button runat="server" ID="btnPrepare" Text="Prepare Grids">
<DirectEvents>
<Click OnEvent="Prepare_Click" />
</DirectEvents>
</ext:Button>
<ext:Button runat="server" ID="btnLoad" Text="Load data">
<DirectEvents>
<Click OnEvent="Load_Click" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="Center">
<Items>
<ext:GridPanel ID="bottomGrid" runat="server" StoreID="strDemo" AutoHeight="true">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:DateColumn Header="Day" DataIndex="Date" Format="MM/dd/yyyy" MenuDisabled="true" Sortable="false" />
<ext:DateColumn Header="Time" DataIndex="Date" Format="HH:mm" MenuDisabled="true" Sortable="false" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel ID="CellSelectionModel1" runat="server">
<DirectEvents>
<CellSelect OnEvent="Cell_Click" />
</DirectEvents>
<Listeners>
<CellSelect Fn="Cell_Listener" />
</Listeners>
</ext:CellSelectionModel>
</SelectionModel>
<View>
<ext:GroupingView>
<HeaderGroupRows>
</HeaderGroupRows>
</ext:GroupingView>
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Label runat="server" ID="status" Region="South" Height="100" />
</Items>
</ext:Viewport>
</form>
</body>
</html>
The top grid, without the group header (Render() is not called), is working fine, but when the group header is used SelectedCell is empty. The Listener works though.
By the way, does the grid require being inside a <form runat="server"> for the selection model to work? I found out that if it's not inside a form, it doesn't work in either case.
Thanks and regards,
Andrew
PS: After some more testing it seems that the group header is not actually related, but only the addition of columns via ColumnModel + Render(), instead of grid.AddColumn().
Another finding: if the grid columns are added via the first method and the grid doesn't have a View, none of the two CellSelect events are fired. This is not a problem in my case (my grid has a View), but I just wanted to point this out.
Second PS: Meanwhile I am using ExtraParams in the DirectEvent to send the missing info to the code behind.
Originally Posted by ALobpreis
