Well, first of all, sorry about the double post.
Then, I made some progress in this request. For all interested, i will put my code in the end of the post.
Now, the problem.
I have these two grids. I can drag from on to another and one of them has a RowExpander. No problem until this point.
I can expand the first layer (to a second), but for some reason I get an error saying "control not found" when I try to expand the second layer to a third one.
Here's the code I'm stuck at:
<script>
protected void Page_Load(object sender, EventArgs e)
{
if (X.IsAjaxRequest)
{
return;
}
List<object> data = new List<object>();
for (int i = 0; i < 10; i++)
{
data.Add(new { strDescricao = "Something " + i, Column1 = i.ToString(), CodProduto = i.ToString(), iLevel = 1 });
}
this.Store1.DataSource = data;
this.Store1.DataBind();
}
protected void BeforeExpand(object sender, DirectEventArgs e)
{
string id = e.ExtraParams["id"];
string lvl = e.ExtraParams["lvl"];
BeforeExpand(id, lvl);
}
protected void BeforeExpand(string id, string lvl)
{
Store store = new Store { ID = "StoreRow_" + id };
JsonReader reader = new JsonReader();
reader.IDProperty = "ID";
reader.Fields.Add("ID", "Name", "iLevel");
store.Reader.Add(reader);
List<object> data = new List<object>();
for (int i = 1; i <= 10; i++)
{
data.Add(new { ID = i, Name = "Product " + i, iLevel = int.Parse(lvl) + 1 });
}
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;
Ext.Net.GridView view = new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true };
view.Listeners.BeforeRefresh.Fn = "clean";
grid.View.Add(view);
Ext.Net.RowExpander row = new RowExpander
{
ID = "RowExpander_" + id,
EnableCaching = true,
Template = { ID = "Template_" + id, Html = "<div id='row-{iLevel}-{ID}' style='background-color: White;'></div>" }
};
row.DirectEvents.BeforeExpand.EventMask.ShowMask = true;
row.DirectEvents.BeforeExpand.EventMask.Target = MaskTarget.CustomTarget;
row.DirectEvents.BeforeExpand.EventMask.CustomTarget = "={" + grid.ID + ".body}";
row.DirectEvents.BeforeExpand.ExtraParams.Add(new Ext.Net.Parameter { Name = "id", Value = "record.data.ID", Mode = ParameterMode.Raw });
row.DirectEvents.BeforeExpand.ExtraParams.Add(new Ext.Net.Parameter { Name = "lvl", Value = "record.data.iLevel", Mode = ParameterMode.Raw });
row.DirectEvents.BeforeExpand.Event += new ComponentDirectEvent.DirectEventHandler(BeforeExpand);
grid.Plugins.Add(row);
store.DataSource = data;
this.RemoveFromCache(store.ID);
store.Render();
this.AddToCache(store.ID);
//important
X.Get("row-" + lvl + "-" + id).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick" }, true);
this.RemoveFromCache(grid.ID);
grid.Render("row-" + lvl + "-" + id, RenderMode.RenderTo);
this.AddToCache(grid.ID);
}
private void RemoveFromCache(string id)
{
ResourceManager1.AddScript("removeFromCache({0});", JSON.Serialize(id));
}
private void AddToCache(string id)
{
ResourceManager1.AddScript("addToCache({0});", JSON.Serialize(id));
}
</script>
<script type="text/javascript">
window.lookup = [];
var clean = function (view, isDestroy) {
var controls = window.lookup[view.grid.id] || {},
ids = [];
for (var c in controls) {
ids.push(controls[c].id || controls[c].storeId);
}
if (ids.length > 0) {
if (isDestroy !== true) {
view.grid.getRowExpander().collapseAll();
}
for (var i = 0; i < ids.length; i++) {
removeFromCache(ids[i], view.grid.id);
}
}
};
var addToCache = function (c, parent) {
window.lookup[parent] = window.lookup[parent] || {};
window.lookup[parent][c] = window[c];
}
var removeFromCache = function (c, parent) {
window.lookup[parent] = window.lookup[parent] || {};
var ctrl = window.lookup[parent][c];
delete window.lookup[parent][c];
if (ctrl) {
if (ctrl.view) {
clean(ctrl.view, true);
}
ctrl.destroy();
}
}
var onContainerOver = function (dz, grid, dd, e, data) {
return dd.grid !== grid ? dz.dropAllowed : dz.dropNotAllowed;
};
var onContainerDrop = function (grid, dd, e, data) {
if (dd.grid !== grid) {
Ext.each(data.selections, function (r) {
dd.grid.store.remove(r);
});
grid.store.add(data.selections);
return true;
} else {
return false;
}
};
var getDragDropText = function () {
var buf = [];
buf.push("<ul>");
Ext.each(this.getSelectionModel().getSelections(), function (record) {
buf.push("<li>" + record.data.strDescricao + "</li>");
});
buf.push("</ul>");
return buf.join("");
};
var getRepairXY = function (e, dd) {
if (this.dragData.selections.length > 0) {
var foundItem = dd.grid.store.find('strDescricao', this.dragData.selections[0].data.strDescricao);
var myRow = dd.grid.getView().getRow(foundItem);
this.invalidRow = myRow;
var xy = Ext.fly(myRow).getXY();
return xy;
}
return false;
};
var setDD = function () {
this.getView().dragZone.getRepairXY = getRepairXY;
};
</script>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<!-- Store das Grids -->
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader IDProperty="CodProduto">
<Fields>
<ext:RecordField Name="CodProduto" />
<ext:RecordField Name="strDescricao" />
<ext:RecordField Name="strDerivacao" />
<ext:RecordField Name="fPrecoTabela" />
<ext:RecordField Name="iSaldoTotal" />
<ext:RecordField Name="iLevel" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store ID="Store2" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="strFilial" />
<ext:RecordField Name="strDeposito" />
<ext:RecordField Name="iSaldo" />
<ext:RecordField Name="iPedidoCliente" />
<ext:RecordField Name="iPedidoFornecedor" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<!-- Fim dos Stores -->
<!-- Grids de Drag and Drop -->
<ext:Panel runat="server" ID="Panel1" Layout="AnchorLayout" Height="580">
<Items>
<ext:GridPanel runat="server" ID="GridPanel1" StoreID="Store1" ForceLayout="true"
DDGroup="GridDDGroup" EnableDragDrop="true" StripeRows="true" Title="Left" AnchorHorizontal="49.5%"
AnchorVertical="100%" Style="float: left">
<ColumnModel>
<Columns>
<ext:RowNumbererColumn Header="Seq." />
<ext:Column Header="Cod. Produto" DataIndex="CodProduto" />
<ext:Column Header="Descrição" DataIndex="strDescricao" />
<ext:Column Header="Derivação" DataIndex="strDerivacao" />
<ext:Column Header="Preço Tabela" DataIndex="fPrecoTabela" />
<ext:Column Header="Saldo Total" DataIndex="iSaldoTotal" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" ForceFit="true">
<Listeners>
<BeforeRefresh Fn="clean" />
</Listeners>
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" ID="pgnToolbar" PageSize="20">
</ext:PagingToolbar>
</BottomBar>
<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server">
<Template ID="Template1" runat="server">
<Html>
<div id="row-{iLevel}-{CodProduto}" style="background-color: White;"></div>
</Html>
</Template>
<DirectEvents>
<BeforeExpand OnEvent="BeforeExpand">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
<ExtraParams>
<ext:Parameter Name="id" Value="record.data.CodProduto" Mode="Raw" />
<ext:Parameter Name="lvl" Value="record.data.iLevel" Mode="Raw" />
</ExtraParams>
</BeforeExpand>
</DirectEvents>
</ext:RowExpander>
</Plugins>
<GetDragDropText Fn="getDragDropText" />
<Listeners>
<Render Fn="setDD" />
</Listeners>
</ext:GridPanel>
<ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store2" ForceLayout="true"
DDGroup="GridDDGroup" EnableDragDrop="true" StripeRows="true" Title="Right" AnchorHorizontal="49.5%"
AnchorVertical="100%" Style="float: right">
<ColumnModel>
<Columns>
<ext:RowNumbererColumn Header="Seq." />
<ext:Column Header="Filial" DataIndex="strFilial" />
<ext:Column Header="Depósito" DataIndex="strDeposito" />
<ext:Column Header="Saldo" DataIndex="iSaldo" />
<ext:Column Header="Pedido Cliente" DataIndex="iPedidoCliente" />
<ext:Column Header="Pedido Fornecedor" DataIndex="iPedidoFornecedor" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
</SelectionModel>
<GetDragDropText Fn="getDragDropText" />
<Listeners>
<Render Fn="setDD" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Panel>
<!-- Fim das Grids -->
<!-- DropZones -->
<ext:DropZone ID="DropZone1" runat="server" Target="={GridPanel1.view.scroller.dom}"
Group="GridDDGroup" ContainerScroll="true">
<OnContainerDrop Handler="return onContainerDrop(GridPanel1, source, e, data);" />
<OnContainerOver Handler="return onContainerOver(this, GridPanel1, source, e, data);" />
</ext:DropZone>
<ext:DropZone ID="DropZone2" runat="server" Target="={GridPanel2.view.scroller.dom}"
Group="GridDDGroup" ContainerScroll="true">
<OnContainerDrop Handler="return onContainerDrop(GridPanel2, source, e, data);" />
<OnContainerOver Handler="return onContainerOver(this, GridPanel2, source, e, data);" />
</ext:DropZone>
<!-- Fim das DropZones -->
</form>
</body>
So, can anyone look into this and tell me where or what I am doing wrong?
Thanks in advance!
Regards,
André Custódio
Originally Posted by ACustodio
