ASP.NET an expandable grid view?

Question

I've found a lot of different examples on the internet, but nothing seems to do what I'm after.

I have a DB view that generates something like this:

---------------------------------------------------
Company | Code | Total | Available | Used | Needed
---------------------------------------------------
One     |  1   |   10  |     8     |   2  |   3
One     |  2   |   5   |     5     |   0  |   5
Two     |  1   |   5   |     2     |   3  |   0
Two     |  2   |   8   |     4     |   4  |   9
Two     |  3   |   0   |     0     |   0  |   0
---------------------------------------------------

But I'm really after something to summarise all the rows by Company, and be able to expand to view details as needed.

Similar to:

------------------------------------------------------
    Company        | Total | Available | Used | Needed
------------------------------------------------------
[+] One            |   15  |     13    |   2  |   8
------------------------------------------------------
[-] Two       Code |   13  |     6     |   7  |   9
------------------------------------------------------
            |  1   |   5   |     2     |   3  |   0
            |  2   |   8   |     4     |   4  |   9
            |  3   |   0   |     0     |   0  |   0
------------------------------------------------------

I've tried building a gridview within a gridview to poor result.

I have a view which generates the companys and the summary information if it can't be done with JavaScript which is how I assumed it could be done.

I'm just looking for a free control or some bright idea in how I can otherwise accomplish this. New to ASP.NET so there might be something simple I'm missing.

Thanks

Answer 1

You might have better luck with the ListView control.

Matt Berseth has a post on using the ListView control to create this functionality.

Answer 2

Here is a sample with an Accordion, but you could use something else:

Markup:

<ajax:Accordion ID="Accordion1" runat="Server" 
    SelectedIndex="0" 
    HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected" 
    ContentCssClass="accordionContent"
    AutoSize="None" FadeTransitions="true" 
    TransitionDuration="250" FramesPerSecond="40"
    RequireOpenedPane="false" SuppressHeaderPostbacks="true">
    <HeaderTemplate><%# Eval("Key")%></HeaderTemplate>
    <ContentTemplate>
    <asp:ListView runat="server" ID="MyListView" DataSource='<%# Eval("Values") %>'> 
        <LayoutTemplate> 
            <table style="width:75%"> 
                <tr> 
                    <th>Code</th> 
                    <th>Total</th>
                </tr> 
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> 
            </table> 
        </LayoutTemplate> 
        <ItemTemplate>
            <tr> 
                <td><%# Eval("Code")%></td> 
                <td><%# Eval("Total")%></td>
            </tr> 
        </ItemTemplate> 
    </asp:ListView> 

    </ContentTemplate>
</ajax:Accordion>

Code-behind:

public class Company
{
    public string CompanyName;
    public int Code, Total;
    public Company(string company, int code, int total)
    {
        this.CompanyName = company; this.Code = code;
        this.Total = total;
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        var Companies = new Company[] {
            new Company("One", 1, 10),
            new Company("Two", 1, 5),
            new Company("Two", 2, 8)
        };

        Accordion1.DataSource = Companies
            .GroupBy(c => c.CompanyName, c => new { Code = c.Code, Total = c.Total },
            (k, enumerable) => new { Key = k, Values = enumerable });
        Accordion1.DataBind();

    }
}