Nov 15, 2010, 10:09 AM
[CLOSED] row expander - problem grid child width
The width of the grid is set by
Instead takes the width of the grid parent
the result you get is very bad
scrollbar child of the grid is not very visible(Figure 1)
My scenario is this:
I have a viewport
the parent grid has many columns for this reason it is very large
I wish my daughter had the same width grid dela central region of my viewport
Or I also thought of moving the scrollbar on the left to make it more visible
I am attaching the code so it's more understandable
grid.View.Add(new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true });Instead takes the width of the grid parent
the result you get is very bad
scrollbar child of the grid is not very visible(Figure 1)
My scenario is this:
I have a viewport
the parent grid has many columns for this reason it is very large
I wish my daughter had the same width grid dela central region of my viewport
Or I also thought of moving the scrollbar on the left to make it more visible
I am attaching the code so it's more understandable
<%@ 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, Name = "Supplier " + i});
}
this.Store1.DataSource = data;
this.Store1.DataBind();
}
protected void Store1_Refresh(object sender, StoreRefreshDataEventArgs e)
{
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", "Name");
store.Reader.Add(reader);
List<object> data = new List<object>();
for (int i = 1; i <= 10; i++)
{
data.Add(new { ID = "P"+i, Name = "Product " + i });
}
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 = "Products's Name",
DataIndex = "Name"
});
grid.ColumnModel.ID = "GridPanelRowCM_" + id;
grid.View.Add(new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true });
//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 ID="ResourcePlaceHolder1" 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 ID="ResourceManager1" runat="server" />
<ext:Store
ID="Store1"
runat="server"
OnRefreshData="Store1_Refresh">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Description" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
TrackMouseOver="false"
Title="Expander Rows with ListView"
Collapsible="true"
Region="Center"
AnimCollapse="true"
Icon="Table"
Width="2600"
Height="600">
<ColumnModel ID="ColumnModelMissioni" runat="server">
<Columns>
<ext:Column Header="nOME" DataIndex="Name" Width="750" />
<ext:Column Header="Descrzione" DataIndex="Description" Width="890" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server">
<Listeners>
<BeforeRefresh Fn="clean" />
</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>
<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>
<ext:FormPanel
ID="FormPanel1"
runat="server"
Region="East"
Width="800"
AutoScroll="true"
Split="true"
MonitorPoll="200"
MonitorValid="true"
Margins="0 0 5 5"
BodyStyle="background-color:#DFE8F6; padding:10px; border: 1px solid #99bbe8;"
Frame="true"
Title="Dettaglio Missione"
Icon="Lock"
DefaultAnchor="98%"/>
</Items></ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Nov 17, 2010 at 5:40 PM.
Reason: [CLOSED]
