Nov 30, 2010, 12:02 PM
Layout issue: Show Gridpanel in gridpanel with rowexpander
Hi,
This example is based on the dynamic gridpanels with rowexpander.
When you expand a row, a gridpanel is shown for that row expander. Now i've expanded the example with multiple columns and column headers and then you can see in attachment that the column values are not displayed exactly under the correct column header anymore. The column headers are shifting to the left.
Full code:
This example is based on the dynamic gridpanels with rowexpander.
When you expand a row, a gridpanel is shown for that row expander. Now i've expanded the example with multiple columns and column headers and then you can see in attachment that the column values are not displayed exactly under the correct column header anymore. The column headers are shifting to the left.
Full code:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Import Namespace="ListView=Ext.Net.ListView"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (X.IsAjaxRequest)
{
//We do not need to DataBind on an DirectEvent
return;
}
List<object> data = new List<object>();
for (int i = 1; i <= 10; i++)
{
data.Add(new { ID = "S" + i, General = "Supplier " + i, Name1 = "Name1", Name2 = "Name2", Name3 = "Name3", Name4 = "Name4", Name5 = "Name5", Name6 = "Name6" });
}
this.Store1.DataSource = data;
this.Store1.DataBind();
}
private void RemoveFromCache(string id)
{
X.Js.Call("removeFromCache", id);
}
private void AddToCache(string id)
{
X.Js.Call("addToCache", id);
}
protected void BeforeExpand(object sender, DirectEventArgs e)
{
string id = e.ExtraParams["id"];
Store store = new Store { ID = "StoreRow_"+id };
JsonReader reader = new JsonReader();
reader.IDProperty = "ID";
reader.Fields.Add("ID", "General", "Name1", "Name2", "Name3", "Name4", "Name5", "Name6");
store.Reader.Add(reader);
List<object> data = new List<object>();
for (int i = 1; i <= 10; i++)
{
data.Add(new { ID = "P" + i, General = "Product " + i, Name1 = "Name1", Name2 = "Name2", Name3 = "Name3", Name4 = "Name4", Name5 = "Name5", Name6 = "Name6" });
}
store.DataSource = data;
this.RemoveFromCache(store.ID);
store.Render();
this.AddToCache(store.ID);
GridPanel grid = new GridPanel{
ID = "GridPanelRow_"+id,
StoreID = "{raw}StoreRow_" + id,
Height = 200
};
grid.ColumnModel.Columns.Add(new Column { Header = "General", DataIndex = "General" });
grid.ColumnModel.Columns.Add(new Column { Header = "Name1", DataIndex = "Name1" });
grid.ColumnModel.Columns.Add(new Column { Header = "Name2", DataIndex = "Name2" });
grid.ColumnModel.Columns.Add(new Column { Header = "Name3", DataIndex = "Name3" });
grid.ColumnModel.Columns.Add(new Column { Header = "Name4", DataIndex = "Name4" });
grid.ColumnModel.Columns.Add(new Column { Header = "Name5", DataIndex = "Name5" });
grid.ColumnModel.Columns.Add(new Column { Header = "Name6", DataIndex = "Name6" });
grid.ColumnModel.ID = "GridPanelRowCM_" + id;
Ext.Net.GridView gdView = new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true };
HeaderGroupRow HGR = new Ext.Net.HeaderGroupRow();
HGR.Columns.Add(new HeaderGroupColumn { ColSpan=1, Header=""});
HGR.Columns.Add(new HeaderGroupColumn { ColSpan=2, Header="Name1 & Name2"});
HGR.Columns.Add(new HeaderGroupColumn { ColSpan=2, Header="Name3 & Name4"});
HGR.Columns.Add(new HeaderGroupColumn { ColSpan=2, Header="Name5 & Name6"});
gdView.HeaderGroupRows.Add(HGR);
grid.View.Add(gdView);
//important
X.Get("row-" + id).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick"}, true);
this.RemoveFromCache(grid.ID);
grid.Render("row-" + id, RenderMode.RenderTo);
this.AddToCache(grid.ID);
}
</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>RowExpander with GridPanel - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<ext:ResourcePlaceHolder runat="server" Mode="Script" />
<script type="text/javascript">
window.lookup = [];
var clean = function () {
if (window.lookup.length > 0) {
RowExpander1.collapseAll();
Ext.each(window.lookup, function (control) {
if (control) {
control.destroy();
}
});
window.lookup = [];
}
};
var removeFromCache = function(c) {
var c = window[c];
window.lookup.remove(c);
if (c) {
c.destroy();
}
};
var addToCache = function(c) {
window.lookup.push(window[c]);
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager runat="server" />
<h1>Row Expander Plugin with GridPanel</h1>
<p>The caching is presented, GridPanel renders once only (until view refresh)</p>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="General" />
<ext:RecordField Name="Name1" />
<ext:RecordField Name="Name2" />
<ext:RecordField Name="Name3" />
<ext:RecordField Name="Name4" />
<ext:RecordField Name="Name5" />
<ext:RecordField Name="Name6" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
TrackMouseOver="false"
Title="Expander Rows with ListView"
Collapsible="true"
AnimCollapse="true"
Icon="Table"
Width="600"
Height="600">
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Supplier" DataIndex="General" />
<ext:Column Header="Name1" DataIndex="Name1" />
<ext:Column Header="Name2" DataIndex="Name2" />
<ext:Column Header="Name3" DataIndex="Name3" />
<ext:Column Header="Name4" DataIndex="Name4" />
<ext:Column Header="Name5" DataIndex="Name5" />
<ext:Column Header="Name6" DataIndex="Name6" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" ForceFit="true">
<Listeners>
<BeforeRefresh Fn="clean" />
</Listeners>
<HeaderGroupRows>
<ext:HeaderGroupRow>
<Columns>
<ext:HeaderGroupColumn ColSpan="1" />
<ext:HeaderGroupColumn ColSpan="1" />
<ext:HeaderGroupColumn ColSpan="2" Header="Name1 & Name2" />
<ext:HeaderGroupColumn ColSpan="2" Header="Name3 & Name4" />
<ext:HeaderGroupColumn ColSpan="2" Header="Name5 & Name6" />
</Columns>
</ext:HeaderGroupRow>
</HeaderGroupRows>
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
<Template runat="server">
<Html>
<div id="row-{ID}" style="background-color:White;"></div>
</Html>
</Template>
<DirectEvents>
<BeforeExpand
OnEvent="BeforeExpand"
Before="return !body.rendered;"
Success="body.rendered=true;">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
<ExtraParams>
<ext:Parameter Name="id" Value="record.id" Mode="Raw" />
</ExtraParams>
</BeforeExpand>
</DirectEvents>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
Originally Posted by Birgit
