Yes, that XTemplate control is always in the first position.
I have done lots of tests and finally found out the cause why this fails in our site. It's when the grid is inside a Viewport with Layout="border". It does not occur when Layout is "accordion" or default, for example.
In this case, when I click the button and Render() is called, the grid just disappears. If I'm debugging it, I see there is an "undefined" exception inside a WebResource.axd in a setLeftTop function.
After further testing, I discovered that placing the GridPanel inside a Panel does an interesting change: the group headers are finally rendered, but the grid moves to the north region of the Viewport!!! If I'm debugging it, I see that the problem is again in a WebResource.axd, this time in function renderHeaders, where this.cm.rows is undefined.
Here is the complete code for you to reproduce (the PrepareGrid function is the same as before):
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
[DirectMethod]
public void OnClick(object sender, DirectEventArgs e)
{
PrepareGrid(myGrid2);
myGrid2.Controls.RemoveAt(0);
myGrid2.Render();
btnPrepare.Disabled = true;
}
private void PrepareGrid(GridPanel grid)
{
grid.Reconfigure();
var columns = new string[] { "Text 1", "Number 1", "Text 2", "Number 2", "End Column" };
foreach (string col in columns)
{
Column newCol = new Column { Header = col };
grid.ColumnModel.Columns.Add(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
});
}
grid.View.View.HeaderGroupRows.Add(headerGroupRow);
}
</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>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Dynamic Grid Column Header Grouping Problem</h1>
<ext:Store ID="strEmpty" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel runat="server" Region="North" Height="200">
<Content>
<ext:Label runat="server" Text="North Panel" />
</Content>
</ext:Panel>
<ext:Panel runat="server" Region="West" Width="80">
<Content>
<ext:Button runat="server" ID="btnPrepare" Text="Prepare Grid">
<DirectEvents>
<Click OnEvent="OnClick" />
</DirectEvents>
</ext:Button>
</Content>
</ext:Panel>
<ext:Panel runat="server" Region="Center">
<Content>
<ext:GridPanel ID="myGrid2" runat="server" StoreID="strEmpty">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Day" />
<ext:Column Header="Time" />
</Columns>
</ColumnModel>
<View>
<ext:GroupingView>
<HeaderGroupRows>
</HeaderGroupRows>
</ext:GroupingView>
</View>
</ext:GridPanel>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>
I also tried this small demo with versions 1.2 and 1.7 (after removing the .RemoveAt(0) line) and the behavior is the same.
After checking the DOM of the "scambled" page with the Developer Toolbar, I see that inside the Center panel there is a div with id="myGrid2_Container" which only contains an input (previously had the whole grid, of course), and directly below the body tag there is an empty div with the same id="myGrid2_Container" followed by the actual grid div (id="myGrid2"). I don't know if this may help, but these are my 2 cents.
Any ideas?
Thanks a lot and best regards,
Andrew
Originally Posted by Daniil
