PDA

View Full Version : [CLOSED] [#144] GridPanel - Parent/Child



adelaney
Aug 30, 2012, 7:06 PM
Do you have an example (MVC & Razor preferred) for configuring/populating a grid for parent/child hierarchy such as something like orders/order details?

Daniil
Aug 30, 2012, 7:23 PM
Hi,

We have no such examples on Razor engine yet, but hope to implement soon.

Here are the examples on WebForm engine.
http://examples2.ext.net/#/GridPanel/Data_with_Details/One-to-Many/
http://examples2.ext.net/#/GridPanel/Miscellaneous/Details_Window/
http://examples2.ext.net/#/GridPanel/Data_with_Details/Form_Details/

adelaney
Aug 31, 2012, 12:28 AM
Ok, maybe I should rephrase. I am trying to create a hiearchal/nested/recursive grid. Something roughly like this:
4707

Vladimir
Aug 31, 2012, 1:06 AM
I guess that TreeGrid can be useful in such scenario
http://examples2.ext.net/#/TreePanel/Advanced/TreeGrid/

Also you can review RowExapander sample
http://examples2.ext.net/#/GridPanel/RowExpander/Dynamic_GridPanels/

adelaney
Aug 31, 2012, 8:33 PM
Sorry to keep dragging this out. However, for both examples, is there any way to use binding and templating to configure the control to the model, or am I seeing that the output would need to be generated manually? Also, I need to be able to edit the data in my grid. Is that possible in these scenarios (tree/row expanded)?

Vladimir
Aug 31, 2012, 8:51 PM
TreeGrid is just tree with columns. How do you want to bind model to the tree? All you need to provide root node with children or configure store to read data remotelly. If your model is Node then you can set it as Root node

Can you provide links, for example on other toolkits, demonstrates bindign model to a tree? Or any mockup code? Just investigate what you expect to see



Also, I need to be able to edit the data in my grid.

TreeGrid supports editing plugins

adelaney
Aug 31, 2012, 10:30 PM
To be clear, I wasn't really looking for a tree. Instead, I was looking for a complex or parent/child grid. Since you asked for examples, here are some:
(For simplicity, they are all ASPX, but most, if not all, include an MVC version too)

http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/declarativerelations/defaultcs.aspx (For example, MVC - http://demos.telerik.com/aspnet-mvc/grid/hierarchyserverside)
http://www.infragistics.com/products/aspnet/hierarchical-data-grid/
http://demos.devexpress.com/ASPxGridViewDemos/MasterDetail/MasterDetail.aspx
http://www.obout.com/grid/aspnet_master_detail_oncallback.aspx
http://aspnetajax.componentart.com/control-specific/datagrid/features/hierarchical_display/WebForm1.aspx

For most of these, you can mainipulate the header/footer of the child grids just like the parent. Sub-grids can have a single header, templated format, etc. Additionally, they are all (at least from my recollection) editable even though that isn't demonstrated with too many of the hierarchical grids. Of course some of the products have TREE grids as well, and even most of those are editable as well. (http://demos.telerik.com/aspnet-ajax/treelist/examples/export/excelexportbasics/defaultcs.aspx)

I am trying to replicate something of this nature. Hope this helps.

Vladimir
Aug 31, 2012, 10:46 PM
Ext.Net grid has no built in detail view, it can be achieved via RowExpander but RowExpander is not related with the grid therefore all must be configured manually (what render to row expander, like in online sample)

It is interesting feature, we will try to implement it after 2.1 release

Daniil
Feb 11, 2013, 8:16 AM
Created an Issue to track this feature request.
https://github.com/extnet/Ext.NET/issues/144

Vladimir
Feb 11, 2013, 9:58 PM
Parent/Child conception can be easly implemented with RowExpander and Associations

One to one


<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
PersonsStore.Data = this.Persons;
}


public List<Person> Persons
{
get
{
return new List<Person>
{
new Person(1, "John Smith", new Address(1, "1", "Cross Street 11/1", "Big City", "123456" )),
new Person(2, "Jane Brown", new Address(2, "2", "Cross Street 12/2", "Big City", "654321" )),
new Person(3, "Kevin Jones", new Address(3, "3", "Cross Street 13/3", "Big City", "321654" ))
};
}
}


public class Address
{
public Address(int id, string number, string street, string city, string zip)
{
this.Id = id;
this.Number = number;
this.Street = street;
this.City = city;
this.Zip = zip;
}

public int Id
{
get;
private set;
}


public string Number
{
get;
private set;
}


public string Street
{
get;
private set;
}

public string City
{
get;
private set;
}


public string Zip
{
get;
private set;
}
}


public class Person
{
public Person(int id, string name, Address address)
{
this.Id = id;
this.Name = name;
this.Address = address;
}


public int Id
{
get;
private set;
}


public string Name
{
get;
private set;
}

public Address Address
{
get;
private set;
}
}
</script>


<!DOCTYPE html>


<html>
<head runat="server">
<title>Simple HasOne Association - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<ext:ResourceManager runat="server" />

<h1>Simple HasOne Association</h1>


<ext:Model runat="server" Name="Address" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Number" />
<ext:ModelField Name="Street" />
<ext:ModelField Name="City" />
<ext:ModelField Name="Zip" />
</Fields>
</ext:Model>

<ext:Store ID="PersonsStore" runat="server">
<Model>
<ext:Model runat="server" Name="Person" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" />
</Fields>
<Associations>
<ext:HasOneAssociation Model="Address" AssociationKey="Address" />
</Associations>
</ext:Model>
</Model>
</ext:Store>


<ext:GridPanel
runat="server"
StoreID="PersonsStore"
Title="Persons with RowExpander"
Width="500"
Height="250">
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander runat="server" SingleExpand="false">
<Component>
<ext:FormPanel
runat="server"
BodyPadding="5">
<Items>
<ext:DisplayField runat="server" FieldLabel="ID" Name="Id" />
<ext:DisplayField runat="server" FieldLabel="Number" Name="Number" />
<ext:DisplayField runat="server" FieldLabel="Street" Name="Street" />
<ext:DisplayField runat="server" FieldLabel="City" Name="City" />
<ext:DisplayField runat="server" FieldLabel="Zip" Name="Zip" />
</Items>
<Listeners>
<AfterRender Handler="this.record.getAddress(function(address){this.getF orm().loadRecord(address);}, this);" />
</Listeners>
</ext:FormPanel>
</Component>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</body>
</html>


One to many


<%@ 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;
}
}
</script>


<!DOCTYPE html>


<html>
<head runat="server">
<title>Simple HasMany Association - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<ext:ResourceManager runat="server" />

<h1>Simple HasMany Association</h1>


<ext:Model 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 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
runat="server"
StoreID="Store1"
Title="Users with RowExpander"
Width="500"
Height="250">
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander runat="server" SingleExpand="false">
<Component>
<ext:GridPanel
runat="server"
Title="Products">
<Store>
<ext:Store runat="server" ModelName="Product" />
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1" />
</Columns>
</ColumnModel>
<Listeners>
<AfterRender Handler="this.bindStore(this.record.products());" />
</Listeners>
</ext:GridPanel>
</Component>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</body>
</html>


We updated Association examples in SVN to demonstrate associations with RowExpander