Nov 03, 2010, 11:28 AM
[CLOSED] RowExpander: GridPanel button doesn't show
Hi,
I'm using a RowExpander and creating a GridPanel dynamically in the code-behind.
I'm adding a button to the this generated grid. The issue is that this button is not shown.
I'm using a RowExpander and creating a GridPanel dynamically in the code-behind.
I'm adding a button to the this generated grid. The issue is that this button is not shown.
<%@ 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 <= 5; i++)
{
data.Add(new { ID = "S" + i, Name = "Supplier " + i});
}
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"];
RenderGridPanel(id);
}
[DirectMethod]
public void RenderGridPanel(string id)
{
string divId = "row-" + id;
Store store = new Store { ID = "StoreRow_" + id };
JsonReader reader = new JsonReader();
reader.IDProperty = "ID";
reader.Fields.Add("ID", "Name");
store.Reader.Add(reader);
HttpProxy proxy = new HttpProxy
{
Url = "Test.ashx",
Method = HttpMethod.GET,
};
store.Proxy.Add(proxy);
store.AutoLoadParams.Add(new Ext.Net.Parameter { Name = "id", Value = id });
RemoveFromCache(store.ID);
store.Render();
AddToCache(store.ID);
GridPanel grid = new GridPanel
{
ID = "GridPanelRow_" + id,
StoreID = store.ID,
Height = 200
};
grid.ColumnModel.Columns.Add(new Column
{
Header = "Products's Name",
DataIndex = "Name"
});
grid.ColumnModel.ID = "GridPanelRowCM_" + id;
grid.View.Add(new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true });
ResourceManager1.RegisterIcon(Icon.Disk);
Ext.Net.Button saveButton = new Ext.Net.Button { Text = "Save", Icon = Icon.Disk };
grid.Buttons.Add(saveButton);
//important
X.Get(divId).SwallowEvent(new string[] { "click", "dblclick", "mousedown", "mouseup" }, true);
RemoveFromCache(grid.ID);
grid.Render(divId, RenderMode.RenderTo);
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 ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<script type="text/javascript">
window.cache = [];
var cleanCache = function () {
if (window.cache.length == 0) {
return;
}
RowExpander1.collapseAll();
Ext.each(window.cache, function (control) {
if (control) {
control.destroy();
}
});
window.cache = [];
};
var removeFromCache = function (controlId) {
var control = window[controlId];
window.cache.remove(control);
if (control) {
control.destroy();
}
};
var addToCache = function (controlId) {
window.cache.push(window[controlId]);
};
var beforeExpand = function (item, record, body, rowIndex) {
if (body.rendered) {
return;
}
Ext.net.DirectMethods.RenderGridPanel(record.get("ID"), {
success: function () {
body.rendered = true;
},
eventMask: {
showMask: true,
msg: "Loading ...",
target: "customTarget",
customTarget: item.grid.body
}
});
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="Name" />
</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="400">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Supplier" DataIndex="Name" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" ForceFit="true">
<Listeners>
<BeforeRefresh Fn="cleanCache" />
</Listeners>
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
<Template ID="Template1" runat="server">
<Html>
<div id="row-{ID}" style="background-color:White;"></div>
</Html>
</Template>
<Listeners>
<BeforeExpand Fn="beforeExpand" />
</Listeners>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
