Gridview with Sub Grids

[tqeonline]

Hey Everyone!

I'm building a Sales Order page that has three layers to each sales order:
[ol 1]
[li]Customer[/li]
[li]-> Order Detail (1 to many orders)(status, date, tracking number)[/li]
[li]-> -> Items (1 to many items)(Product, color, length, quantity)[/li]
[/ol]

I found a simple example to follow that shows how to do it with Gridviews and TemplateFields w/ Gridviews: Link

It uses a + and - button to expand each of the sub rows using Javascript:

[/indent]<script type="text/javascript" src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>[/URL]
    <script type="text/javascript">
        $("[src*=plus]").live("click", function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
            $(this).attr("src", "/Content/Images/minus.png");
        });
        $("[src*=minus]").live("click", function () {
            $(this).attr("src", "/Content/Images/plus.png");
            $(this).closest("tr").next().remove();
        });
    </script>

However, I want them expanded by default. I've tried doing this by removing the style for the subgrids (Style="display: none"). But now it doesn't align nicely underneath the parent row(s).

It has some CSS along with it.

    <style type="text/css">
        .Grid td
        {
            background-color: #dde5ec;
            color: black;
            font-size: 10pt;
            line-height:200%
        }
        .Grid th
        {
            background-color: #2c3e50;
            color: White;
            font-size: 10pt;
            line-height:200%
        }
        .ChildGrid td
        {
            background-color: #eee !important;
            color: black;
            font-size: 10pt;
            line-height:200%;
        }
        .ChildGrid th
        {
            background-color: #6C6C6C !important;
            color: White;
            font-size: 10pt;
            line-height:200%
        }
        .Child2Grid td
        {
            background-color: #eee !important;
            color: black;
            font-size: 10pt;
            line-height:200%;
        }
        .Child2Grid th
        {
            background-color: #6C6C6C !important;
            color: White;
            font-size: 10pt;
            line-height:200%
        }
    </style>

Is there a way to take the above Javascript and apply it to the grid during databind? Or is there some Javascript I could write that would default to expanded?



- Matt

"If I must boast, I will boast of the things that show my weakness

 

[jbenson001]

I believe you will need to run some js to expand all the rows after the grid is rendered. Instead of the code you have, I would look into using JQuery's toggle() function:

http://api.jquery.com/toggle/

 

[tqeonline]

Is there a way to remove the Toggle or +/- options and just default it to expanded?

- Matt

"If I must boast, I will boast of the things that show my weakness

 

[jbenson001]

Yes, you will have to remove the "+/-" from your HTML and run the javascript to expand each row.

 

[tqeonline]

How? Sorry for my ignorance, i'm not even sure what to Google on this.

- Matt

"If I must boast, I will boast of the things that show my weakness

 

[jbenson001]

you already posted the code you have. You just need to modify the HTML to remove the "+/-" and create a js function to expand the rows. You can use the code you have or use the JQuery toggle() function as I have mentioned already