DevPinoy.org
A Filipino Developers Community
   
How To: Creating a Master-Detail view in ASP.NET using GridViews and Generics

A simple demo that shows how to create a Master-Detail View in ASP.NET.

Creating the underlying classes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// Customer Class
using System;

public class Customer
{
private int _customerId;
public int CustomerId
{
get { return _customerId; }
set { _customerId = value; }
}

private string _name;
public string Name
{
get { return _name; }
set { _name = value; }
}

private string _address;
public string Address
{
get { return _address; }
set { _address = value; }
}

private string _cardType;
public string CardType
{
get { return _cardType; }
set { _cardType = value; }
}

private string _cardNumber;
public string CardNumber
{
get { return _cardNumber; }
set { _cardNumber = value; }
}

private Orders _orders;
public Orders Orders
{
get { return _orders; }
set { _orders = value; }
}
}

//Order Class
using System;

public class Order
{
private string _orderId;
public string OrderId
{
get { return _orderId; }
set { _orderId = value; }
}

private string _product;
public string Product
{
get { return _product; }
set { _product = value; }
}

private int _quantity;
public int Quantity
{
get { return _quantity; }
set { _quantity = value; }
}

private double _total;
public double Total
{
get { return _total; }
set { _total = value; }
}

private DateTime _orderDate;
public DateTime OrderDate
{
get { return _orderDate; }
set { _orderDate = value; }
}
}

//Customers Class
using System.Collections;
using System.Collections.Generic;


public class Customers: List<Customer> { }

//Orders Class
using System.Collections;
using System.Collections.Generic;


public class Orders: List<Order> { }

Setting up our GridView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
 <asp:GridView ID="customerGrid" runat="server" AutoGenerateColumns="False" 
OnRowDataBound="customerGrid_RowDataBound" Width="70%" BackColor="White" 
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Arial" 
Font-Size="X-Small" ForeColor="Black" GridLines="Vertical">
<Columns>
<asp:BoundField DataField="CustomerId" HeaderText="Id" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Customer Name" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
<asp:BoundField DataField="Address" HeaderText="Address" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
<asp:BoundField DataField="CardType" HeaderText="Card Type" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
<asp:BoundField DataField="CardNumber" HeaderText="Customer Number" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
<asp:TemplateField HeaderText="Orders">
<ItemTemplate>
<asp:GridView ID="ordersGrid" runat="server" Width="100%" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="OrderId" HeaderText="OrderId" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
<asp:BoundField DataField="Product" HeaderText="Product" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
<asp:BoundField DataField="Quantity" HeaderText="Quantity" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
<asp:BoundField DataField="Total" HeaderText="Total" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
<asp:BoundField DataField="OrderDate" HeaderText="OrderDate" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#CCCC99" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>

Putting everything together in our ASP.NET page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
Customers customers = new Customers();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CreateCustomers();
customerGrid.DataSource = customers;
customerGrid.DataBind();
}
}

/// <summary>
/// Create dummy customers
/// </summary>
public void CreateCustomers()
{
//create 50 customers starting from 10000 to 10010
for (int customerId = 10000; customerId <= 10010; customerId++)
{
Customer customer = new Customer();
customer.CustomerId = customerId;
customer.Name = "Name " + customerId.ToString();
customer.Address = "Address" + customerId.ToString();
customer.CardType = "Visa" + customerId.ToString();
customer.CardNumber = "Card Number" + customerId.ToString();

//create an order for each customer
customer.Orders = CreateCustomerOrders(customerId);

//add the customer to our generic list
customers.Add(customer);
}
}

/// <summary>
/// Create dummy orders for each customer
/// </summary>
/// <param name="customerId">customer id</param>
/// <returns>a generic list of Orders</returns>
private Orders CreateCustomerOrders(int customerId)
{
Orders orders = new Orders();
for (int orderLine = 500; orderLine <= 505; orderLine++)
{
Order order = new Order();
order.OrderId = customerId + "-" + orderLine;
order.Product = "Product" + orderLine.ToString();
order.Quantity = orderLine - 450;
order.Total = 1.25 * order.Quantity;
order.OrderDate = DateTime.Now;
orders.Add(order);
}
return orders;
}
protected void customerGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
//check if the current row is of type DataRow
if (e.Row.RowType == DataControlRowType.DataRow)
{
//find our orders grid
GridView ordersGrid = (GridView)e.Row.FindControl("ordersGrid");

//get the DataItem and cast it into a Customer class
Customer customer = (Customer)e.Row.DataItem;

//get our orders
ordersGrid.DataSource = customer.Orders;
//bind it!
ordersGrid.DataBind();
}
}
}

See it in action: http://demos.devpinoy.org/deepbinding/

or just download the project. KeithRull.DeepBinding.zip (4.99 KB)


Posted 12-26-2006 2:15 PM by keithrull

Comments

cruizer wrote re: How To: Creating a Master-Detail view in ASP.NET using GridViews and Generics
on 12-26-2006 5:02 PM

now that's cool. I didn't know you can subclass a List<Order> as simply an Orders class and leave everything blank in it Smile i certainly can use this approach to shorten my typing in my future projects Wink...

keithrull wrote re: How To: Creating a Master-Detail view in ASP.NET using GridViews and Generics
on 12-27-2006 12:46 PM

thanks cruizer :)

lamia wrote re: How To: Creating a Master-Detail view in ASP.NET using GridViews and Generics
on 12-27-2006 3:49 PM

Cool thing! I haven't tried this in Java! I didn't have time to study the code. I'm also not that good in reading C#(although I can understand). Could you please tell more about this code sir Keith? Like what it actually does and the benefits of doing so? I'm referring  to the Generics part of your code. :)

keithrull wrote re: How To: Creating a Master-Detail view in ASP.NET using GridViews and Generics
on 12-27-2006 4:03 PM

the code was just actually my way of answering a question in our forum posted by Dwarvend about accessing a class inside another class on databinding.

The code doen't really have to show other than building a generic list(a strongly typed list) to serve as container for the customer data and an generic Orders class which is basically strongly typed list(collection) of Orders. The other thing to note is that you can access the current tow of record being assigned to a GridViewRow by acessing that row's DataItem property inside of the RowDataBound event.

btw, here's a good intro about Generics in java.

http://java.sun.com/j2se/1.5/pdf/generics-tutorial.pdf

keithrull wrote re: How To: Creating a Master-Detail view in ASP.NET using GridViews and Generics
on 12-27-2006 4:04 PM

btw, didn't have much time to explain the whole article because my boss was just in the other desk while i was posting this to my blog.. heheh... call that sneaking in...

lamia wrote re: How To: Creating a Master-Detail view in ASP.NET using GridViews and Generics
on 12-27-2006 9:47 PM

Thanks! I actually know Generics, I use it everytime. I just didn't imagine that it could be used in inheritance. :)

Copyright DevPinoy 2005-2008