PDA

View Full Version : [CLOSED] Nested Grid w/Remote Filter



jwhitmire36
Sep 18, 2014, 5:30 PM
Hello,
First I am trying to find out if what I am looking to do is even possible, and if so then what is the best approach to accomplish it. I started with the nested grid example in the HasMany section http://examples2.ext.net/#/Associations/HasMany/Simple/

What I would like to do is add Remote Filtering to the second level grid, so I set the Store property and added a PageProxy, but as soon as you add the proxy an empty RequestFailure error is thrown when you expand the second grid. I presume this due to conflict between the events for the Proxy and ViewReady listener. It's also not a requirement to do 'on-demand' loading of the second grid.

Again I want to find out if this is possible before I go too far down the rabbit hole, but if it is get some guidance on the proper method.
I'm using V2.5.1, .NET 4.0 and VS2010.



<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Store1.Data = this.Users;
}
public List<User> Users
{
get
{
return new List<User>
{
new User(1, "User1", new List<Product>{
new Product(1, "Product1 of User1"),
new Product(2, "Product2 of User1"),
new Product(3, "Product3 of User1")
}),
new User(2, "User2", new List<Product>{
new Product(4, "Product1 of User2"),
new Product(5, "Product2 of User2"),
new Product(6, "Product3 of User2")
}),
new User(3, "User3", new List<Product>{
new Product(7, "Product1 of User3"),
new Product(8, "Product2 of User3"),
new Product(9, "Product3 of User3")
})
};
}
}
public class Product
{
public Product(int id, string name)
{
this.Id = id;
this.Name = name;
}
public int Id
{
get;
private set;
}
public string Name
{
get;
private set;
}
}
public class User
{
public User(int id, string name, List<Product> products)
{
this.Id = id;
this.Name = name;
this.Products = products;
}
public int Id
{
get;
private set;
}
public string Name
{
get;
private set;
}
public List<Product> Products
{
get;
private set;
}
}
protected void Store2_Refresh(object sender, StoreReadDataEventArgs e)
{
string s = e.Parameters[this.GridFilters1.ParamPrefix];

// Filter Logic
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Simple HasMany Association - Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Simple HasMany Association</h1>
<ext:Model ID="Model1" runat="server" Name="Product" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
</Fields>
</ext:Model>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" Name="User" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
</Fields>
<Associations>
<ext:HasManyAssociation Model="Product" Name="products" AssociationKey="Products"/>
</Associations>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="GridPanel2"
runat="server"
StoreID="Store1"
Title="Users with RowExpander"
Width="500"
Height="250">
<ColumnModel>
<Columns>
<ext:Column ID="Column3" runat="server" Text="Name" DataIndex="Name" Flex="1" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server" SingleExpand="false">
<Component>
<ext:GridPanel ID="GridPanel3" runat="server" Title="Products">
<Store>
<ext:Store ID="Store2" runat="server" ModelName="Product" RemoteFilter="true" OnReadData="Store2_Refresh">
<Proxy>
<ext:PageProxy />
</Proxy>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column4" runat="server" Text="Name" DataIndex="Name" Flex="1" />
</Columns>
</ColumnModel>
<Features>
<ext:GridFilters ID="GridFilters1" runat="server" Local="false">
<Filters>
<ext:StringFilter DataIndex="Name"></ext:StringFilter>
</Filters>
</ext:GridFilters>
</Features>
<Listeners>
<ViewReady Handler="this.bindStore(this.record.products());" Delay="1" />
</Listeners>
</ext:GridPanel>
</Component>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</body>
</html>


Thanks,
JW

Daniil
Sep 19, 2014, 10:10 AM
Hi @jwhitmire36,

I think it is possible and it should be not quite difficult to achieve that.

Though, not with a PageProxy and a Store's OnReadData. A Store's OnReadData is a DirectEvent. As any control's DirectEvent it requires a control instance on the server side with the specific ID. Since you set SingleExpand="false", that leads to an individual Store for each row. Also, the Store's ID is just ignored on client side, because it should be unique.

So, I recommend to use a PageProxy with a DirectFn or an AjaxProxy.

jwhitmire36
Sep 19, 2014, 6:14 PM
Hi Daniil,
Thanks for the response. I see how to use the PageProxy and DirectFn to call a DirectMethod to load the second grid. What I'm not figuring out is how to pass custom parameter to the DirectMethod. The overload method I always use 'App.direct.directMethod(parm1) causes a javascript error:
Error: Ext.JSON.decode(): You're trying to decode an invalid JSON String: App.direct.Store2_Load(this.record.Id); And this i not a DirectEvent so there are no EventArgs to use. Can you provide further assistance?

I'm also wondering how I will get the Filter Parameters once I get to that task.

Here's my updated example:


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Store1.Data = this.Users;
}
public List<User> Users
{
get
{
return new List<User>
{
new User(1, "User1", new List<Product>{
new Product(1, "Product1 of User1"),
new Product(2, "Product2 of User1"),
new Product(3, "Product3 of User1")
}),
new User(2, "User2", new List<Product>{
new Product(4, "Product1 of User2"),
new Product(5, "Product2 of User2"),
new Product(6, "Product3 of User2")
}),
new User(3, "User3", new List<Product>{
new Product(7, "Product1 of User3"),
new Product(8, "Product2 of User3"),
new Product(9, "Product3 of User3")
})
};
}
}
public class Product
{
public Product(int id, string name)
{
this.Id = id;
this.Name = name;
}
public int Id
{
get;
private set;
}
public string Name
{
get;
private set;
}
}
public class User
{
public User(int id, string name, List<Product> products)
{
this.Id = id;
this.Name = name;
this.Products = products;
}
public int Id
{
get;
private set;
}
public string Name
{
get;
private set;
}
public List<Product> Products
{
get;
private set;
}
}
[DirectMethod]
public object Store2_Load(int id)
{
int Id = id;
return this.Users[Id].Products;
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Simple HasMany Association - Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Simple HasMany Association</h1>
<ext:Model ID="Model1" runat="server" Name="Product" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
</Fields>
</ext:Model>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" Name="User" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
</Fields>
<Associations>
<ext:HasManyAssociation Model="Product" Name="products" AssociationKey="Products"/>
</Associations>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="GridPanel2"
runat="server"
StoreID="Store1"
Title="Users with RowExpander"
Width="500"
Height="250">
<ColumnModel>
<Columns>
<ext:Column ID="Column3" runat="server" Text="Name" DataIndex="Name" Flex="1" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander ID="RowExpander1" runat="server" SingleExpand="false">
<Component>
<ext:GridPanel ID="GridPanel3" runat="server" Title="Products">
<Store>
<ext:Store ID="Store2" runat="server" ModelName="Product" RemoteFilter="true">
<Proxy>
<ext:PageProxy DirectFn="App.direct.Store2_Load(this.record.Id);">
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column4" runat="server" Text="Name" DataIndex="Name" Flex="1" />
</Columns>
</ColumnModel>
<Features>
<ext:GridFilters ID="GridFilters1" runat="server" Local="false">
<Filters>
<ext:StringFilter DataIndex="Name"></ext:StringFilter>
</Filters>
</ext:GridFilters>
</Features>

</ext:GridPanel>
</Component>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</body>
</html>


Thanks

Daniil
Sep 22, 2014, 12:45 PM
If you define

[DirectMethod]
public object Store2_Load(string action, Dictionary<string, object> extraParams)

then you can retrieve parameters from the extraParams Dictionary.

jwhitmire36
Sep 24, 2014, 6:14 PM
Sorry been off work for a couple days, but I have this working now. Thanks for your help! You can close this thread.

JW